svg で自由に描こう!vol.01 【 お魚を書く!できるかな? 】

Illustrator で描いて svg に変換したベジェ曲線データを、
自在に書きなおすことができるのはわかったとして。


一から書いてないから本当にできるとはいえないんじゃないの?


と、私の中でつっこむ声が聞こえます。

はたして、テキストエディターだけで、
フリーなベジェ曲線のイラストが描けるのでしょうか?


もう、やるしかありません!


とはいっても、
はじめからまったく目当てもなしに描くのはムリだと思うの。


原図を用意。 手描きで!


そうです。
うっかり原図を Illustrator で描いては本末転倒。
アンカーとハンドルが、わかっちゃいますからね。


svg_fish_01.png

アナログ感いっぱいに、反故したコピー用紙の裏。


svg_fish_02

クリアファイルに、方眼入りのトレペと一緒にはさみました。


アンカーとハンドルは、経験と実績がものをいう!


svg_fish_03

原図には、アンカーのあたりをつけました。

でも、定規などは使わないと自分に足かせです。


だって・・・確実にわかっちゃいますもん。


定規とコンパスがあれば、
ハンドルの位置はかなりの精度で割り出せます。

絶対に決めたいのであれば、
原図にハンドルを引いてしまえばいいんだけどね。


おもしろくないでしょ?


なるべく Illustrator を操作しているように、
数値を入力したいと思いました。

だから、アンカーもハンドルも、方眼から目測で!

方眼は、1mm = 1px だと小さくなっちゃうから、
読値を 4倍 にしました。


さて、私は美しくアンカーを配置できるのか?
ハンドルを引くことができるのか?


Illustrator歴数十年のスキルが試されます!!

ドキドキです!!!


方眼を凝視すると・・・。
心眼でハンドルが見えてきたようなこないような?


始点とハンドル・第2点を入力。

ここまで入力しないと描画されません。
最初の曲線が思惑通りだったら、私の根拠も外れていないという証拠。

svg_fish_04b

わぁーい!


第3点。

svg_fish_05b

おー!


svg_fish_06b

第4点。


svg_fish_07b

第5点。


svg_fish_08b

第6点。


svg_fish_09b

第7点。


svg_fish_10b

終点。


なかなかじゃないの!


それぞれを書きながらも微調整調しました。
そして、全体を俯瞰して調整。


入力中は、始点と終点以外は相対座標で書きましたが、
後々の動かしやすさを考慮して、第4点は絶対座標に置きかえました。


じゃん!

svg_fish_11b

いけるかも!!

なんかうれしい!!!


30分 かかったけどな!


・・・いつ描きあがるのかしら?


svg_fish_12

明日以降に続きます。



お楽しみ(?)に!!




関連記事

コメント

非公開コメント

mayahuel

ブログ内検索

カレンダー

04 | 2024/05 | 06
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -

月別アーカイブ