たけぞうBLOG

iOS,XCode,Cameraなど

iOS7 iOSアプリ開発 XCode5

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

投稿日:8月 25, 2013 更新日:

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

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で作成したアイコン

\"AppIcon76x76@2x\"

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

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[iOS]デザインパターン集

RayWenderlichで\”iOS Design Patterns\”という記事に、iOSアプリ開発で頻出のデザインパターンをわかりやすく説明しています。

ロングブレス太郎 サポートページ

期間限定セール中! 85円→無料! ロングブレスをサポートするためのアプリです。

[XCode6]PaintCodeを使ってXCode6にカスタムUIViewを表示する

やること PaintCodeで作成したビューをXcode6のカスタムUIViewとして表示します。

Xcode4の環境設定

複数ファイルをタブ表示にする 環境設定のGeneral>Double Click NavigationをUses Separate Tabに変更すると、ファイルをダブルクリックしたときにタブで表 …

SwiftのiOSプロジェクトにGoogle Analytics Services SDKを設定する方法

現時点(2014/09/16)でGoogle Analytics Services SDKのSwift版はリリースされていませんが、これから説明する手順で動作確認できたので共有します。

プロフィール


1972年神奈川県生まれ。ソフトウェアエンジニアとして生きています。最近はクライアントアプリからサーバーサイドまで幅広くやってます。