macOS Big Sur向けのiPhone風なアプリアイコンの作り方を説明します Adobe Photoshop編
“macOS Big Sur“のアプリアイコンは、iPhone風な角丸アイコンになりました。
アップルの”Human Interface Guidelines”には、
「IMPORTANT
When you update your app for macOS 11, use your new app icon design to replace the icon you designed for earlier versions. You can’t include two different app icons for one app, and the macOS 11 app icon style looks fine on a Mac running Catalina or earlier.」
と明記されているので、いずれはアプリを申請する際のレビューの一項目に加わるんだと思います。
実は、iPhoneアプリと異なり、現状ではmacOSアプリをアップストアにアップロードしても、自動的には角丸アイコンに変更してくれませんので、開発者自身で新しいスタイルのアイコンを作る必要があります。ネット上では、以前からその方法を解説するサイトがいくつかあるのですが、どれも肝心なポイントには触れていないので、その通りに作業しても綺麗な角丸アイコンを作成できません。そんなわけで、POOHが個人的に試行錯誤をしつつ、この方法なら間違いなく角丸アイコンを作れる、という手順が分かったので、今回のTALKで紹介しようと思います。
なお、素材になるアイコン作りの部分は従来の方法と変わらないので、今回のTALKでは、素材のアイコンを作成した前提で解説します。
< アプリアイコン作成用テンプレートを準備します >
アプリストアにアプリを登録している開発者であれば、アップルの開発者サイトにアクセスできるはずですので、”Design”タブ画面の”Human Interface Guidelines”欄にある”View Design Resources”ページを表示して下さい。下図のように、macOS向けのデザインリリースが公開されているのでダウンロードして下さい。デザインリリースには、”Adobe Photoshop”、”Sketch”、”Adobe XD”用が用意されているので、今回は”Adobe Photoshop”用のデザインリソースを使います。
ダウンロードしたアーカイブを開き、”Template – Icon – App – P3.psd”というファイルを手元に保存して下さい。このファイルがアプリアイコン作成用のテンプレートです。
< PhotoshopでBig Sur向けのアイコンを生成します >
“Template – Icon – App – P3.psd”を”Adobe Photoshop”で開いて下さい。
続いて、”ファイル”メニューの”生成”項目にある”画像アセット”項目を有効にして下さい。この項目を有効にすると、テンプレートで生成したアイコンイメージが自動的にディスク上に保存されます。
アイコンを生成する作業では、画面右下にあるレイアー欄を使用します。ここに、10種類のサイズ別のグループが登録されています。作業の過程で、サイズ別にひとつずつグループを開いてアイコンを登録していきます。
作例として、一番大きなアイコンサイズの登録作業を順に説明します。
“Icon-MacOS-512×512@2x.png”グループを開いて、上のペインにある正方形の部分をダブルクリックします。
中央部分の白い四角に既に作成済みの素材アイコンのpngファイルをドラッグ・アンド・ドロップするわけですが、ここで一番重要なポイントがあります。
“Mask”部分をドリルダウンしていくと、”Place Icon Here”の横に画像のピクセルサイズが表示されています。実は、このピクセルサイズに合った素材アイコンのpngファイルをドラッグ・アンド・ドロップしないと、ピッタリのサイズでアイコンを生成できません。ネット上の解説サイトの多くが、この重要なポイントに触れていないので注意して下さい。
更に、ドラッグ・アンド・ドロップした後、マウス操作で”Place Icon Here”の下側にpngファイルの画像が収まるようにして下さい。そうしないと、期待通りにマスクが効きません。
作業を終えたら、画面上側にある閉じるアイコンをクリックして保存して下さい。
この作業を、アイコンサイズ毎に繰り返し行います。
こちらが完成イメージです。
“Template – Icon – App – P3.psd”と同じ階層にあるフォルダ内に、生成したアイコンが自動的に保存されています。
※ 今回はベータ版のテンプレートを使用したのですが、32×32サイズのアイコンが34×34サイズになってしまっています。正式版がリリースになる時には修正されていると思いますが、念の為、お伝えしておきます。
生成し終えたアイコン画像を、XcodeのAssetsに登録すればすべての作業が完了になります。
ホームページ “THE POOH FILES”にも是非お立ち寄り下さい。
“Adobe Stock“でベストショットな写真素材を販売中です。是非ご覧下さい。
