ios、Android用アイコンをチートで作る

久しぶりにGIMPさわったら、ナンにも覚えてない！

アイコン制作のチュートリアルも途中で挫折した。。

ウィンドウズとマックで操作系がけっこう違うんですね。

でもね、奥さん。。見つけちゃいましたよ。スマホ用アイコンをチートで作れるウェブサービスを。

とりあえず、用意するのは1024px☓1024pxのpng画像。

GIMP（mac）の場合

メニューバー＞ファイル＞新しい画像

でキャンパスサイズ1024px☓1024pxの画像を作る。ここは、

メニューバー＞GIMP＞設定＞新しい画像の設定

であらかじめサイズ等を決めておくと楽。

次に、キャンバスを好きな色で塗りつぶす。

ツールボックス＞塗りつぶし（ペンキ缶）

を選択し、描画色（ツールボックスで色カードが2枚重なっている上の方）を選び、キャンバス上でマウスクリックする。

次に、［テキスト］（大文字のA）をツールボックスから選び、

適当な英字フォントを選択、サイズは600にしておく。色は白か黒で。

キャンバスの左上をクリックし、大文字を１文字打つ。

ツールボックスから［移動］を選択。「アクティブなレイヤーを移動」をチェックし、打った文字を真ん中にマウスでドラッグする。細かい人は［グリッド］を利用しよう。

これを

メニューバー＞ファイル＞エクスポート

で適当な名前をつけてpngで保存する。

ベクター・グラフィック・ファイルの場合

英大文字１のアイコンって、余程の自信があるサービスっぽいと頭を抱えている貴方！同感です。

思いつきで作った一発芸アプリのアイコンはグラフィックで行きたい。でも一発芸だからこそアイコンが大事。同じようなアプリは山ほどあるからね。

ではどうするか。

まず、ネット上でタダで山のように手に入るベクターベースのアイコンを入手する。ファイルはsvgかaiがベター。epsはできるけど、ストレスフルなのでとりあえず今回はパス。

で、このベクターファイルだが、開くのはInkscapeではなく、われらがLibreOfficeのDrawだ！

ファイルを開いたあと、気に入ったグラフィックをマウスで指定し（複数ある場合はShiftを押しながら選択）、別のDrawのウィンドウにコピペする。画像をウィンドウ内にあるA4ファイルイメージ印刷可能領域の横（短い方）いっぱいに拡大し（Shiftを押しながらマウスで角を引っ張ると同じ比率で拡大できる）、カラーバーを押して色をつけて

メニューバー＞File＞Export

からpngで保存する。たぶん画像サイズは19cm☓19cmくらい。

この画像をGIMPで開いて、前述の1024px☓1024pxの単色ベース画像に重ねてpngでエクスポートする。

Icon Slayerで整形する

次に、Icon Slayerというウェブサービスに接続する。

真ん中左寄りにある「Load Image」ボタンをクリックし、先ほど保存したpng画像を選択する。

イメージの右隣にあるツールバーで、効果を調整し、「Export Icons」ボタンを押せば、iosとAndroid用のアイコンセットが元画像が置いてある場所に保存される。

今回、作ってみたアイコンがこれとこれ。

効果はBevelが立体化、Drop Shadowが影追加、Outlineが枠追加で、それぞれアイコン背景の色に基いて効果を調整する。効果はすぐに反映されるが、アイコンウィンドウの下の方に大きいアイコンがあるので、それを確認する。なお、白色部分は効果がなぜか反映されない。

たったこれだけ。

欲を言えば、icon-generatorみたいに、ブラウザ上で背景色、フォント、テキスト入力、画像インポートができるとGIMPが要らなくなるんだが。

ふぅ。またつまらぬチートをしてしまった。