Android用アイコンの作成方法

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

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

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ピクセルにしました。

レイヤースタイルの設定

出来上がり！

出来上がったアイコン

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

AndroidのWidget用イメージの作成

AndroidアプリでWidgetを作成してみました。背景のpngファイルを作ろうとしたら以下のページを見つけました。

Widget Design Guidelines

http://developer.android.com/guide/practices/ui_guidelines/widget_design.html

UIデザインのガイドラインの中にWidgetに関する記述があり、そのページからPhotoshop用ファイルがダウンロードできます。ガイドラインによるとWidgetの大きさもいくつか規則があるみたいです。縦画面では

320×100ピクセル

240×300ピクセル

160×200ピクセル

とあります。携帯電話なので画面の解像度が低いものが多いですからね。そういえば、Widgetを追加しようとして、画面にスペースがありません。って起こられたことがあります。今後、Android端末でWidget同士でスペース争いが起こりそうです。小さいほうが有利かもしれません。

AndroidのUI Guidlineはアイコン用テンプレートファイルもダウンロードできて便利です。そういえばXP用アイコンのガイドラインもありましたね。

Creating Windows XP Icons

http://msdn.microsoft.com/en-us/library/ms997636.aspx

マスクの紐を直す方法

子供（２歳）がマスクの紐を切ってしまいました。

「パパなおして」と言われ、さてどうしたものか。

紐が切れたマスク

 

切れた紐とにらめっこしていたら、「おっ！」という発見が！

マスクの端

 

マスクの修理完成

穴に紐を通して結びなおせば、出来上がり。穴が小さかったので穴あけを使いました。

穴が開いていないときは穴あけを使うといいかもしれません。

紐の長さが調整できて便利になりました。小さい子供にも使えて優れものです。