About

--About this site

dropくん

iOSアプリのアイコンギャラリーです。
アイコンのサンプルが大量に欲しくなったので作ってみました。アプリ開発者の方、デザイナーの方、アイコンデザインの参考に是非どうぞ。 iPhoneユーザーの方で、おしゃれなアイコンでホーム画面を彩りたい方のアプリ探しにもピッタリだと思います!

内容の不備やご意見・ご感想はxxmiz0rexx@gmail.comまで。
サイトについて詳しくは「このサイトについて」を御覧ください。

--Author

xxmiz0rexx

@xxmiz0rexx( Google+)
ウェビメモというWEB関連のブログをやっています。

WEBクリエイターとしてお仕事を請け負っていますが、 最近アプリデザインのお仕事もしています。個人PJでFeedDropというニュースフィードアプリをリリースしました。(詳しくはこちら

336
app

Macアプリのアイコン作成方法

Posted on 2014/12/04

Yosemiteにピッタリ!Sublime Textのフラットアイコン作ってみたよ+Macアプリのアイコン変更方法|ウェビメモ はてなブックマーク - Yosemiteにピッタリ!Sublime Textのフラットアイコン作ってみたよ+Macアプリのアイコン変更方法|ウェビメモという記事を書いたのですが、せっかくなのでMacアプリのアイコンの作り方をこちらにφ(*’д’* )メモメモします。

Macのアイコンなのでサイトのコンセプトとちょっとズレますが、まぁ遠からずってことで許してぴちょ。

Macアプリのアイコンの作り方

と、いうわけで。冒頭でもご説明した通り、Sublime Textというエディタアプリのアイコンを作ってみましたので、備忘録がてら作り方をメモしていきます。

私はふぉとしょっぱーなのでPhotoshopとSlicyを使いましたが、皆さんは各自お好きなツールでどうぞ。

用意するアイコンサイズ

全部つくる必要はなさそうですが、一応サイズの一覧です。ないサイズがあってもMacが勝手にありものを拡大縮小してくれるはず。

icon_16x16 icon_16x16.png
icon_16x16@2x.png
icon_32x32 icon_32x32.png
icon_32x32@2x.png
icon_128x128 icon_128x128.png
icon_128x128@2x.png
icon_256x256 icon_256x256.png
icon_256x256@2x.png
icon_512x512 icon_512x512.png
icon_512x512@2x.png

Retinaで見た時にちゃんとウットリしたいので、個人的にicon_512x512@2x.png(1024px)は必須ですね。

手順

作り方は自由なので、とりあえずさっきのサイズ表を見ながらアイコンを用意しましょう。保存先はお好きな場所に『XXX.iconset』というフォルダを作ってその中に入れてください。(XXX部分はお好きな名前に変更してください)

フォルダ

参考までにPhotoshop+Slicyで作った時のキャプチャです。

各サイズ用意 ※クリックで拡大します。

ターミナルを操って、各サイズのPNGを合体させ、1つのアイコンファイルにする

さてPNGが揃ったら、あとはそれをアイコンファイル(.icns)にするだけです。まずはターミナルを起動してください。

ターミナルを開いたら、Finderからさっき作った『XXX.iconset』の1階層上のフォルダをドラッグ&ドロップでぶつけてやりましょう。 そのディレクトリのパスが表示されるはずです。

ターミナルにフォルダをドラッグ

一度エンターキーを押したら、あとは以下の呪文を唱えるだけ。(※XXXの部分は自分でつけた名前に変更してください)

iconutil -c icns XXX.iconset

完成!

ターミナル上だと何事もなかったように思うほどそっけない感じですが、Finderを見てみるとicnsが生まれているはずです:)

作ったアイコンをアプリに設定する方法

下記の記事で3STEPの簡単な方法をご紹介しています。読んでみてください。

PageTop

PageTop