やりたいこと
Android用のアイコンの作り方の紹介となります。自作のAndoroidアプリのアイコンをお手軽に作りたい。というための内容となります。
おおまかなながれ
1. Excel で アイコンのもとになる絵を作成。※グーグル先生によると、PowerPointの方がいろいろできそうだけど、もってないので、Excelでやってます。
↓
2.ペイントでトリミング。
↓
3.透過。(web上のものを使用します。)
↓
4.Android向けの各種アイコンサイズの画像を作成。(こちらもweb上のツールを使用します。)
※PlayStore用のアイコンが不要であれば、この手順はいらないかもです。
↓
5.Android Studioに読み込む
Step1.Excelでアイコンのもとになる絵を作成
オートシェイプで四角形をつくって、文字をいれるだけで、それっぽくなります。
Step2.ペイントでトリミング
Excel上で、図を右クリックして、コピーします。※オートシェイプをいくつか重ねて作ったり、文字だけ別のシェイプにした場合はグループ化してから、コピーするとよいです。

ペイントにペーストします。
白い部分が大きかったりしたら、選択して、トリミングします。
※今回作ったアイコンではトリミングの必要はありませんでした。

背景を透過する準備として、透過させたい部分を目立つ色で塗りつぶします。
黒でぬりつぶしました。

できたファイルをpng形式で保存してください。(形式はなんでもよいかもです。)
Step3.透過
作成したpngファイルを、下記のサイトにD&Dします。http://pcrice.web.fc2.com/alpha/
サイトの指示に従って、透過させたい色をクリックし、③の画像を保存します。

Step4.Android向けの各種アイコンサイズの画像を作成
※あとで気付いたのですが、PlayStore用のアイコンが不要であれば、この手順はSkipでOkのようです。透過させたpngファイルを、下記のサイトにD&Dします。
http://makeappicon.com/
Andoroidのボタンを押して、メールアドレスを入力して、↓ボタンを押します。

そうすると、解像度別と、playstore用のアイコンがメールで送られてきます。これで完了です。

Step5.Android Studioに読み込む
res\mimapを右クリックして、New-ImageAssetを選択。
Step3で作成した画像をImag file:に設定します。
OKをおすと、解像度ごとに、読み込まれます。

0 件のコメント:
コメントを投稿