あかやまの備忘録

誰かの役に立ちそうだと思ったことを自由に書くブログです

Sketchでtwitterとはてな用のアイコンを作った

 

今まで使っていたアイコンがイマイチだったので作り直した話です。 

twitterはてなで使っているアイコンをSketchで描き直しました。

 

以前、年賀状を作ったときと同じようにWebデザインツールでお絵かきをするという話です。

 

 

元のアイコン

今まではタイで撮った謎のキャラの写真をはてなブックマークTwitterのアイコンとして使っていました。

 

f:id:vayataka:20161007192953j:plain

 

表情がなくて味気ないですよね!そしてよく見ると(よく見なくても)、可愛くない。

 

ちなみにこの写真はアジアティークという場所で撮りました。

場所はおしゃれでしたが、可愛い写真は撮れませんでした。はぁ。

 

手描きをしよう 

味気ないキャラでもフリーハンドで描いたらあたたかみが出て良いのでは?と思ってFireAlpacaというお絵かきソフトで描き直しました。

firealpaca.com

 

f:id:vayataka:20170829212051p:plain

 

出来た!うーん、イマイチ!

手描きにしたけれど、下手ウマでもない愛嬌もない納得がいかない出来になってしまいました。 

 

Sketchで描き直す

ここからが本題です。

手描きをベースにSketchで綺麗な線に描きなおすことにしました。

 

f:id:vayataka:20170829213111p:plain

まずは、フリーハンドで描いた絵をsketchに突っ込みます。

 

f:id:vayataka:20170829213205p:plain

元の絵のopacityをいじって透明度を下げます。

薄くした絵をなぞるように丸をのせていきます。

丸はinsertのshapeからovalを選べばOKです。

 

f:id:vayataka:20170829213305p:plain

ovalを元の絵の上にどんどん載せていきます。

 

f:id:vayataka:20170829213426p:plain

丸で埋め尽くします。

 

f:id:vayataka:20170829213510p:plain

丸を合体させて一つの図形にします。

unionで合体させて、borderを太くするとこうなります。

 

f:id:vayataka:20170829213717p:plain

shapeの三角と丸、unionとsubtractを駆使して、editでvectorの線を少しいじったらこうなりました。

 

f:id:vayataka:20170829213952p:plain

2パターン作って、色をつけました。

左の方が優しそうに見えたので、左を採用です!

 

f:id:vayataka:20170829214031p:plain

背景色をつけて完成です〜!

 

f:id:vayataka:20170829214418p:plain

twitterの円にも無事おさまりました。

 

 

今回はsketchを使って作りましたが、Illustratorなどの他のvectorが使えるツールでもこんな感じで作れると思うので参考になれば幸いです。

 

以上です。 

 

スポンサーリンク