2011年5月20日 のアーカイブ

Android用アイコンの作成方法

自分でAndroidアプリを作ってZiioにインストールすると、アイコンに統一感がないなと感じました。Windows用に昔作ったアイコンを使いまわしたのが良くないのですね。Android UIガイドラインを参考にして自分で作ってみました。そのときの作り方を紹介します。

アイコンの大きさは、ldpiが36×36ピクセル、mdpiが48×48ピクセル、hdpiが72×72ピクセルです。はじめにドロー系ソフトでアイコンの元絵を作ります。次にペイント系ソフトで効果を付けます。私はInkscapeとPhotoshop Elementsを使いました。練習で子供のアイドルのアイコンを作りました。

Inkscapeでアイコンを作成

Inkscapeでアイコンを作成

 Inkscapeのドキュメントは72×72ピクセルで作りました。Androidのガイドラインに従って線の色をグレー#404040、オレンジ#FF6600、赤#CC0000にしました。この画像をPNG形式で保存します。サイズは72×72,48×48,36×36にします。後でAndroidのプロジェクトにインポートしやすいように、ldpi、mdpi、hdpiフォルダを作って各サイズのPNGファイルを保存します。私は保存するときにlc_**_72.pngなどと名前を付けてしまい、プロジェクトにインポートするときに各サイズとも同じ名前にしなければならないことに気がつきました。ガイドラインをよく読んでみると「解像度ごとにフォルダ分けをすると便利だよ」とちゃんと書いてありました。

さて、ガイドラインによると効果は「トップライト」と「ドロップシャドー」、「テクスチャ」を付けるとあります。「テクスチャ」の効果が良くわからなかったので今回はつけませんでした。Photoshop Elementsで「トップライト」と「ドロップシャドー」をつける方法を説明します。「レイヤースタイル」で「ドロップシャドー」を選択します。後から影の位置と大きさを変更します。

トップライトの効果はPhotoshop Elementsの「フィルター」メニュー「描画」→「照明効果…」をクリックします。光源タイプを「スポットライト」にして光源を調整します。

トップライト効果を付ける

トップライト効果を付ける

ドロップシャドーの効果は照明角度を90度、シャドー距離を1ピクセルにしました。

how_to_icon_02

レイヤースタイルの設定

レイヤースタイルの設定

出来上がり!

出来上がったアイコン
出来上がったアイコン

アイコンはたくさん必要なので簡単に作れるほうが良いですよね。初期のAndroid のアイコンガイドラインはつくるのに苦労しそうな感じでした。ここの角度が何度だとか立体的なアイコンでしたが、新しいガイドラインはシンプルで作りやすくなっています。

2011年5月20日 at 4:41 PM コメントする


カレンダー

2011年5月
« 12月    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

月別アーカイブ

カテゴリー別アーカイブ


フォロー

Get every new post delivered to your Inbox.