Illustrator から svg!vol.05 【自由なベジェ曲線は描けるの?】

最初からこの記事におつきあいしていただいてる方は、
もう座標も読めちゃうしハンドルも動かせちゃう。

じゃぁ、本当に自由にベジェ曲線は描けるんでしょうか?


すでにあるイラストを書きかえましょう。


あっ・・・【描画】を「描く」【データ】を「書く」としてます。


SC2018_42

先にスタイルを変更した、このバナー。


SC2018_72

どん!


どうでしょう?!

自由なベジェ曲線は描けます!

かなり大変だけど!!

ちょー手間がかかるけども!!!


はっきりいって、全部の手順は読む前からお腹いっぱいになっちゃうと思う。

それでもやってみたい!

という方にポイント解説です。 がんばりましょう!!


SC2018_76

この記事では、こちらの部分の書きかえポイント。


尾びれの部分です。

SC2018_73

大きく書きかえました!


まずは、円弧。

はじめて出てきました。 アルファベット A。

円弧で描いたんじゃないんだけど、円弧に変換されてしまいました。

このあたりは、気まぐれのようです。

何度か書き出してみましたが、
その時々、普通にパスで書き出されたりもします!


Illustrator ではこちらです。

SC2018_78


データです。

<path class="cls-1" d="M
420.11,58 始点

h-8.23 始点から水平(H・h)に -8.23 の第2点

A63.23,63.23,0,0,1, 第2点と第3点を通る 円弧-1

416,79.7, 第3点

63.46,63.46,0,0,1, 第3点と第4点(終点)を通る 円弧-2

420.11,58 終点

Z”/>


円弧-1 の数値を変えてみます。

見やすく、オブジェクトを消しました。
文章よりも画像で理解してね。


SC2018_79

A63.23,63.23,0,0,1, 元の状態。

これでは、どの程度の円の円弧なのかよくわからないので。


SC2018_80

A63.23,63.23,0,1,1,

円を反転させます。



A の最初の二つの数値は、円の大きさ。

SC2018_81

A63.23,20,0,1,1,

x軸が最初の数字。 y軸を変えてみました。


反転した円を戻してみると・・・。

SC2018_82

よれちゃいましたね〜。


楕円にして、最初の 0 に数値を入れると。

SC2018_83

A100,63.23,10,1,1,

傾きます。
楕円のどこの円弧を使用するのかということ。


最後の 1 は。

SC2018_84

A63.23,63.23,0,1,0,

使用する円弧の反転です! 最初のは、円そのものの反転。
わかりやすくレイヤーを上にしてます。


ここでは、

<path class="cls-1" d="M430.11,58h-28.23A63.23,63.23,0,0,1,416,100,63.46,63.46,0,0,1,430.11,58Z”/>

と書きかえ。

円弧は変えず、第3点を下に、他 2点間を広げました。



次は、尾びれの右側。

Illustrator 。

SC2018_85


データ。

<path class="cls-4" d="M530.44,0c-2.78,5.1,2.78,21.78-26,19.46-24.46-2-70.41,2.78-84.38,38.57H526.76C535.41,44.07,538.67,25.37,530.44,0Z"/>


SC2018_86

始点を大きくのばした形にしたいな。


始点の位置を変えてみましょう!
終点の座標も同じにしてくださいね。

y座標を上方に引き上げました。


SC2018_87

<path class="cls-4" d="M530.44,-30c-2.78,5.1,2.78,21.78-26,19.46-24.46-2-70.41,2.78-84.38,38.57H526.76C535.41,44.07,538.67,25.37,530.44,-30Z"/>

なんだ? ダメじゃん。

ではなくて、相対座標を忘れているからです。

どこか 1点を動かす場合、その後に相対座標が続くとき、次の点(アンカー)座標の値も加減させます。


この例では、始点と終点の y を マイナス30 で上に持っていったから
第2点の y は プラス30 でもとに戻します。

厳密に言えば、その前のハンドルもですが、
どうせ全体での調整が必要だから、そのままにしています。


SC2018_88

<path class="cls-4" d="M530.44,-30c-2.78,5.1,2.78,21.78-26,49.46-24.46-2-70.41,2.78-84.38,38.57H526.76C535.41,44.07,538.67,25.37,530.44,-30Z”/>

できたかな?

あとは、いいぐあいにハンドルを調整します。


では、先ほどのこちらに戻ってみましょう。

SC2018_87

<path class="cls-4" d="M530.44,-30c-2.78,5.1,2.78,21.78-26,19.46-24.46-2-70.41,2.78-84.38,38.57H526.76C535.41,44.07,538.67,25.37,530.44,-30Z"/>

一つのオブジェクト全体を移動したいときも、まず、始点と終点を移動します。

今度は、相対座標はついてきますが、絶対座標がついてきません。

なので、絶対座標の加減をします。

こっちは、出現する絶対座標すべてです。


SC2018_89

<path class="cls-4" d="M530.44,-30c-2.78,5.1,2.78,21.78-26,19.46-24.46-2-70.41,2.78-84.38,38.57H526.76C535.41,14.07,538.67-4.63,530.44,-30Z”/>

C の後の y を、それぞれ マイナス30 しました。


あれ? H も絶対座標なんじゃないの??


H は、前の点から この座標まで 平行線を引く指示です。

y 方向に垂直移動したので座標は変わりません。
x 方向に水平移動したときは、書きかえが必要です!

ちなみに、V は、垂直線。

L は、ハンドルのないラインです。


・・・大丈夫ですか?


もしかしてもう誰もついてきてなかったりして??


もうちょっとがまんしてくださいね。



長くなったので、続きます!




関連記事

コメント

非公開コメント

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 - - - -

月別アーカイブ