おはようございます
今日は inkscape で、 Android や iPhone のアプリの顔とも言えるアイコンを作ってみたいと思います。
一般のツールアプリのアイコン、そしてミニゲームなどでよく見かけるゲームアプリのアイコンのどちらのデザインにも応用の利くような、基本的なデザインのアイコンをこのページでは作ってみたいと思います。
↓ということで、今日作るアイコンはこれです。
![](https://learning-p.com/wp-content/uploads/2019/02/g1135.png)
ツールアプリのアイコンとしても、ミニゲームアプリのアイコンとしても、どちらのイメージでも、いいような感じがしますよね。
それではこのアイコンを作る操作手順を、チュートリアル的にまとめてみましたので一緒にやってみましょう。
まずは、棒人間みたいなキャラクターを書きます。
【1】キャラクターを描く
1.ツールボックスの「円/弧ツール」を選択。キーボードの[Ctrl]キーを押しながら、マウスで円を描きます。大きさはお好みで・・・ ちなみに、[Ctrl]キーを押しながら描くと、綺麗な円が書きやすいです。
![](https://learning-p.com/wp-content/uploads/2019/02/01-1-1024x375.png)
2.今書いた円を選択した状態で、下のカラーパレットの黒色をクリックします。円の塗り色が黒色になりました。
![](https://learning-p.com/wp-content/uploads/2019/02/02-1-1024x805.png)
3.ツールボックスの「矩形ツール」を選択して棒人間の胴体を書きます。大きさは、先に書いた円が棒人間の頭なので、その大きさに丁度良さそうな長方形を描きます。
![](https://learning-p.com/wp-content/uploads/2019/02/スクリーンショット-2019-02-18-10.50.19-1024x798.png)
![](https://learning-p.com/wp-content/uploads/2019/02/スクリーンショット-2019-02-18-10.51.27-1024x801.png)
4.次に、大きさを確定して、マウスドラッグを解除した時に、四角形の右上に表示されている丸をドラッグして角の丸みを調整します。
![](https://learning-p.com/wp-content/uploads/2019/02/05-1-1024x377.png)
これで、棒人間の頭と胴体の部品が完成しました。
それでは、棒人間の手足の部品を書いていきましょう。
5.先ほどと同様に、「矩形ツール」を選択して、腕を書きます。腕は、肘の関節で曲がっているイラストにしたいので、腕の部品を二つ書きましょう。一つが上腕で、もう一つが前腕です。
![](https://learning-p.com/wp-content/uploads/2019/02/06-1-1024x831.png)
6.次にツールボックスの「選択ツール」を選択して、今書いた上腕と前腕の腕の部品二つを選択し、キーボードの[Ctrl]+[C] でコピー[Ctrl]+[V]で複製します。複製ができたら左側へ移動しておきます。
ちにみに、複製の方法は 上記の方法の他に、Inkscapeは「選択ツール」で、複製したい部品を選択し、ドラッグした状態で、キーボードのスペースを一度押しても複製できます。
![](https://learning-p.com/wp-content/uploads/2019/02/07-1-1024x790.png)
7.それでは、次に、足の部品を書きましょう。足の部品も腕と同じように、膝関節で曲がっているイラストにしたいので、太股(大腿)とスネの(下腿)の部品として二つ書きましょう。
![](https://learning-p.com/wp-content/uploads/2019/02/08-1-1024x845.png)
8.もう一本の足を作成するため、キーボードの[Ctrl]+[C] でコピー[Ctrl]+[V]または、選択してドラッグ中にスペースキーを押して複製します。
![](https://learning-p.com/wp-content/uploads/2019/02/09-1-1024x863.png)
これで、棒人間のキャラクターの部品が完成です。
それでは、キャラクタのポーズを調整して行きましょう。
9.ツールボックスの「選択ツール」を選択して、胴体のパーツを選択し、頭パーツとのバランスの良さそうな場所へドラッグして移動します。
![](https://learning-p.com/wp-content/uploads/2019/02/10-1024x786.png)
この時、頭パーツと胴体パーツを中央へ揃えたい場合は、2つのパーツを選択して
「メニュー」→「オブジェクト」→「整列と配置」を選択して、右側に表示されたダイアログから中央揃えのマークをクリックします。すると、綺麗に中央で揃います。
![](https://learning-p.com/wp-content/uploads/2019/02/11-1024x789.png)
さらに、せっかく揃えた頭と胴体の部品が誤操作でズレたりしないように、2つの部品を選択して、「右クリック」→「グループ化」を選択して一つの部品とします。
※グループを解除したい場合は、グループ化した部品(オブジェクト)を選択して、「右クリック」→「グループ解除」を選択すると、元の別々の部品、頭の部品と胴体の部品の2つに戻ります。ここでは、グループ化した状態で作業を進めます。
10.それでは、腕のポーズを行いましょう。「選択ツール」を選択した状態で、腕の部品を一度クリックします。すると、8つの矢印で部品が囲まれます。
![](https://learning-p.com/wp-content/uploads/2019/02/12-1024x794.png)
もう一度クリックすると、四隅角の矢印が変化します。
![](https://learning-p.com/wp-content/uploads/2019/02/13-1024x844.png)
選択ツールで部品を2回クリックして、四隅の角の矢印をドラッグすると、部品を斜めにしたり、回転させることができます。
![](https://learning-p.com/wp-content/uploads/2019/02/14-1024x797.png)
それでは、この方法で腕のポーズを走っているようなポーズにしてみましょう。
納得のいく形になったら、上腕と前腕の二つの部品を選択してグループ化しておきます。
もう片方の腕もポーズを変更して、グループ化しましょう。
とりあえず↓こんな感じのポーズにしました。
![](https://learning-p.com/wp-content/uploads/2019/02/15-1024x798.png)
ここまでの操作がわかれば、後は足のポーズも同じようにできるはずです。
それでは、走っているような姿勢になるように、足の部品もやってしまいましょう。
![](https://learning-p.com/wp-content/uploads/2019/02/16-1024x805.png)
ちなみに、腕の時と同じように、一本の足のポーズができたら、太股部品とスネ部品をグループ化しましょう。
最後に、全ての部品(オブジェクト)を選択して、グループ化しておきましょう。
これで、棒人間のキャラクター作成は終了です。
次回は、キャラクターが走っている道?みたいな矢印の上り坂を書いて行きましょう。
コメント