社内勉強会で発表した内容です デモ: https://mashabow.github.io/bezier-smoothness/ ソース: https://github.com/mashabow/bezier-smoothness 補足記事: https://shiromoji.hatenablog.jp/entry/2019/05/18/005232
大曲 都市 @Tosche_J .@mashabow さんとの話でInkscapeが出てきた。Spiroカーブが使えるほぼ唯一のソフトだったので気になっていたが、よく見たらMac版があるじゃないか。Spiroのコードの実装はGoogleのRaph Levien氏だが、なんとInkscapeの前身のソフトも（続） 大曲 都市 @Tosche_J …手掛けておられた。Levienさんは卒業制作でもかなりお世話になった人で、ATypIレイキャビクで初めてお会いすることができた（その時はSpiroカーブを使った新たなフォントソフトの実演をしていた）。こりゃ「イラレがあるから」とか言ってる場合じゃなくて、さっさと試すべきだな。 大曲 都市 @Tosche_J ちなみにSpiro（スパイロ、スピロ）曲線とはベジェ曲線とは全く違う方式で記述される物で、FontForgeでも使えるし彼の作ったIncons
こんにちは。SONICJAMデザイナーの森田です。 みなさま、dribbble というサイトをご存知でしょうか。 dribbble とはデザイナー向けのSNSコミュニティです。 招待制なので作品を公開できるデザイナーは限られており、作品は一定のクオリティが担保されています。（ちなみにbが３つあるのは『ドメインが取れないから』という理由だそう。） 主にデジタル領域に強いデザイナーが UI 画面やイラスト作品をあげていて、リアルなスキューモフのアイコンを製作していた時代の名残からか、特にイラスト作品は図形を元に簡潔に描かれたジオメトリックなテイストのものが多い傾向にあります。 本日はそんな dribbble 風のイラストの描き方。描く上での考え方をご紹介します。 通常の "ペンツールでパスをトレースして..." といった描き方ではなく、シェイプツールを元に無駄なく形を整えるという発想の描き方で
Bezier Curves from the Ground Up This post is also available in Japanese: 一から学ぶベジェ曲線. How do you describe a straight line segment? We might think about a line segment in terms of its endpoints. Let’s call those endpoints \( P_0 \) and \( P_1 \). P0 P1 To define the line segment rigorously, we might say “the set of all points along the line through \( P_0 \) and \( P_1 \) which lie between \( P_0 \
(編注：SVGアニメーションを元記事にならい追加しました。リクエストありがとうございました。) 皆さんは線分のことをどう表現しますか？ 線分は、端点によって考えられるかもしれません。その端点を P0 、 P1 と呼ぶことにしましょう。 線分を厳密に定義するならば、「 P0 と P1 を結ぶ直線において、 P0 と P1 の間にある全ての点の集合」と言えるかもしれません。これは以下のように表せるでしょう。 便利なことに、上記の定義から、その線分上のどこにある点の座標でも簡単に求めることができます。例えば、中点は L(0.5) にあります。 実は、2点間のどんな値でも、任意の精度で 線形補間する ことが可能です。そのため、時間関数 L(t) の t で線をたどるといった、より複雑なことができるのです。 ここまで来ると、「それが曲線と何の関係があるのか？」と不思議に思うかもしれません。2つの点だ
May 9, 2012 Pixel-fitting Note: This article contains non-retina images, which are not pixel-fitted. The irony is not lost on me. In the Markdown Mark repository on Github, I had initially included only 12 static PNG images of the mark at different specific sizes. Several people asked me why I had done this instead of including a vector graphic, and the reason is actually quite important. This is
We’ve talked about two of the biggest players in Android image format world (JPG & PNG) but it’s worth noting, that even with these advanced algorithms, there’s still a level of compression that these impressive formats can’t get to. To get there, we have to kick our concept of image creation to the curb, for something… a little more algorithmic. Raster ImagesTypically, images are arranged in a tw
Adobe Illustrator の代替アプリとして知られる Affinity Designer というMac用アプリ（¥6,000）がセールになっていたので購入してみました。 もちろん、月額ではなく買い切りのアプリです。 追記: このセールは既に終了しています。 しばらく使った感じ、なかなかよい感触だったので、使ってみて良いと感じたところと良くないと感じたところ、気づいたことなどまとめてみました。 Affinity DesignerのPhotoshop的な機能 Affinity Designer は、よく「Adobe Illustrator の代替アプリ」と言われますが、厳密には Illustrator の機能だけでなく、Photoshop の機能の一部も持っています。 具体的には以下のような機能です。 ちょっとしたビットマップ画像の修正（長方形選択ツール、ブラシツール、消しゴムツール
Affinity Designerを初めて使った時に戸惑ったことをまとめてみました。最初の戸惑いをクリアすれば、すごく使いやすくサクサク動くオススメのアプリです。無料試用版 もあるので、ぜひ、お試しください。 2022年11月9日にAffinity Designerのバージョン2が公開されました。この記事の内容はバージョン1の情報です。バージョン2では大幅なUIの刷新（レイヤーパネル周りも結構変わりました！）が行われており、バージョン1とは画面の見た目や機能自体が違うものもありますのでご注意ください。 目次 初心者向けAffinity Designerの使い方シリーズ Affinity Designerがおすすめな理由 使いはじめに戸惑ったこと 1. ツールバーやパネルの表示の調整 2. レイヤーまわりの操作 3. カラーピッカーの使い方 4. ペルソナ（操作モード）の使い方 5. Com
みなさん、こんにちは。川井昌彦です。 好きなAdobeは Fireworks です（笑） というわけで、2015年11月28日に大阪で行われた、第26回リクリセミナー「天下分け目のベクター祭り SVGじゃ！ Illustratorを持てい！」に参加してきました。 インターネットがありとあらゆるデバイスで表示されるようになり、従来の小さな点の集合で画像を表示するラスター形式（JPEGなど）だけでは限界を感じてきたところで、座標と方向で図形を描くベクター方式（SVGなど）が注目され始めています。 そして、ベクター形式を扱うソフトウェア「Adobe Illustrator」をWebデザインツールとして使用する流れも出てきました。 私は元々DTP出身という事もあり、Illustratorは5.5（CSじゃありませんよ、無印の5.5です）からずっと日常的に使用しています。 Webデザインツールとして
#はじめに Canvasを使用して、漫画で使われるような 吹き出し表現を再現してみました。形自体にも汎用性があると思うので、吹き出し以外にも使えそうです。これで漫画表現シリーズは三作目となりました。（今までに書いたものは最下部を参照ください）今回書いた吹き出しは以下の3種類になります。 吹き出しのシッポ（何ていうのか分からない。。発言者を示す細い三角のやつです）は想定していません。 [動作イメージ] パーッとした吹き出し パンクな吹き出し モコモコな吹き出し なお実際の動作は以下で確認できます http://nekoneko-wanwan.github.io/demo/canvas/effect/fukidashi/light/ http://nekoneko-wanwan.github.io/demo/canvas/effect/fukidashi/punk/ http://nekone
The Hexels canvas is a paintable grid of geometric shapes that lets artists create complex designs with the stroke of a brush. It is a new kind of vector workflow, a friendly playground for the beginning artist, and a versatile tool in the hands of a professional. Hexels pairs digital art tools with a unique geometric grid: a discrete and tessellating mosaic. This grid combines the feel of free-fo
SVG comes with several shape elements - rect, ellipse, line, polygon - that can create basic forms. To create a map, streamgraph or other more complicated shapes, path elements are used. Instead of specifying the size and position of a path element with attributes like height, radius or x as we do with the basic shapes, the geometry of the path element is determined by a single d attribute. This d
ベジェ曲線をレンダリングしていたら面白くて丁寧に描いてしまった。せっかくなのでこれを使って誰にでもわかるように（たぶん中学生でも分かるように）ベジェ曲線というものが何かを説明してみたいと思う。 ベジェ曲線というのはなめらかな曲線を描くためのものなのだけど、説明はまず単なる直線から始めることになる。この下の図の点の動きがすべての基本になるからだ。 一本の直線があって、その上を点Mが一定の速度で移動している。この点Mの軌跡は、もちろんだけど、単なる直線になる。いいよね。tというのは線分上をどれだけの割合進んだのかを表す数値だ。 もうひとつ線を増やして、その上に、Mと同じように移動する点をもうひとつ増やすことができる。もともとの点MをM0、新しい点をM1と呼ぶことにしよう。M0とM1が動くルールは同じままだ。M1が増えても特にややこしくなっていることはないね。 さて、ここでM0とM1をつなぐ線を
こんにちは、Androidチームの中川@Nkznです。 Android Studio 0.8.14のリリースノートを見ていて知ったのですが、LollipopのAPI Level 21では<vector>などのdrawable系タグが拡充されたのですね。 名前的にベクターイメージが書けそうですが、実際何ができるのだろうと思って調べてみました。 Working with Drawables | Android Developers Vector images are represented in Android as VectorDrawable objects. For more information about the pathData syntax, see the SVG Path reference. <vector>の中に書く<path>タグのpathDataの記法が、SVG準拠
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く