2017年3月2日木曜日

MakeAppIcon の使い方

概要

MakeAppIcon は iOS や Android のアプリ用のアイコンを作成してくれるサービスです
無料で使えます
今回は iOS を例に使い方を紹介します

環境

  • Mac OS X 10.10.5
  • Xcode 7.2.1
  • MakeAppIcon 2016/05/26 時点

まずはアクセスする

サイトにアクセスしましょう
広告が出る場合はスキップしてください
try_makeappicon_top.png

元となる画像を準備する

今回はこの画像を使用します
できれば 1024x1024 の画像を準備してください
そっちのほうが作られる画像の解像度がよくなります

アイコン用の画像を作成する

準備出来たらトーストの部分にドラッグアンドドロップするか「or click this button to upload」をクリックして画像をアップロードしてください

するとトーストの中に画像が吸い込まれ画像の作成が始まります
try_makeappicon_converting.png

自分のメールアドレスに画像を送信する

MakeAppIcon は作成したアイコンが zip ファイルになりメールに添付されます
自分のメールアドレスを入力して送信しましょう
成功すると「Your icon archive will be sent to you shortly. Thanks for using our service!」というモーダルが表示されるのでメールが届いているか確認します
try_makeappicon_input_mailaddress.png

添付ファイルをダウンロードして展開する

メールが届いたら添付の zip ファイルをダウンロードして展開してください
以下のようなファイルが含まれていることが確認できると思います
try_makeappicon_unarchive.png

今回はこの中の ios/AppIcon.appiconset 内のファイルを使います

Xcode のプロジェクトに作成できたファイルをコピーする

コピーするだけでアイコンをすべて設定することができます
これが非常に便利だなと思う点です

例えば今回の場合、展開した zip ファイルの中身がカレントの Download 配下にある場合以下のような感じでコピーすれば OK です

  • cp /path/to/Downloads/Emacs_512/ios/AppIcon.appiconset/* /path/to/xcode-workspace/TodoApp/TodoApp/Assets.xcassets/AppIcon.appiconset/

上記の場合は MakeAppIcon からダウンロードして展開したディレクトリ名が「Emacs_512」でその配下の AppIcon.appiconset にあるすべてのファイルを TodoApp という Xcode プロジェクトの AppIcon.appiconset にコピーしています
要するに「AppIcon.appiconset」配下にできたやつをコピーすれば OK です

AppIcon.appiconset 配下には各種作成されたアイコンの png 画像と Contents.json という設定ファイルが配置されていると思います

アイコンが設定されているか確認する

Xcode で確認してみましょう
Xcode の左メニューにある Assets.xcassets を選択して AppIcon という項目を選択してみてください
すると以下のような感じで全部のアイコンがちゃんと設定されていると思います
try_makeappicon_result.png

最後に

紹介は以上です
Android でも同様な感じでアイコンを設定できます
iPhone6plus など新しいデバイスが出たときも結構早く対応してくれたので、そこも嬉しいポイントです
一回使うともう手放せないサービスかなと思います

0 件のコメント:

コメントを投稿