ザリガニが見ていた...。

Cocoaアプリケーションのアイコンを設定する方法

mac

アプリケーションの開発が一区切りしたら、アイコンをデザインするセンスはないが、それでもやはり、オリジナルなアイコンを設定したくなる。試行錯誤でコードを何度も書き直したり、謎のエラーに悩んだりといった苦労が、アイコンを設定することで報われる気がする。それは、自分が書いたコードやInterface Builderの設定が、アイコンにぎゅっと凝縮されて一つの製品として完成したような気になるからかもしれない。

...ということで、minuにもアイコンを設定してみた。

作業環境

• MacBook MacOSX 10.5.3
• Xcode 3.0
• Icon Composer 2.0
  • Developerフォルダ以下に標準インストールされている。（/Developer/Applications/Utilities/Icon Composer.app）
• GIMP-2.4-rc3-intel
  • X11環境が必要（MacBookのインストールDVDからインストール可能。「/アプリケーション/ユーティリティ」フォルダにX11.appが存在していればOK。）

手順

• アイコン画像の準備
• アイコン画像に影を付ける加工（好みで）
• .icnsファイルに変換
• .icnsファイルをXcodeプロジェクトに追加
• プロパティリストInfo.plistに.icnsファイルを設定

アイコン画像の準備

• ここではとりあえず画面のスクリーンショットをとってアイコン画像としてしまった。
• 「コマンド + Shift + 4」を同時に押して、十字カーソルで撮影範囲を設定すると、「カシャッ」とシャッター音がして、デスクトップに撮影した画像が保存された。
  • ファイル名「ピクチャ 1.png」
  • 画像サイズ「240x150」

アイコン画像に影を付ける加工（好みで）

• Dockに登録されているアイコンを拡大してみると、多くのアイコンが影を持っていた。
• そうなると多くの例に倣って、自分のアイコンにも影を付けたくなる。この作業にGimpを使った。
  • Gimp.appをダブルクリックして起動。
  • 「ピクチャ 1.png」をDockのGimpアイコンにドラッグして重ねる。
  • RGBワークスペースの変換を確認されたので「Convert」ボタンを押して変換しておいた。
  • 開いたウィンドウのメニューから「フィルタ >> 光と影 >> Drop Shadow...」
  • 「オフセットX=0, オフセットY=4, ぼかし半径=5, 色=黒, 不透明度=60, 画像サイズ変更可=チェックあり」の設定で実行
  • 出来上がった影付き画像を「ファイル >> 別名で保存...」ファイル名を「minu.png」にして「Save」ボタン。
    • 「可視レイヤーの結合」を選択して「エクスポート」ボタン。
    • PNG形式の詳細設定をして「Save」ボタン。

.icnsファイルに変換

• 出来上がったminu.pngファイルをIcon Compserの256の枠にドラッグする。
• 「Import」ボタンを押して取り込む。
• 取り込んだ256の枠の画像を小さいサイズのアイコンにもドラッグして設定しておいた。（512の枠は作らなかった。）

• 以上の設定をしたら、ファイル名「minu」として保存。（.icnsという拡張子が付いて保存される。）

.icnsファイルをXcodeプロジェクトに追加

• 上記で作成した「minu.icns」ファイルをXcodeプロジェクトのResourcesフォルダにドラッグ＆ドロップした。
• シートが出てくるので、「ディスティネーショングループのフォルダに項目をコピーする」にチェックを入れて「追加」ボタンを押した。

• これでプロジェクトフォルダに「minu.icns」ファイルがコピーされ、プロジェクトに追加された。

プロパティリストInfo.plistに.icnsファイルを設定

• Xcodeで「グループとファイル」リストの「ターゲット」を展開して「minu」をダブルクリック。

• 「ターゲット"minu"の情報」ウィンドウの「プロパティ」を開く。以下の項目を設定。
  • 識別子:「com.zariganikoubou.minu」（世界に一つしかないオリジナルな名前になるように設定しておく）
  • アイコンファイル:「minu」（プロジェクトに追加したアイコンファイル名。拡張子は不要。）

• ここで設定したことは、「Resources >> Info.plist」ファイルに反映される。

以上で「ビルドして進行」ボタンを押せば、アイコン付きのアプリケーションとしてminuが起動した！

ツイートする

Permalink | コメント(2) | トラックバック(0) | 12:03