Sublime Text Icon 2014

ちょっとヨセミティ？ちょっとSketch使ってみぃ？

今日はSketchを使ってYosemiteライクなアイコンを作ってみようって話です。

今年の5月にSketch3ハジメマシタって言っておきながら、それ以来まったくSketchを使ってなかったことを反省したので、最近、SketchCastsを見ながら勉強してました。余談ですが、SketchCastsは月$8でSketch.appの使い方をスクリーンキャストで学習できるサービスです。やっぱ実際に動かす・制作してるとこ見るのが一番理解が速いと思います。

そんなわけで、ひと通り使い方を学習したので何を作ろうかなと思いまして、そういえば、昔Sublime Textのアイコン作ったなーと思いだしまして、それをリデザインしてみようかと思います。

旧バージョン

上記のアイコンですが、2年前に作った、いわゆるスキューモーフィズムっぽいやつで、しかもiOSのアイコンベースにしていたので、デスクトップアプリのアイコンとして使うにはなんだか野暮ったいです。もっと現代っぽくしたいです。もっとフラットっぽくしたいです。

Yosemite

最新のYosemiteのアイコンの仕様に関しては上記の記事を読むと良いです。僕は読んでないですが、とりあえずはなんかガイドラインが引いてあるテンプレートみたいなものがあるのだろう、そしてそれに沿って作れば、それっぽくなるんじゃね？って思い探してみました。

はい、ありました。Sketchのこうゆうエコシステムはほんと素敵ですね。

新バージョン

あとはガイドにそって光源とか注意してあまりゴテゴテしないようにすれば、できあがりです♪

ダウンロードは上記からどうぞ。自分でも作ってみたいって方は上記のレポジトリをフォークして作ってみるといいよ。Sketchファイルも入ってるよ。なんだか人にSketchファイルの中見られるの恥ずいですな(ﾉ´∀｀*)

ICNS

あとファイルを作るときに、下記のオンラインツールを作ってたんだけど、どうも高解像度のアイコンが生成されなくて、Appleの標準のICNSファイル見たら10サイズあったのだけど、オンラインだと5サイズしか生成されなかったので、Macアプリ買ったらちゃんとフルサイズ作れました。

あとで知ったけど、iconutilってコマンドで作成できるらしい！

あとで知ったけど、Sketchのプラグインがあった！

あとで知ったけど、作ってるアイコンをすぐさまDockでプレビューできるプラグインもあるよ。