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

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


例えば

例

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

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

作成に入る前に

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などでご自分の端末の解像度を調べてみてください。

以前書いた記事で、各解像度を見分けるためのサンプルアイコンがDLできます。また、Androidへのアイコンの設定方法なども合わせてご参照ください。

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

使うツール

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

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

アイコン素材

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

作成の例

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

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

スタート画面

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

画像設定

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

描画ツール

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

円を描く

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

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

後で効果を入れたりする可能性もあるので、ちょっと余白が残るくらいの大きさにしておくと良いかもしれません。
レイヤーを複製

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

ひとまわり小さくする

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

小さい丸を選択

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

レイヤー設定

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

カット

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

保存

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

PNG形式で保存

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

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

スタート画面

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

開いたファイル

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

画像サイズを変更

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

ウィンドウを小さく

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

フォーマットを読み込む

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

微調整

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

レイヤー結合

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

壁紙の色を想定する

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

背景レイヤーを作る

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

レイヤーの移動

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

背景色の選定

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

塗りつぶす

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

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

選択範囲を作成

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

指定色で塗りつぶし

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

選択範囲の解除

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

確認

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

ただし、彩度がゼロのもの(白、黒、グレー)は明るさしか変えられませんので、ご注意を。
保存

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

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

細いラインのアイコン

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

レイヤースタイル

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

アウターグロー

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

太いラインのアイコン

例

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

浮き上がった感じ

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

へこんだ感じ

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

素材を使ってボタン風に

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

画像読み込み

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

切り抜き

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

画像サイズを変更

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

ナビゲーターを調整

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

レイヤーロックを解除

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

新規レイヤーに角丸をつくる

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

選択範囲を反転

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

素材レイヤーをアクティブ

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

カット

「編集」→「カット」(もしくはCtr+X)

レイヤースタイルを編集

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

フィルターをかける

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

完成

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

おすすめ素材

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2013/11/21
更新日:2014/02/26


コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top