iOS7に対応したアプリのアイコン作成手順をまとめました。
![](http://ecx.images-amazon.com/images/I/417HvnTcpbL._SL160_.jpg)
Xcode 4 完全攻略 posted with カエレバ STUDIO SHIN ソフトバンククリエイティブ 2012-03-29 Amazon楽天市場Yahooショッピング
0.必要なもの
- WindowsまたはOSX(ここではMountain Lion 10.8.4をベースに解説します)
- Photoshop CS3以上
1.準備
テンプレートのダウンロード
![icon01](https://blog.takezou.com/wp-content/uploads/2013/08/icon01.jpeg)
ダウンロードが完了したらファイルを解凍してApp Icon Template [3.2]というフォルダを開きます。
中身は以下のようになっているはずです。
![icon02](https://blog.takezou.com/wp-content/uploads/2013/08/icon02.jpeg)
Photoshopの設定
App Icon Template [3.2].psdをクリックしてください。
![icon03](https://blog.takezou.com/wp-content/uploads/2013/08/icon03.jpeg)
Photoshopが起動すると、下記のような画面になります。
![icon04](https://blog.takezou.com/wp-content/uploads/2013/08/icon04.jpeg)
メニュー>ウィンドウ>アクションを選択して、アクションウィンドウを表示します。
![icon05](https://blog.takezou.com/wp-content/uploads/2013/08/icon05.jpeg)
アクションウィンドウの初期状態は下記のようになっています。
![icon06](https://blog.takezou.com/wp-content/uploads/2013/08/icon06.jpeg)
この状態でFinderに戻り、App Icon Template[3.2].atnをクリックしてください。
![icon07](https://blog.takezou.com/wp-content/uploads/2013/08/icon07.jpeg)
アクションのメニューに「App Icon Template [3.2]」という項目が追加されます。
![icon08](https://blog.takezou.com/wp-content/uploads/2013/08/icon08.jpeg)
以上でPhotoshopの準備ができました。
2.アイコンの作成
レイヤーウィンドウから「Edit me and save」を探して、右クリックして「コンテンツを編集」を選択してください。
![icon09](https://blog.takezou.com/wp-content/uploads/2013/08/icon09.jpeg)
下記のようなダイアログが表示されますが、OKをクリックします。
![icon10](https://blog.takezou.com/wp-content/uploads/2013/08/icon10.jpeg)
そうするとアイコン編集画面のタブが開きます。
![icon11](https://blog.takezou.com/wp-content/uploads/2013/08/icon11.jpeg)
レイヤーを利用するなどしてアイコンを作成してください。
![icon12](https://blog.takezou.com/wp-content/uploads/2013/08/icon12.jpeg)
作業が終わったら「保存」して、下記のように「App Icon Template[3.2].psd」のタブに切り替えます。
![icno13](https://blog.takezou.com/wp-content/uploads/2013/08/icno13.jpeg)
すると、下記のように先ほど作成したアイコンが反映されているはずです。
![icon14](https://blog.takezou.com/wp-content/uploads/2013/08/icon14.jpeg)
アイコンの書き出し
作成したアイコンを書き出すには以下のようにします。
アクションウィンドウから、先ほど追加した「App Icon Template[3.2]」の「Icon Export [squared]」か「Icon Export [Rounded]」を選択して、再生ボタンをクリックします。
![icon014](https://blog.takezou.com/wp-content/uploads/2013/08/icon014.jpeg)
Squaredで作成したアイコン
![AppIcon76x76@2x](https://blog.takezou.com/wp-content/uploads/2013/08/820ba9f96f5fc1572a4feb8195c8ab49.png)
Roundedで作成したアイコン
![](http://ecx.images-amazon.com/images/I/417HvnTcpbL._SL160_.jpg)
Xcode 4 完全攻略 posted with カエレバ STUDIO SHIN ソフトバンククリエイティブ 2012-03-29 Amazon楽天市場Yahooショッピング