Sublime Text 2 のアイコンをなんとかする

とりあえず作ってみました！ Sublime Text 2に関することであれば何でもOKです。

ということで、Advent Calendarでは与えられたテーマから外れた内容で記事を書くことに定評のある@t32kがラストを飾ってやんよ(o°3°b)b

私、恥ずかしながらSublime Textのプラグインを作ろうと思ってもPythonも書けない最下級サブライムテキスターなので、そんな僕でもいつかはPythonとかRubyとかSublime Textで書きたいと思うわけです。そこで今はその悔しい気持ちをアイコンにぶつけるわけです。

現実

ST2のアイコンですけど、まぁそんなに、いまいち、いわんや、それほど、ましてや、はたまた、それでいて、かっこよろしくないわけですね。なんだろう色かなぁ、角度？形状？S?

そんなわけで、こう思っているのは万国共通なのか「Sublime text icon replacement」なんかでググりますと、いろいろ出てきます。

世界中のデザイナーが作品を投稿するSNSサイト「Dribbble」でも検索してみるといろいろ出てきます。

既存のアイコンをブラッシュアップしたもの、「S」をモチーフにしたもの、「Lime」をモチーフにしたもの、やたらシンプルなもの、いろいろです。ここで自分のお気に入りのアイコン、DLできるアイコンが見つかれば問題ないのですが、これじゃ満足できないなんでも欲しがる子はやっぱり自分で作るしか無いわけです。

The Icon

自分でSublime Textアイコンを作る前に、アイコンの予習をば。

なにごとも、最初からオリジナルなものを作るのは難しいです。プログラミングでもそうでしょ？最初は良いコードを写経するもんでしょ？なので、僕も勉強がてらinstagramのアイコンとか写経してみました。いろいろ詰めが甘いですが、光の付け方とかこーすればそれっぽく見えるんだなとか一回やってみるといろいろ勉強になります。

上記のサイトとか見てると綺麗なアイコンがいっぱいでテンションあがります。ただ、こういったところにあがっているものを最初から作れるわけないので（こうゆうのとかどっから手を付けたらよいかわかりません＞＜）、部分的にパクるとか、Psdtuts+などでは比較的簡単な、よく使われる表現のチュートリアルがあるので、そういったものをやってみて表現できるボキャブラリーを増やしていけばよいと思います。

Sublime Text Icon

さて、Sublime Textのアイコンを作っていきますか。幸いにもひな形というか、Sublime Textで必要となるフォーマットは上記のGitHubからフォークすることできます。なるほどデザインデータもGitHubで管理する時代ですかなるほど(・ω<) ご丁寧にもPSDデータまであるので、見てみますと512pxサイズで作っておけばあと問題ない感じですかね。

個人的にはテキストエディタのアイコンなので、テキストブック…ブック….本( ・∀・)!!みたいなアイコンにしたいと思いました。

icon1

最初に作ったのこれ。縫い目の表現をしたかったので個人的に満足したのですけれどもロゴマーク的（S）なものがしっくりきてないのと、iOSアイコンのテンプレートで作ってるのMac Appアイコンとして見てると少し平べったい印象です。

なんかもうちょっとモッコリしてみたいなと思ったのと、本の「地」みせた感じのあの表現やってみたいなと思ってぐぐってみるてると、見つけました。

おお！アレアレ！ということですが、これをそのまま使うのは芸がないので変えてみましょう。なんかいいのないかなと思ったら手元に某有名なメモ帳があったのでこれを真似てみましょう。 なんでこんなにテカってる本なのでしようね、テクスチャを落ち着いたレザーに変えたいものです。 ということで、いつもテクスチャ系でお世話になってるのが上記のサイトでSubtleというだけあって主張し過ぎない、ギラつかない、いい感じのテクスチャがいっぱいあります。 icon2 で、ちょいちいといじりますとこんな感じに出来上がりました。 あとは、出来上がったPNG形式の画像を下記サイトでicoやicnsに出力します。

いかがでしたでしょうか？デザインってのそんなに難しくないですよね？いや難しいか… いや僕も絵とか書けないんですけど、最近のプログラミングみたいに便利なオープンソースフレームワークを使ってちゃちゃっとWebアプリケーションを作るような感じで、アイコンとかも便利な素材やチュートリアルがたくさん出回っているので、うまく活用してお気に入りのアイコンを作ってみたらいいんじゃないかと思います。