初心者向け、フリーツールを使ったAndroidアイコンの作り方

アイコン自作してみたいな、なんて思ってもPhotoshopなどのソフトって高価なんですよね。でも画像編集ソフトを持っていなくても、ブラウザ上でAndroid用アイコンって作れちゃうんです。

例えば

これは実際に、Photoshop等のソフトを使わずに、フリーツールで作成したアイコンを自分のAndroidに設定してみたキャプチャです。壁紙は、こちらのサイトからDLさせて頂いたものです。

• Android専用壁紙サイト | Android Wallpaper -無料スマホ壁紙(待受)-

ではこのようなアイコンを一緒につくってみましょうー！

作成に入る前に

PNG形式で

Androidアイコンは.pngという拡張子の画像がおすすめです。.jpgや.gifでも設定は出来ると思うのですが、背景を透明にしたり、綺麗なグラデーションで保存できたりしてアイコンとして一番最適な形式だと思います。もしお使いのPCが拡張子が表示されない設定ならば、出しておいたほうが分かりやすいです。

端末によって適正サイズが異なる

Androidは画面解像度が本当にいろいろです。もちろん自分の端末に合っていないものでも、縮小拡大して表示してくれるのでこだわらなければどうでも良いのですが、自分の端末に合った大きさで作成するとドットがとても綺麗に表示されます。

• ldpi 36×36px
• mdpi 48×48px
• hdpi 72×72px
• xhdpi 96×96px
• xxhdpi 144×144px

ざっくりこんな感じに分けられるみたい（でも他にもあるそうです）。

私が使っているスマホ（Docomo Xperia A）はxhdpiで、現在（2013年11月）ユーザーが一番多い解像度と思われます。ちょっと前の端末ならhdpi、新しいフルHDの端末などはxxhdpiに分類されるらしいので、綺麗な仕上がりにこだわりたい方はメーカーのHPなどでご自分の端末の解像度を調べてみてください。

では、ここからは私が使っているサイズの96×96pxで説明していきます。他の大きさの場合はそこを読み換えてください。

使うツール

高機能オンライン画像編集エディタ

• Photo editor online

こちらのツール。すっっごいんです。フリーなのにPhotoshopにかなり近いことまで出来ます。（PCからアクセスしてください。）

アイコン素材

• ウェブでも紙でもOK！汎用性に優れた1400種類のシンプルなアイコン素材（コリス限定）

今回の記事では、こちらのアイコンを使用させて頂きました。バリエーション豊富ですごく使いやすいものばかりで、非常におすすめです。

作成の例

フォーマットを作っておく

丸とか、角丸とかそういう形で統一したい場合は、まずここから。

まずはPhoto editor onlineを開いて、新しい画像を作成します。

名前はなんでもいいです。作りたい画像の大きさを指定して、「透明」にチェック。

左にある縦長のバーの「描画ツール」を選択。上部に設定が現れるので、丸か角丸か（四角でも良いです）選びます。ボーダーは0にしておきます。

ドラッグして離すと円が出来ます。一般的なソフトだとShiftを押しながらだと正円になるのですが、そういった機能はない様子…！しょうがないので、図の2点のように狙うと正円っぽく…なる…！

どなたか正円の描き方ご存知でしたら教えてください！((└(:3」┌)┘))

「レイヤー」→「重複レイヤー」で、描いた丸をコピー。

「編集」→「自由変形」で四つ角のひとつを持って、内側へすこーしだけドラッグ（shiftを押しながらだと縦横比固定されます）して、Enterで確定。すると一回り小さな丸になります。丸の大きさはお好みで調節してください。

「編集」→「Select Pixels」で、小さいほうの丸の選択範囲が作成されます。

ここで、小さい丸を非表示にして大きい丸のレイヤーをアクティブにしておきます。

「編集」→「カット」（もしくはCtr+X）すると、大きな丸から小さな丸の範囲が切り取られ、丸の枠が出来ます。（さっきの縮小した大きさによって枠の太さが変わります）

「ファイル」→「保存」を選択して、

PNG形式を選択して自分のPCに保存しておきます。

フォーマットとアイコンを合わせる

今度は、画像を開きます。例として、先ほどのリンクからDLしたアイコンの中から先の細いものを選択します。

例としてこちらの電話の画像を使わせて頂きます。

このままでは大きいので「画像」→「画像サイズ」で自分の作成したいサイズにします。縦横比は固定しておいたほうが綺麗です。

小さくなりました。ウィンドウが大きいままなので、気になる方は右下部分をドラッグすると小さくなります。

「レイヤー」→「画像をレイヤーとして開く」から、さっきつくったフォーマットを選択すると、新しいレイヤーとして読み込まれます。

真ん中になるように移動させたり、必要ならば「編集」→「自由変形」で大きさを微調整しましょう。

「レイヤー」→「表示部を結合」で、丸と中身のレイヤーをひとつにしておきます。

壁紙の色を想定する

壁紙によって見え方が変わってくるので、似たような色の背景レイヤーを作ってシミュレーションをします。2個め以降など、色が決まっている場合はこの工程は不要です。

レイヤーウィンドウ右下の図の赤丸部分を押すと新規レイヤーが作成されます。レイヤー名をダブルクリックで名前も変えられます。

レイヤーは、ドラッグすることで順番を入れ替えられます。

背景色を決めます。ツールバー下の赤丸部分をダブルクリックすると色を選べるので、好きな色にします。ここでは、濃い目の青っぽい壁紙を使うことを想定して、近そうな色にしておきます。

背景レイヤーをアクティブにしたまま、バケツツールを選択して画像上でクリック。指定色で塗りつぶされます。

アイコン部分を好きな色にして、保存

アイコン画像のレイヤーをアクティブにして、「編集」→「Select Pixels」で選択範囲を作成。

今度はアイコン部分を塗る色を指定して、新規レイヤーを作成してそちらに塗りつぶしを行います。同じレイヤーに塗ってしまうと、黒い部分が微妙に残ってしまって綺麗になりません。黒のレイヤーは非表示にしてしまいましょう。

「編集」→「全ての選択を取り消す」（もしくはCtr+D）で選択範囲を解除。

こんな感じになりました。ここで色が気に入らない場合は「調整」→「色調と彩度」から変えることができます。

背景は不要なので非表示にしてから、PNG形式で保存します。これで、できあがりです！クラウドやSDカード経由などでスマホに移して、アイコンとして設定してやれば使えます。

レイヤースタイルでもうひと手間

細いラインのアイコン

壁紙がグラデーションものだったりする場合、アイコンはシンプルなほうが映えるということもありますが、シンプルな壁紙ならこんなのもいいかも。

「レイヤー」→「レイヤースタイル」から

「アウターグロー」にチェックを入れてみます。ちょっとぼんやりしてお洒落な感じになりますね。光の大きさや色も変えられます。

太いラインのアイコン

例えば、今までの手順を参考にこんな色合いのアイコンを作ったとして。

ドロップシャドウと内側シャドウをこんな設定にすると、ちょっと浮き上がった感じになります。

逆にしてみると、へこんだ感じにも。各パラメーターはお好みでどうぞ。

素材を使ってボタン風に

• フリーテクスチャ素材館

こちらのサイトから素材を使わせて頂いて、ちょっと違った感じのものも作ってみます。

使いたい画像を開いて、切り抜きツールで、このへん使いたいなーっていうところをドラッグ。できるだけ正方形っぽく選択します。

Enterを押すと選択部分だけ切り抜かれます。

「画像」→「画像サイズ」から任意の大きさにサイズ変更。さっきの切り抜きがフリーハンドなので、ここでは縦横比固定のチェックを外しておいたほうが良いと思います。

元画像が大きいと、切り抜いた後も表示が小さいままなこともあるので、ナビゲーターを100%にすると実際の大きさになります。

この時点では、レイヤーがロックされているので鍵のマークをダブルクリックすると、ロック解除できます。

一度素材レイヤーを非表示にして、新規レイヤーに角丸を作ります。前述で正円をつくったときのように、格子部分をうまく狙うと真四角っぽくなります。それを「編集」→「Select Pixels」。

「編集」→「選択部分の階調を反転する」で、選択範囲を反転。

レイヤーの非表示を入れ替えて、素材レイヤーをアクティブに。

「編集」→「カット」（もしくはCtr+X）

先ほど紹介したように、ちょっと浮き上がって見えるようにシャドウをつけて、これをフォーマットとして保存。

今までの流れを参考に、任意の画像を素材の上に重ねて好きな色で塗りつぶし。これに「フィルター」→「拡散」をかけてみます。

ちょっとざっくりしました。こんなことも出来ますということで。

おすすめ素材

• iconmonstr – Free simple icons for your next project
• Icons DB – free custom icons
• 9search | イラストやWeb制作に使える無料素材を紹介
• アイコン アーカイブ – PhotoshopVIP
• 無料ダウンロード可能なハイクオリティアイコン総まとめ2013年版*ホームページを作る人のネタ帳
• ガーリーデザインに使える！可愛い商用可フリー素材・素材サイトまとめ ｜ Kana-Lier　カナリエ

フリー素材は探せばたくさんあると思います。お使いの際は利用規約をご確認の上でどうぞ！