Hatena::ブログ(Diary)

プログラミング雑記 このページをアンテナに追加 Twitter

2010-12-01

フリーソフトのみ使って、Android用のアイコンを作成する

| 14:57 | フリーソフトのみ使って、Android用のアイコンを作成するを含むブックマーク

以前、Androidのランチャーアイコンを作るを公開しましたが、GIMPを使ってアイコンを作る手順をもう少し簡単にするべく、今回はフリーのドローソフトInkscapeなるものを使ってみたいと思います。

InkscapeAdobeIllustratorと同程度の機能を持つドローソフトなのです。

今回は次の海外サイトを参考にしております。

http://www.connorgarvey.com/blog/?p=41

英語が読める方は、上記サイトも併読すると良いかも知れませんね。


準備

http://inkscape.org/index.php?lang=ja

  1. 上記サイトより実行ファイルをダウンロードして下さい。
  2. PCにインストールします。
  3. GIMPを持っていな方はGIMPインストールしてください。


実践

1.Inkscapeを立ち上げてください。キャンバスは640*480で作成します。

グリッドを有効にしておいたほうが良いので、メニュー → 表示 → グリッドをクリック。(グリッドが表示されます)右端のグリッドアイコンもチェック。

f:id:Korsakov:20101201021503j:image

2.多角形ツールを選択。

f:id:Korsakov:20101201021500j:image

プロパティ:多角形(一個のハンドル)、角3、スポーク比0.5、丸め0.0、ランダム0.0

3.三角形を図のように左向きに描画。Ctlrを押しながらドラッグすれば角度が決めやすいです。(線の太さなどが違っても今は気にしないでください)

f:id:Korsakov:20101201021505j:image

微調整は選択ツールで行います。(オブジェクトの拡大、縮小、移動)

f:id:Korsakov:20101201021501j:image

3.矩形を描画。

矩形ツールを選択して、図のように真ん中当たりに矩形を置きます。

先程と同じく選択ツールで微調整。

f:id:Korsakov:20101201021507j:image

4.オブジェクトのフィルとストロークを調整。

選択ツールで、二つのオブジェクトを選択。メニュー → オブジェクト → フィル/ストローク をクリック。

フィル/ストローク設定ダイアログ内で、フィルを塗りつぶし無しにします。

f:id:Korsakov:20101201021508j:image

ストロークの塗り:単一色。色はBlackを選択。

f:id:Korsakov:20101201021509j:image

ストロークのスタイルで、幅を8px、結合を丸結合。

5.オブジェクトの統合

二つのオブジェクトを選択した状態で、メニュー → パス → 統合を選択。

f:id:Korsakov:20101201021510j:image

6.矢印をグラデーションさせる

グラデーションツールを選択。

f:id:Korsakov:20101201021502j:image

グラデーションツールで矢印オブジェクトを選択すると、次のようになると思います。

f:id:Korsakov:20101201021514j:image

グラデーションツールパスを移動させて、上から下に向かってグラデーションさせます。

f:id:Korsakov:20101201021515j:image

フィル/ストローク設定ダイアログを開くと、ストロークの塗りがグラデーションになっているはずです。

グラデーションカラーを変更するため、プロパティーの複製をクリックした後、編集ボタンを押します。

f:id:Korsakov:20101201021511j:image

こちらにならって、片方の色を666b66ffに、

f:id:Korsakov:20101201021512j:image

もう片方の色をb2afb2ffにします。

f:id:Korsakov:20101201021513j:image

こんな感じになっているはず。

f:id:Korsakov:20101201021516j:image

7.矢印の内側に影をつける

作成した矢印のレイヤーを複製。

複製したレイヤーに大きめの矩形を描画します。

f:id:Korsakov:20101201021517j:image

次に、選択ツールで大きめの矩形と矢印の二つを選択。メニュー → パス → 排他をクリック。

f:id:Korsakov:20101201021518j:image

フィルカラーをBlackにします。(左下のカラーバーから選択できます。Shiftを押しながら選択した場合はストロークカラーを選択できます)

f:id:Korsakov:20101201021519j:image

フィル/ストローク設定ダイアログで、ぼかしと不透明度を調整。

f:id:Korsakov:20101201021520j:image

f:id:Korsakov:20101201021521j:image

選択ツールでぼかした領域を微調整して、影っぽくします。(ほんの少し右下に移動させるだけで、影らしく見えます)

f:id:Korsakov:20101201021456j:image

Inkscapeで出来ることはここまで。これをSVGフォーマットで保存します。

f:id:Korsakov:20101201021459j:image

8.GIMP用のレイヤーを作成

はじめの方で作成したグラデーションの矢印があったと思います。このレイヤーを複製して、他のレイヤーは非表示にします。

f:id:Korsakov:20101201021458j:image

フィルカラー、ストロークカラー共に、Blackに設定。

f:id:Korsakov:20101201021457p:image

SVGフォーマットで保存。

9.GIMPで仕上げる

先ほどのSVGファイルをGIMPで開きます。

下図の通り、矢印以外の余計な影をGIMPで取り除きます。

f:id:Korsakov:20101201143229j:image

黒い矢印のSVGファイルも同様に開きます。(同じ画像の別レイヤーとして開く)

f:id:Korsakov:20101201143230j:image

レイヤー操作で、黒い矢印以外のレイヤーを非表示にしておきます。

レイヤーウィンドウ → 右クリック → 不透明な箇所を選択する をクリック。

メニュー → 選択 → 選択部分を反転 をクリック。

すると、次のように矢印の外側を選択した状態になります。

f:id:Korsakov:20101201143231j:image

この状態で、影付き矢印のレイヤーを選択して、選択部分を削除します。(Deleteキー)

f:id:Korsakov:20101201143232j:image

余計な影をきれいに除去できましたので、黒い矢印のレイヤーは破棄します。

完成

f:id:Korsakov:20101201143233j:image

後は好きなサイズに縮小して、PNG形式でエクスポートすればAndroidアイコンとして使えますね!

トラックバック - http://d.hatena.ne.jp/Korsakov/20101201/1291183027
リンク元