@JUNP_Nです。iPhoneアプリ系のレビュー記事を書いているブロガーさんは、アプリのアイコン画像を利用していた人も多いかと思います。以前のiTunesでは購入したアプリのアイコンはドラッグ&ドロップで画像を保存することができていましたがiTunes11からそれもできなくなってしまったようなので僕が行なっている代替案をシェア。
用意するものはブラウザとiMageToolの2つ
現在の男子ハックはとりあえずの代替案としてこの方法でアイコン画像を用意しています。
アイコン画像を主にどこに使っているかというと、記事のアイキャッチ画像に利用しています。やっぱりアプリのアイコンが一番特徴を表していると思うので。
もっと他に良い方法がありそうなので、どなたか知っていたら教えていただけると嬉しいです。そもそも僕がやり方を知らないだけでiTunes11でできるよ！ってことなら方法を教えて下さい…。
さて今回の方法はiTunesからアイコン画像を用意するのではなく、WebのiTunesStoreのアイコンから用意する方法です。
まずはブラウザからiTunesStoreのアプリページへ行きます。僕はChromeユーザーなので説明ではChromeですが、Safariでも問題無いです。
アプリのページへ行ったら「要素の検証」を行います。Chromeだと「command + Option + I」、もしくはコンテクストメニュー（右クリックで表示されるメニュー）から要素の検証を開きます。
表示されたところからアプリのアイコン画像のURLを探してきてダブルクリック。
するとアプリのアイコン画像だけが表示されるのでそれを適当なところに保存しましょう。
iTunesStoreのWebページにあるアイコン画像は基本的に角丸になっていません。
記事内で利用した画像ではアイコンの絵柄は角丸になっていますが、背景が黒いですね。このままでは利用することができません。
というわけで、ここからは角丸にする作業に入ります。
角丸にするために僕が利用しているのはiMageToolというアプリ。無料でしかも優秀なアプリなのでオススメです。
無料で優秀な画像処理アプリ「iMage Tools」画像のリサイズ、角丸、リネーム、リフレクションなどが一発だ！ | 男子ハック
@JUNP_Nです。ブログを日常的に書いていると画像のサイズを合わせたり名前を変更したりとルールに沿った単純作業に頭を悩まされますが、このアプリがあればすべての処理を一括で行うことができちゃいますよ！
iMageToolで画像のリサイズと角丸を同時行います。
男子ハックでのアイキャッチ画像は「150px × 150px」です。先ほど保存したアイコン画像は「175px × 175px」なので少し大きいです。
そして角丸は「Curve」の設定をします。角丸にしたい角をチェックしてRadius（半径範囲）を指定します。
地味ですがRadiusの設定が重要です。
ちゃんと指定してあげないと綺麗なアイコン画像になってくれません。下記の画像では背景の黒が少しだけ残ってしまいました。
僕は22pxに指定してあります。画像のリサイズも合わせて行なっているので、僕の設定は参考程度にしていただき、皆さんも試してみてください。
丁度良い設定が決まったらiMageToolに今回の処理を保存しておくと次回以降はこの作業がドラッグ＆ドロップでSTARTボタンを押すだけなので捗りますよ！
というわkで完成した画像が以下。
背景の黒い部分も消えて綺麗なアイコン画像になりました。
今回紹介した流れを簡単にまとめると…
- ブラウザでアプリのページへ行って要素を検証
- アプリアイコン画像を適当に保存
- アイコン画像をiMageToolでリサイズ＆角丸
という感じです。
お試しください。そしてもっといい方法があったら教えて下さい。