もともと使用頻度としては フォトショップ＞＞＞イラストレーターだったこともあり、イラストレーターに苦手意識がありました。

フォトショップと操作が違うし、パスの扱いが難しいし…。
でも、社内にいらっしゃるイラストレーターが得意な人を見ていると、パスを使って綺麗なアイコンが作ったり、イラストが作ったり、自作だから変形も自由が効いていいなぁ…という憧れから、アイコンコピー30個をやってみることにしました。

アイコンコピーしてみて身についたこと

・後から調整しやすいアイコンの作り方が身についた
・ハンドルの長さとアンカー位置に気をつけたら、ベジェ曲線が克服できた
・操作に慣れて、コマンド覚えたり基本操作の速さが上がった

後から調整しやすいアイコンの作り方

自己流でやっていたパスの操作を捨て、公式の作法に今一度則ってみようと調べたこのサイトで、後から調整しやすいアイコンの作り方を身につけました。illustratorの図形描画の基本のおさらいにもなって非常に良いです。

やってみたい方は上記の記事を参考にしてみると良いと思います。

調整に強いアイコンを作る上でのポイントは、複合パスと変形です。

複合パスの理解が難しくて、最初操作を理解するのに苦戦しました。以下製作していた時のメモを自分用に残しておきます。

・Option + パスファインダー中マドで型抜きをクリックで複合パス作れる
・複合パスで作った図形の単体の操作をしたいときは、ダイレクト選択ツール(A)でアンカーをクリックしてから選択ツール(V)にすると選べる
・効果 → 変形 → 回転とコピーすると便利
・透明を分割・統合　中マド型抜きクリックで、中間透過素材つくれる
・効果をバスで分割すると型抜きしたとき反映されなくて楽

ベジェ曲線の克服の仕方

歪む曲線、ブレまくるハンドル、ストレスがいっぱい。パス操作が苦手でしたが、ベジェ曲線の操作については以下のサイトが参考になりました。

ロゴ製作時の文字の変形など、図形の組み合わせだけでは難しい場合でも、臆せずベジェ曲線の操作ができるようになります。

個人的ポイントは、アンカーになるべく変な角度つけないで、水平を伸ばしてカーブを作ることです。

文字の加工もこれで怖くない・・！

まとめ

上記サイト以外には、普段良く使うアイコンの造形をよく知る切っ掛けにもなると思い、fontawsomeのアイコンをコピーして製作したりしていました。パスを使ったイラストにあこがれて、ミニイラストを作ってみたり。

illustrator苦手意識の払拭には成功できたと思うので、オリジナル製作をもっと増やしてillustratorがより身近な、強い武器になってくれるよう精進しようと思います。

参考サイト一覧

https://blogs.adobe.com/creativestation/web-illustrator-icon-logo-ui-part-based-icon

http://commonsense-design.com/graphic/ai-icon-tut/

http://webdesignrecipes.com/illustrator-and-photosho-pen-tool-tips/

https://fontawesome.com/icons?d=gallery