あんのーんのアレ

人生のーぷらん

知る人ぞ知る神Twitterクライアントことついのーんにアイコンが付いたらしいですね

ひどいタイトルだ

公開されて600円という強気な値段設定で話題になったAndroidTwitterクライアントついのーんについにアイコンがついたのーんらしくtwitterで盛り上がっております

play.google.com

絵心とかまったくない人がどうやってそれっぽいアイコンを作ったのかをまとめる

 

f:id:unknown_Ex:20160925194148p:plain

これがそのアイコンです。それっぽい。Androidアプリっぽい感じですね。

アイコンのイメージは特になく、なんかそれっぽいものを作ろうとしたらこうなってました。

元々のインスピレーションを受けたのがコリスの記事で、そこのOmbréがいい感じにお洒落で手軽に作れそうだなーと、グラデーションをつけたアイコンにしようと思った。

coliss.com

この記事自体は結構前のもので、何かに使えそうだなーと思っていたので今回使えてよかった。

作成したソフトなんですが、ベクター形式の方が多分いろいろ楽なのと最近仕事(女子中学生です)でよくGoogleDrive使っていて、その図形描画に可能性を感じていて適当に作りました。(mac使ってたらomni graffleを使っていたと思う

ステップ1:それっぽい図形を作る

f:id:unknown_Ex:20160925195408p:plain

標準で使える図形パーツから適当に。今回は「弦」を使いました。
これを適当な形にします。ここでもう大体のイメージは決めてあって、扇風機の羽をイメージしています。

ステップ2:回転してつなげる

f:id:unknown_Ex:20160925195704p:plain

さっき作った図形を90度回転させてなんかそれっぽい感じに角を合わせる。それを4つ。弦の角はくっつかないので適当に位置を合わせてます。

くっつけた状態だと正方形にならないので、全選択して正方形になるように合わせる必要がります(数値入力してサイズ変更とかできない?ので正方形の四角を出してそれにサイズを合わせるといい)

ステップ4:色をきめる

絵心のないデザイン弱者のみなさんの強い味方。Adobe Color CCから適当にいい感じのカラーパレットを探しましょう。今回はそれっぽいグラデになってるものを。

color.adobe.com

この探索ではそれっぽい色がそれっぽい感じで並んでそれっぽい感じで評価が付けられているのでそれっぽいものを選びましょう。めんどくさいので今回は上から3つめのグレースケールっぽいものにしました。

Adobe Color CC

ステップ5:回転させてくっつける

f:id:unknown_Ex:20160925200353p:plain

はいできました。元の図を正方形にしておけば縮小して回転して重ねて色をつけるだけです。誰でもできるね!

ちなみにこれは30度回転で4つ重ねています。その場合、1番前と後ろが同じ位置になるのでそこだけずらしてます。

これで誰でも簡単にそれっぽいアイコンが作れるようになりました。終わり。