ねことわたしとITと

技術系で興味のある事をお勉強がてらアウトプットしていきたいという願望

【スポンサーリンク】

IllustratorでWebアイコンを作った話

さた(@nuko_me)です。はてなブログを始めてから色々とカスタマイズにハマってるのです。
というわけで、今回TwitterとかRSS用に自分で落書き風のアイコンをillustratorで作ってプロフィールを改造してみました!

f:id:sata0804:20160205222454p:plain

改造にはこちらの記事を参考にさせていただきました。ありがたやありがたや。

hmaki.hatenablog.com


さたさん情報系の学部に通っていてもっぱらWebプログラミングを専攻してましたがメディア系にも手を出してました。
illustratorでロゴとかマークをちょちょいと作れる具合には使いこなせるつもり。
今回は落書き風アイコンの作り方をRSSのだけ書いていきたいと思います。

Illustratorでアイコンを作る

ちなみにさたさんの使用しているIllustratorはCC2015です。常に最新バージョンです。
開いたら適当に新規作成しちゃいましょう。そして角丸四角形を適当な大きさでポンと作ります。色はサービスに合わせて。後で好きに変えれるのでここでは適当で構わないのです。

では早速RSSアイコンの作り方です。

①.角丸四角形をオレンジにします。


②.正円を作ります。

サイズは良い感じに小さく。

③.②よりも大きい正円を作ります。

この正円は塗りつぶし無しにして、線を5pxにします。
そして②に対して良い感じに配置します。

④.③を選択してパスのアウトライン化。

ツールバーの「オブジェクト」→「パス」→「パスのアウトライン」をクリックします。

⑤.②の左頂点と④が縦に交差する位置に四角形を作って配置します。

この時、分かりやすいように四角形の色は何かで塗りつぶしましょう。
また、線は0pxにします。
四角形は④の上に重なるように配置されてることを確認します。

⑥.④と⑤をShiftキーを押しながら選択します。

④と⑤以外のパーツが選択されてないことを確認しましょう。

⑦.パスファインダーで型抜きします。

パスファインダー」→「前面オブジェクトで型抜き」をクリックします。
そうするとこんな感じになります。


⑧.⑤のように今度は②の下と④が交差する位置に四角形を配置します。

⑨.⑥と⑦の手順を踏みます。

おっ、いい感じに出来てきました。


⑩.③のように更に大きい円を作り外側に配置して⑨まで手順を踏みます。また、位置感が違うと感じたら各パーツを移動させて更に⑤から⑨までの手順を繰り返します。

この手順を繰り返した結果がこちらです。

よくあるRSSマークが出来ました。ここから今度は落書き風のエフェクトを掛けてあげます。

⑪.全部選択してスタイライズで落書きを選択します。

ツールバーで「効果」→「スタイライズ」→「落書き」をクリックします。


⑫.スタイルで極細を選択してOKをクリックします。


⑬.完成!


おわりに

こんな感じで作っていきました。
Illustratorを使うとやっぱりベクター画像なので荒れなくていいですね!
でも慣れるのに手間取るんですよね・・・そういう時は練習です。既存のロゴとかマークとかトレスするのがいいです。
ちまちまペンツールでトレスというよりかは、どんな図形を組み合わせると作る事が出来るのかを考えるとキレイに作るコツがつかめるかなぁと。
パスファインダーの型抜きとかも利用して色んな図形を作って組み合わせるところから始めてみてくださいね!

ちなみにさたさんは大逆転裁判シリーズのロゴをトレスして練習しました。
みんなも好きな作品のもので練習してみよう!楽しいぞ!