2011年8月9日火曜日

GIMPでAndoroidダッシュボード向けアイコンにチャレンジ

 
最近は新しいアプリをつくろうとちょいちょい開発進めてます。内容は以前作成したアプリとコンセプトは似ているんですが、若干違う方向で、そちらについてはそのうち公開しようとおもってます、、、。その流れで。

※ちなみに最終的に↑こんなアイコンを作成します。

なぜアイコンを作るのか

タイトルの話の前に、なぜダッシュボード向けのアイコンを作成するのかというあたりから。(前段がちょっと長いので、さっさとGIMPの使い方教えろよってひとは後半あたりまでずーっと飛んでください^^)
きっかけは以前作成したアプリ(automaton)が公開一ヶ月弱で40DLと大惨敗なのを踏まえて、何がいけなかったんだろうとなりました。これはもうぱっと見の見た目がいけてないってことですよね。インストール後に消されるならまだしも、インストールされないのはもはや見た目の問題でしょう。
じゃぁどういう見た目にしたらいいんだろうってことですが、ここはやはりGoogle I/O 2011公式Androidアプリの「iosched」を参考にしましょうとなりました。
↓これですこれ。
ios1
わかりやすいですよね。
あと、先日早稲田で行われたAndroid Bazaar and Conference 2011 Summer向けに@yamzmさんが作成したアプリの画像が下の画像。
yamzm1
わかりやすいですよね2。
よーし、こんなアプリにしたらいいんだなーってことで、まずは「iosched」をDLしてみました。
参考→ioschedのソースコードをダウンロードする ネタ帳 A.B.C
率直な感想としては、うん、ぜんぜんわからん!です。なんかスマートフォンとタブレット向けにいろいろつめこんでるなーって感じで、分けて作ったほうがいいんじゃないかなって思いました。
でもメニューアイコンだけは作ったほうがいいよねってことでようやくアイコンの話です。

まずはアイコンの構成を考える

「iosched」と@yanzmさんアプリの画像を見てみます。
ios1 yamzm1
はい、ちょっとシャレオツすぎて手が出ません。どうしよう!
構成としては以下の感じかなーって思います。
  1. 機能の特徴を形と色使いであらわす
  2. そのデザインを白枠で縁取る
  3. さらに影をつける
2と3は簡単そうですね。1はどうでしょうか。
色使いはともかく、形はやっぱりデザイナー△みたいな気持ちでいっぱいです。
そこでちょっと考えたのですが、最近よく使ってるソフトで特徴的なアイコンなかったかなーと。
あっ!そういえばってことでこれです。
image
※画像はtorneのサイトから拝借しました。
image
ボタン形状の上に、白抜きで簡単な絵を書くぐらいならいけそうですね。
じゃぁ、これを参考に画像つくってみましょう。

GIMPでアイコンを作成(作業ベース)

ようやく本題です。(テレっ
あ、ちなみに、本記事作成の前に、以下を参考にしていますので、先にこちらを読んでから作業するとわかりやすいと思います。
Androidのランチャーアイコンを作る プログラミング雑記
では、まずGIMPを起動します。(GIMPはこの辺で取ってきてください。→http://www.gimp.org/
起動したらまず画像サイズを決めます。
さきほどあきらめたと書いた「iosched」のソースの中に、アイコンの画像があるので参考にしてみよう。
home_btn_schedule_default
縦96ピクセル、横144ピクセルですね。これでつくりましょう。
(プログラミング雑記の記事に、8の倍数で作らないと圧縮時にアスペクト比がってあるのですが、上記はちょうど8の倍数ですね。意図してるのかな?)
メニューからファイル→新しい画像で以下のとおり作成。
image
次に、グリッドの設定したあと、グリッドの表示、グリッドにスナップをチェックします。
image
グリッドは4px毎にしておきます。
そうするとこうなります。
image
みずらいので左下の表示率を拡大しておきましょう。→400か800%
image
次に、レイヤー設定をいじります。
image image
上記画像の背景を右クリックして表示したメニューでアルファチャンネルの追加をしましょう。
これで透明指定が可能になります。
その状態で、Deleteキーを押下します。
そうすると、画像の表示が以下のように灰色のチェック柄になります。
image
これはどういうことかというと、全体が透明色状態になってます。
これで、準備ができましたので最初の仕事ができます。

GIMPでアイコンを作成(背景パーツ)

アイコンの作成って通常は
メインパーツ→背景パーツ→縁取り→影
の順で作成するとおもいますが、今回メインパーツの作成が主に技術的なアレでできないので背景から作ります。
image
短径の選択ツールをチェックして、以下のように大体で選択します。
後のことを考えて、縦横方向に1枠分、下方向だけ2枠分ぐらい意識的にあけておきます。
image
メニュー→選択→角を丸めるで、以下の画面から20を選んで決定。
image image
そうすると、右の画像のように角が丸くなります。
背景を描画色で塗りつぶすので、描画色を設定しましょう。ツールボックスから黒い部分を選択してあげます。
image
HSV指定がよくわからないので、HTML表記で適当なベース色を設定しましょう。
最終的な目的の背景より若干濃い目にしておきます。
image
選択→編集→描画色で塗りつぶすを実行します。
image
結果こうなります。
このままだと単色すぎてアレなのでグラデーションをつけます。
ブレンドツールを選択して、 グラデーションを描画色から透明を選びます。
image image
不透明度は好みで設定してください。(50%~100%くらい?)
グラデーションで塗る描画色を設定します。
元の色より若干明るめ、色味を少しだけ変えます。
image
選択範囲の左上端から右下端までドラッグします。

image
こんな感じです。
image
次に、縁取りを行うため、レイヤーを追加します。
レイヤーツールからレイヤーを追加します。
image image
追加したら、背景レイヤーの後ろへになるよう新規レイヤー項目をドラッグで背景レイヤーの下に移動します。
(ウィンドウ真ん中にある矢印ボタンでもいいです。)
縁取りを行うため、一回り大きい選択範囲を作成します。
大体、2pxぐらい大きめにしましょう。
※8/10追記
当初、メニューの「選択範囲を拡大で一回り大きなサイズの選択範囲を作成したのですが、
角の丸みがうまく表現されないので、短径→丸み設定に記載を変更しました。

そのまま新規レイヤー上で先ほどとおなじように描画色をFFFFFF、塗りつぶしを行います。


やった結果がこんなかんじですね。



これで大体下地ができました。


感単に絵を描こう

次は、torneアイコンっぽく白い絵ををいれていきます。
まず、レイヤーを追加。こんどは背景の上におきます。
image

ツールボックスから鉛筆ブラシ、Circle(3)あたりを選びましょう。
image
ここからようやく、個人のデザイン能力が若干反映されます。
なにを書こうかな~ってことなんですが、ツイッターアイコンにありがちな噴出しをつくってみましょう。
image
単純にドラッグ、点描画の繰り返しでもいいのですが、直線引きたいですよね。
GIMPの直線は開始地点をいったんクリックして離してからShiftキー押下しつつドラッグして終点を置くと直線が引けます。
円を書きたいときは、円形の選択ツールをつかって塗りつぶし→小さい円形で真ん中を削除とかですかね。
このあたりは、別の画像編集ツールで作成した結果を流し込むほうが楽かもしれません。
でもここではあまりかんがえず直線と少しだけ編集でやります。
image
こんな感じになりました。
まだいまいちのような。
ちょっと選択領域を設定してDeleteキーで削除とか、あと顔アイコンぽくしてみます。
あと消しゴムツールなんかもつかえますね。
調整した結果こんな感じになりました。

簡単に作った割にはまぁまぁいいんじゃないでしょうか?
あ、そういえばわすれてましたが影もつくらないとですね。

縁取りと同じラインの選択範囲を作成し、右に1px、下に2px移動しましょう。

移動ツールを選択して、移動対象を選択範囲にします。


 image




さっきつくった選択範囲を右に1px、下に2px移動します。



あとは影の塗りこみです。
新規レイヤーを追加して、適当なグレーを塗りましょう。



お?良い感じでしょうか?
あとはこのファイルをGIMP形式の噴出し.xcfとしてまず保存します。(あとで利用するため。)
そのあと、ファイル形式をPNGの圧縮レベル9あたりで出力します。(名前をつけて保存から拡張子PNG選択。)
結果できたのがコレ。

 
シャレオツなアイコンと並べてみましょう!
home_btn_schedule_default  
むむ。ぎりぎり及第点までいけてないですか?だめですか?
でもブログ書きながらなのですごい時間かかっちゃいましたが、
実際やったら15分かかってないんじゃないでしょうか。
慣れたらもう少しこったものがつくれそうです。
長くなっちゃいましたが、これからダッシュボードアイコンつくるなら最低このぐらいのアイコンつくっていかないとだめそうだなーって記事なのでした。
あ、ちなみにボタン押下時のことを忘れてましたね。
さっきつくったPNGアイコンファイルをGIMPで開いて、メニューから色→明るさコントラストを選び、-80ぐらいにしてみましょう。
image
これをボタンプレス時の背景にすればいいのじゃないでしょうか。



select時のアイコンもつくりましょうか。
さっき作成しておいたxcfファイルを再度ひらいて、しろの縁取り部分だけ、コントラストを-50あたりで設定します。


色をかえてみたり。


ちなみに、
「iosched」はプレス時に全体グレー、セレクト時に縁取りだけグレーでしたが、
@yanzmさんのアプリはプレス時にホーム画面ぽくアイコンの周りを別の色で背景表示になってました。
yamzm1yamzm2
こんなかんじで。
生画像かもしれませんが、コードで選択時の背景を変えてるのかもしれません。
こっちのほうが明るい感じでシャレオツだなーって思いました。(やり方わかりませんが。

おまけ

一回つくったレイヤー付きのXCFファイルを再利用できます。
たとえば、背景レイヤーを選択してメニューから色→色彩、彩度を選択。
彩度をいろいろ変えると、こんな感じでさくっと変更できます。




もちろん一番上の画像を編集すれば別の意味のアイコンも作れますね。
なんて楽チンなんだー。
といったところでこの記事は終わりです。
これで次回のアプリは50DL突破をねらってみます!
でも、ここまで読んだ人はどんどんDLしてくれたら良いと思います!

0 件のコメント:

コメントを投稿