iOSアプリ開発 XCode5

iOS7のアプリアイコン作成手順まとめ

iOS7に対応したアプリのアイコン作成手順をまとめました。

Xcode 4 完全攻略 posted with カエレバ STUDIO SHIN ソフトバンククリエイティブ 2012-03-29 Amazon楽天市場Yahooショッピング

0.必要なもの

  • WindowsまたはOSX(ここではMountain Lion 10.8.4をベースに解説します)
  • Photoshop CS3以上

1.準備

テンプレートのダウンロード

http://appicontemplate.com/ios7にアクセスしてappicontemplate_v3.2.zipをダウンロードしてください。
icon01

ダウンロードが完了したらファイルを解凍してApp Icon Template [3.2]というフォルダを開きます。

中身は以下のようになっているはずです。

icon02

Photoshopの設定

App Icon Template [3.2].psdをクリックしてください。

icon03

Photoshopが起動すると、下記のような画面になります。

icon04

メニュー>ウィンドウ>アクションを選択して、アクションウィンドウを表示します。

icon05

アクションウィンドウの初期状態は下記のようになっています。

icon06

この状態でFinderに戻り、App Icon Template[3.2].atnをクリックしてください。

icon07

アクションのメニューに「App Icon Template [3.2]」という項目が追加されます。

icon08

以上でPhotoshopの準備ができました。

2.アイコンの作成

レイヤーウィンドウから「Edit me and save」を探して、右クリックして「コンテンツを編集」を選択してください。

icon09

下記のようなダイアログが表示されますが、OKをクリックします。

icon10

そうするとアイコン編集画面のタブが開きます。

icon11

レイヤーを利用するなどしてアイコンを作成してください。

icon12

作業が終わったら「保存」して、下記のように「App Icon Template[3.2].psd」のタブに切り替えます。

icno13

すると、下記のように先ほど作成したアイコンが反映されているはずです。

icon14

アイコンの書き出し

作成したアイコンを書き出すには以下のようにします。

アクションウィンドウから、先ほど追加した「App Icon Template[3.2]」の「Icon Export [squared]」か「Icon Export [Rounded]」を選択して、再生ボタンをクリックします。

icon014

Squaredで作成したアイコン

AppIcon76x76@2x

Roundedで作成したアイコン

Xcode 4 完全攻略 posted with カエレバ STUDIO SHIN ソフトバンククリエイティブ 2012-03-29 Amazon楽天市場Yahooショッピング

  • この記事を書いた人

たけぞう

熊谷に住みながら都内のIT企業でエンジニアをしています。ガジェットやアウトドア用品についてレビューをしていきます。 趣味はスポーツジムでトレーニングやジョギングをすることです。

-iOSアプリ開発, XCode5
-, , ,