今まで使っていたアイコンがイマイチだったので作り直した話です。
twitterとはてなで使っているアイコンをSketchで描き直しました。
以前、年賀状を作ったときと同じようにWebデザインツールでお絵かきをするという話です。
元のアイコン
今まではタイで撮った謎のキャラの写真をはてなブックマークやTwitterのアイコンとして使っていました。
表情がなくて味気ないですよね!そしてよく見ると(よく見なくても)、可愛くない。
ちなみにこの写真はアジアティークという場所で撮りました。
場所はおしゃれでしたが、可愛い写真は撮れませんでした。はぁ。
手描きをしよう
味気ないキャラでもフリーハンドで描いたらあたたかみが出て良いのでは?と思ってFireAlpacaというお絵かきソフトで描き直しました。
出来た!うーん、イマイチ!
手描きにしたけれど、下手ウマでもない愛嬌もない納得がいかない出来になってしまいました。
Sketchで描き直す
ここからが本題です。
手描きをベースにSketchで綺麗な線に描きなおすことにしました。
まずは、フリーハンドで描いた絵をsketchに突っ込みます。
元の絵のopacityをいじって透明度を下げます。
薄くした絵をなぞるように丸をのせていきます。
丸はinsertのshapeからovalを選べばOKです。
ovalを元の絵の上にどんどん載せていきます。
丸で埋め尽くします。
丸を合体させて一つの図形にします。
unionで合体させて、borderを太くするとこうなります。
shapeの三角と丸、unionとsubtractを駆使して、editでvectorの線を少しいじったらこうなりました。
2パターン作って、色をつけました。
左の方が優しそうに見えたので、左を採用です!
背景色をつけて完成です〜!
twitterの円にも無事おさまりました。
今回はsketchを使って作りましたが、Illustratorなどの他のvectorが使えるツールでもこんな感じで作れると思うので参考になれば幸いです。
以上です。
スポンサーリンク