Day2 SlackのロゴをSketchで再現してみた

２日目はSlackのロゴをSketchで再現してみる。

頑張るぞい！

今回再現するのはこちらのロゴ

なぜSlackを選んだか？だってSlackのロゴって一番かっこいい。

そしてSlackはUI、UXが秀逸ですよね。デザインを勉強したいと思った理由の50%以上はSlackのおかげといっても過言ではないです。

手順

１，まず傾きなど調べる

Slackのロゴって微妙に傾いていますよね。Sketchのルーラー機能を使ってそれを確かめます。詳細は下の画像を参照してね。

面白いことに、2つのロゴともちょうど18度ずつ傾いていました。

18度ってどうやって決まったんでしょう。。気になる。

２，この棒のサイズ情報を手に入れる

サンプル画像に棒をあわせてサイズを図っていきます。

こうすると、Radius（棒の角の丸み）が85ということもわかります。

これで形は再現できました。あとは色を変えるだけ

色をあわせるところは少々面倒です。下が作ったアイコンなのですが、緑色はよーく見ると違っています。自動的に色を合わせる方法はなにかないかなぁ？

Slackのロゴは回転させると一気にかっこよくなるなぁと思いました。

回転させないと「丼」みたいになっちゃいます（笑）

また、ロゴが4色で構成されているということがすばらしいですよね。

一色だとなんとなくインパクトにかける気がします。4色になると一気に華やかさが増します。

また、交差している部分はBlending＝Multiplyになっています。

交差部分をちょっと変えてみたロゴが左下ですが、意外と悪くないですね！

次に2つ目のロゴを同様にして作っていきます。

左がサンプル画像、右が作成中のものです。

背景部分を切り抜くところでマスクを使い、そこで少々つまりました。汗

ちなみにマスクの使い方はこちらが参考になります。

Sketch.appのマスクについて解説するよ。 – Sketch.app Advent Calendar 2013 | creative tweet.

ポイントはマスクとしたシェイプより上にあるオブジェクトがマスクされるということです。

つまり、四角形でマスクしたいなら、四角のオブジェクトのみ選択して、マスクを押せば四角より上にあるオブジェクトのみがすべてマスクの対象になるってことです。

なんとか完成！

一番左が見本のロゴ、右２つが今回作成したものです。
フォントは若干違う。。が、まぁオッケー！

ちなみに、Latoというフォントを使いました。

気分で中の文字を青色にしてみました。意外と良いね👍

やってみた感想

意外とロゴのトレースって簡単なんだなということ。

次回はFBやTwitterあたりをやってみよう＼(^o^)／