Illustrator から svg!vol.06 【アンカーポイントを追加しよう!】

ラストスパートです!


SC2018_77

この部分の書きかえポイント。


クジラの潮の部分。

SC2018_86

元に比べて。


SC2018_75

大きさもちがうし、形も変わってる。 数もふえてます!


スタイルを変えた時に、複合パスから切り離した二つ。

<path class="cls-4" d="M194.31,82.9c5.76-6.38,14.56-5,15.06.75.86,9.92-15.39,1.32-25.69,20.17C183.68,103.82,187.51,90.41,194.31,82.9Z”/>
<path class="cls-6" d="M162.69,75c2.58-4,7.53-1.65,10.58,1.14,2-6.48,5.37-7.1,8.37-4.45,4.79,4.2-3.61,12-3.14,19.16C174,84.16,157.07,83.73,162.69,75Z”/>


片方の座標を書きかえて。

SC2018_90

<path class="cls-4" d="M194.31,100c5.76-6.38,14.56-5,15.06.75,4.5,9.92-10,20-25.69,30C170,103.82,187.51,90.41,194.31,100Z”/>
<path class="cls-6" d="M162.69,75c2.58-4,7.53-1.65,10.58,1.14,2-6.48,5.37-7.1,8.37-4.45,4.79,4.2-3.61,12-3.14,19.16C174,84.16,157.07,83.73,162.69,75Z”/>

ハートにしました! もう簡単ですよね!!


っで、


SC2018_91

<path class="cls-4" d="M194.31,100c5.76-6.38,14.56-5,15.06.75,4.5,9.92-10,20-25.69,30C170,103.82,187.51,90.41,194.31,100Z" transform="scale(2,2) translate(-90,-90)”/>
<path class="cls-6" d="M162.69,75c2.58-4,7.53-1.65,10.58,1.14,2-6.48,5.37-7.1,8.37-4.45,4.79,4.2-3.61,12-3.14,19.16C174,84.16,157.07,83.73,162.69,75Z" transform="scale(2,2) translate(-100,-50)”/>

transform で拡大と移動を!

残念なことに回転は効きませんでした。

拡大は、オブジェクトではなく、座標全体の拡大になります。
その分も、移動で整える必要があります。


複合パスを一つ残しています。


結果から。

反転したオブジェクトを増やしました。

SC2018_92

M161.74,102.31c1.89-5.49,10.75-4.66,14.8,2.93,4.77,8.93,5.24,22.87,5.24,22.87C176.35,107.33,158.5,111.72,161.74,102.31Z
M205.74,102.31C210.5,111.72,190.35,107.33,185.7,128.11,185.7,128.11,186.17,114.17,190.94,105.24C194.99,97.95,203.85,96.82,205.74,102.31Z


複合パスは、その母体のパスの最後尾に続けて描かれます。
コピペも続けて大丈夫。

上のデータの下が反転したものです。

練習のため、すべて絶対座標にしてみましたが、
元は相対座標の数値を始点を中心に反転しました。

元が絶対座標のところは、対した大きさではなかったので、
そう見える位置に感覚で書いたものです!


ところで、複合パスはなんで複合パスになるんでしょうか?


続けて書いてあるからだけではないようです。

というのも・・・最初反転したら、オブジェクトが消えてしまったのだ!

でも、外に出すと現れる?


反転したから??


と思って、逆回転に座標を書き直したら、無事、複合パスになりました!


これ、ベースのパスの方向と関係あるのかな?

ベースは、反時計回り。
複合部分は、時計回り。

基本、単体のパスは反時計回りになるようだけど、
時々、時計回りも現れます。


もしかしたら、ベースと反対回りにするのかも??


検証しないけど・・・。


抜けなかったら、反対回りにすればいい!


ということですね!!


いよいよ最後の部分、ヒレです。



SC2018_94

<path class="cls-5" d="M98.4,330.77c-3.82-64.35,25.41-85.71,48.35-113.61,3.15,0,8.77,5.62,10.57,8.55-11.47,18.45-12.23,41.17-11.78,54.44C112.48,298.37,106.72,319.74,98.4,330.77Z”/>

元。


SC2018_74

<path class="cls-6" d="M60,330.77c30-20,40-20,23.4-50,50-15,15-30,63.34-63.6,3.15,0,8.77,5.62,12,8.55-20,18.45-2,55-30,70C80,300,130,320,60,330.77Z”/>

書きかえ後。 ひらひら!



元データ

<path class="cls-5" d="M
98.4,330.77 始点

c
-3.82-64.35, -1B

25.41-85.71, -2A
48.35-113.61, 第2点

3.15,0,

8.77,5.62,
10.57,8.55 第3点

-11.47,18.45

-12.23,41.17
-11.78,54.44 第4点

C
112.48,298.37,

106.72,319.74,
98.4,330.77 終点
Z”/>


書きかえデータ

始点

c
30-20, -1B

40-20, -1/2A
23.4-50, 第1/2点

50-15, -1/2B

15-30, -2A
63.34-63.6, 第2点

3.15,0,

8.77,5.62,
12,8.55 第3点

-20,18.45

-2,55
-30,70 第4点

C
80,300,

130,320,
60,330.77 終点
Z"/>

始点 と 第2点 の間に、アンカーを追加しちゃいました!


この場合、第2点 は動かしたくありません。


どうやって 第2点 を動かさずにアンカーを追加するのか?

は、二つ方法があります。


わかりやすいのは、絶対座標に直してしまうことです。

えー、 終点 まで全部計算するのかー・・・。

でないことは、もうおわかりのはず!

第2点 まででいいんでしたよね!!

そして、C・c を適所に挿入。

「このあたりにアンカー」
と思う座標にハンドルと点を書き足します。


もう一つ、私のとったのはこっちの方法。

相対座標のまま挿入してみましょう!


まず、始点から 第2点 の x・y の半分を計算。


第2点の座標をその数値に。
-1B-2A のハンドルも短めにしておきます。
あとから調整するのでここも半分くらいに。


始点 と 第2点 の間に 第2点 と同じ数値の 第1/2点 を挿入。

前後のハンドルは、はじめ、 第1/2点 と同じ数値にして、
あとから引き出せばいいです。


98.4,330.77 始点

c
-1.91-32.17, -1B


24.17-56.80, -1/2A

24.17-56.80, 第1/2点

0,0, -1/2B

12.7-42.85, -2A
24.18-56.81, 第2点


SC2018_93

ね? 半分の位置にアンカーが打てた!


ということは・・・。

始点〜第1/2点 + 第1/2点〜第2点 = 始点〜元第2点

に設定すれば、どこにでもアンカーが挿入できるんですね!

距離でアンカーの場所がイメージできるから、
こっちの方が思った位置にアンカーが打てる気がします。


アンカーを減らしたいとき、次点が相対座標だったら、
一つ前のアンカーから削除するアンカーまでの距離を加算すれば大丈夫です。
ハンドルも消し忘れないようにね!


あとは、ちょこちょことバランスをみながら微調整。



SC2018_72

完成しました!


みなさん(いるのかな?)、おつかれさまでした!

ここまでできれば、Illustrator の svg なんてへっちゃらなはず!!


えっ? なんの役に立つのかぁ?


それは、もう。

たとえば、

夏休みの海外旅行中、スマホだけしかないのに、
クライアントから、
「サイトのイラストの修正を即やれ(怒)」
とのメッセージが届いたとき!

とか?

というくらい、実務向きではないけど、
ベジェがどういうものなのかということがよくわかります。

一度、データを開いて動かしてみることはムダではありません。



ここまで読んでくださったみなさまに。

サンプルを用意しました。

svg_sample.zip

おひまがあるときにいじってみると、ひまつぶしになりますよ!




・・・。

なんだか簡単なイラストだったら、
フリーで描けるような気がしてこない?



もう引けません!


数値だけで描いてみようじゃないか!!(数日まってて)


関連記事

コメント

非公開コメント

mayahuel

ブログ内検索

カレンダー

03 | 2024/04 | 05
- 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 - - - -

月別アーカイブ