PR
Lesson

絵は線から描かなくていい!基本図形だけで雪だるまを作る方法

線が上手く引けないから、絵が描けないと思っていませんか?
「まず線を引いて、そこに色を塗る」
「曲線を綺麗に引けないと絵にならない」
そんな固定観念は根強く残っています。
でも、今回はその固定観念を一度忘れます。

スポンサーリンク

線から描かなくてもイラストは作成できる

使用するのはお絵描き初心者が難しくて使えないと思い込んでいるInkscapeというフリーソフトです。

今回のルールはこれだけ!

  • 基本図形のみ使用
  • ペンツールは直線のみ
  • 下絵は描かない
  • 自由な曲線は引かない

パーツを作って組み立てた方が簡単!?

パーツは描くのではなく、別々に作って組み立てます。
曲線が必要な時は「引く」のではなく「変形」します。
今回は雪だるまを例に、イラストの組み立て方を解説します。

途中で出てくる設定画面の開き方や用語がわからない場合は先にこちらのシリーズを読んでみてください。

【無料ソフト】Inkscapeで図形描画【画像素材作成】
【全7回(完結)・初心者向け】無料で使えるAdobe Illustratorライクなベクター系ソフト、Inkscapeを使って超簡単な図形の組み合わせでお花の模様を描いてみます。使い方が分からなくて挫折した人もゼロから解説しているので読んで...
スポンサーリンク

絵は「形の集合」

まず押さえておきたいのは、今回のイラストは「線の集合」ではなく「形の集合」だということです。

今回のイラストは雪だるま
今回のイラストは雪だるま

  • 大きな円
  • 小さな円
  • 三角形
  • 四角形
  • 変形されたパス

これらが組み合わさった結果、雪だるまに「見える」だけです。
線が上手く引けるかどうかは関係ありません。

スポンサーリンク

手順1:円2つで土台を作る

胴体と頭を作ります。

  1. 円/弧ツールでCtrlを押しながら正円を1つ作成
  2. 複製して縮小・少し重ねて上に配置

最初の円が胴体です。頭の方が重なり順が手前に来るので先に胴体を作ります。

円/弧ツールに切り替える
円/弧ツールに切り替える
Ctrlを押しながら縦横比固定
Ctrlを押しながら縦横比固定
正円が作成できた

色や線の幅を変更します。

カラーパレットで色変更
カラーパレットで色変更
カラーパレットをShift+クリックで線の色を変更
カラーパレットをShift+クリックで線の色を変更
ストロークのスタイルで線の幅を変更
ストロークのスタイルで線の幅を変更

複製して上下に並べます。

選択ツールに切り替える
選択ツールに切り替える
複製すると前面に重なって作成される
複製すると前面に重なって作成される
Ctrlを押しながら垂直に移動
Ctrlを押しながら垂直に移動
Ctrl+Shiftで縦横比と中心位置固定で拡大縮小できる
Ctrl+Shiftで縦横比と中心位置固定で拡大縮小できる
胴体の前面に頭が作成できた
胴体の前面に頭が作成できた

ここまででやったことは「線を引くこと」ではありません。 円を2つ置いただけです。
でも、もうこれで雪だるまのシルエットが見えてきました。

Inkscapeの画面説明

Inkscapeの画面説明

[フィル/ストローク]ダイアログが開いていない場合は上部メニューバーの[オブジェクト>フィル/ストローク]から開けます。

[レイヤーとオブジェクト]ダイアログが開いていない場合は上部メニューバーの[オブジェクト>レイヤーとオブジェクト]から開けます。

この2つの設定画面はよく使用するので開いていない場合は開いておきます。他のダイアログを使用する時以外は、[レイヤーとオブジェクト]を開いておくと、作成した図形の重なり順がわかりやすいです。

Inkscapeで作成した図形は基本的に上へ上へ(Z方向で手前側に)積み重なっていきます。重なり順を変更したい時は[レイヤーとオブジェクト]でドラッグするか、選択ツールの[最前面に移動]・[最背面に移動]などのコマンドを使用します。

手順2:四角形を変形して帽子にする

帽子も描きません。図形を変形して作ります。

  1. 矩形くけいツールでCtrlを押しながら正方形を作成
  2. [パス>オブジェクトをパスへ]でパスに変換
  3. 上部のノードを内側へ移動

正方形を作ります。

矩形ツールに切り替える
矩形ツールに切り替える
Ctrlを押しながら縦横比固定
Ctrlを押しながら縦横比固定
オブジェクトをパスへ
オブジェクトをパスへ

左右両端ノードを選択してCtrl+「,」キーまたはCtrl+「.」キーで[ノードを均等に拡大縮小]できます。
台形が簡単に作れます。

ノードツールで囲うようにドラッグして範囲選択
ノードツールで囲うようにドラッグして範囲選択
選択状態だとノードの色が変わる
選択状態だとノードの色が変わる
Ctrlを押しながら[,]キーを連打する
Ctrlを押しながら[,]キーを連打する

補足
,」と「.」キーだけでも操作できますが、ショートカットキーは日本語入力がONの状態だと反応しないことがあります。反応しない場合は、半角英数入力に切り替えてください。

台形の辺を曲線にします。

  1. 上辺中央にノードを追加
  2. 追加したノードを対称ノードに
  3. ノードを移動してゆるやかなカーブを作る

ノードツールで2点を選択し、[新規ノードを選択セグメントに挿入]で中央にノードが追加できます。

ノードやハンドルを移動しながらCtrlを押すと移動方向が制限されます。

※移動モードに入る前にCtrlを押すとノードの種類が切り替わります。

ノードツールで2点が選択された状態
ノードツールで2点が選択された状態
新規ノードを選択セグメントに挿入
新規ノードを選択セグメントに挿入
ノードツールでクリックして選択
ノードツールでクリックして選択
選択ノードの種類を対称に
選択ノードの種類を対称に
ノードの種類が変わるとノードのアイコンが変わる
ノードの種類が変わるとノードのアイコンが変わる
ノードをドラッグして移動しながらCtrlを押して移動方向を制限
ノードをドラッグして移動しながらCtrlを押して移動方向を制限
ハンドルをドラッグして伸ばしながらCtrlを押して移動方向を制限
ハンドルをドラッグして伸ばしながらCtrlを押して移動方向を制限

正面向きで作ったバケツを回転をかけて移動して頭の上に乗せます。

回転モードの矢印の形
回転モードの矢印の形
拡大縮小モードの矢印の形
拡大縮小モードの矢印の形

ここでのポイントは、曲線を「引いていない」ことです。
四角形をパスに変換して変形しているだけです。
つば部分も同じように下辺を変形するだけです。
これだけでバケツの帽子に見えます。

手順3:目と鼻は図形の変形だけ

目は小さな円を2つ置くだけです。

  1. 円/弧ツールでCtrlを押しながら小さな正円を1つ作成
  2. 円のクローンを作成
  3. 円とクローンを少し離して並べて配置
円/弧ツールに切り替える
円/弧ツールに切り替える
Ctrlを押して縦横比固定
Ctrlを押して縦横比固定
フィル/ストロークでストロークをなしに変更
フィル/ストロークでストロークをなしに変更
フィル/ストロークでストロークをなしに変更した後
フィル/ストロークでストロークをなしに変更した後
Ctrl+マウスホイールを上に回して拡大表示
Ctrl+マウスホイールを上に回して拡大表示
フィルの色を変更
フィルの色を変更
右クリックしてクローンを作成
右クリックしてクローンを作成
ドラッグしてクローンを移動する
ドラッグしてクローンを移動する
親を変更するとクローンも連動して変更される
親を変更するとクローンも連動して変更される
同じパーツを複数作りたい時はクローンが便利
同じパーツを複数作りたい時はクローンが便利
g
Ctrl+マウスホイールを下に回して縮小表示
Ctrl+マウスホイールを下に回して縮小表示
目ができました
目ができました

鼻は三角形を変形して作ります。

  1. 多角形ツールで[多角形]・[角:3]・[丸め:0.1]に設定
  2. 多角形ツールでCtrlを押しながら[角度:180]で横向き三角形を作成します。
  3. 選択ツールで縦に縮小します。
  4. [パス>オブジェクトをパスへ]
星形/多角形ツールに切り替える
星形/多角形ツールに切り替える
多角形ツールの設定を変更する
多角形ツールの設定を変更する
Ctrlを押して角度を固定する
Ctrlを押して角度を固定する
カラーパレットから色を変更する
カラーパレットから色を変更する
オブジェクトをパスへ
オブジェクトをパスへ
選択ツールで縦に縮小
選択ツールで縦に縮小
フィル/ストロークで線の幅を変更
フィル/ストロークで線の幅を変更
小さいパーツの線は細くするのがおすすめ
小さいパーツの線は細くするのがおすすめ
選択ツールで移動する
選択ツールで移動する
鼻ができました
選択ツールで移動する

ここでもペンツールは使っていません。角丸三角形を描いて変形させているだけです。

重要:多角形の角度固定方法

多角形ツールを使うと、画面下端に
「角度:XX.XX° Ctrlで角度をスナップします」
というヒントが表示されます。

Ctrlを押しながら操作すると角度を制限して多角形を作成できます。

角度を固定せずに作ると、縦方向だけ縮小したときに形が崩れます。
最初に基準を整えておくことが大切です。

手順4:直線から口を作る

口は曲線が必要に見えます。でも、ペンツールで使うのは直線だけです。

クリック、Ctrlを押しながら横の少し離れた位置にクリック、右クリックで線終了。水平な直線が1本引けました。
Shift+クリックでストロークに色を設定して、フィルをなしにします。

ペンツールに切り替える
ペンツールに切り替える
クリックだけでドラッグしない
クリックだけでドラッグしない
始点クリック、終点クリック、右クリックで線終了
始点クリック、終点クリック、右クリックで線終了
フィル/ストロークで線の幅を変更
フィル/ストロークで線の幅を変更

直線を左右対称な曲線にする方法

ノードツールに切り替える
ノードツールに切り替える
ノードツールで2点を選択して新規ノードを選択セグメントに挿入
ノードツールで2点を選択して新規ノードを選択セグメントに挿入
追加したノードを選択
追加したノードを選択
ノードをドラッグして移動しながらCtrlを押して移動方向を制限
ノードをドラッグして移動しながらCtrlを押して移動方向を制限
ハンドルをドラッグして伸ばしながらCtrlを押して移動方向を制限
ハンドルをドラッグして伸ばしながらCtrlを押して移動方向を制限
  1. 2点の中央にノードを追加
  2. 追加したノードを対称ノードに
  3. Ctrlを押しながらノードを移動する
  4. Ctrlを押しながらハンドルを引く

これでゆるやかな曲線になります。

曲線を「描いた」のではなく、
直線を「曲げた」だけです。
これなら簡単に綺麗な線が作れます。

線の端を丸に
線の端を丸に
ドラッグして移動する
ドラッグして移動する
Shift+クリックで線の色を変更する
Shift+クリックで線の色を変更する
口ができました
口ができました

手順5:図形の統合でミトンを作る

ミトン(手袋)も図形の組み合わせです。
手のひら部分を作ります。

  1. 矩形ツールで長方形を作成
  2. 円/弧ツールで円を作成して重ねる
  3. [パス>統合]で長方形と円を一体化
矩形ツールに切り替える
矩形ツールに切り替える
ドラッグして長方形
ドラッグして長方形
矩形ツールの設定変更
矩形ツールの設定変更
Ctrlを押して正円を作成
Ctrlを押して正円を作成
円の半径を長方形の幅の半分にする
円の半径を長方形の幅の半分にする
選択ツールに切り替える
選択ツールに切り替える
スナップを有効に
スナップを有効に
円の中心を長方形にスナップ
円の中心を長方形にスナップ
選択ツールで範囲選択
選択ツールで範囲選択
統合
統合
円と長方形が1つの図形にまとまった
円と長方形が1つの図形にまとまった

直線を追加して腕を作ります。

  1. ペンツールで垂直に直線を引く
  2. 背面に一段階移動する
  3. 手のひらと腕を中央揃え
ペンツールに切り替える
ペンツールに切り替える
始点クリック、終点クリック、右クリックで線終了
始点クリック、終点クリック、右クリックで線終了
Ctrlを押しながらだと垂直に直線を引ける
Ctrlを押しながらだと垂直に直線を引ける
フィル/ストロークで線の幅を変更
フィル/ストロークで線の幅を変更
カラーパレットをShift+クリックで線の色を変更
カラーパレットをShift+クリックで線の色を変更
線の端を丸に
線の端を丸に
選択ツールでShift+クリックして追加選択
選択ツールでShift+クリックして追加選択
整列と配置を開く
整列と配置を開く
最大オブジェクトを基準で中央揃え
最大オブジェクトを基準に中央揃え
センタリングができた
センタリングができた

手のひらと腕ができたら、コピーして貼り付けて親指部分を作ります。

  1. 貼り付けた図形を縮小する
  2. 下辺両端のノード2つを選択する
  3. 選択したノードを下に移動させて図形を延長する
  4. 図形を回転させる
  5. 図形を移動して手のひらに一部重ねる
  6. [パス>統合]手のひらと親指を一体化
手のひら部分だけを選択してコピー
少し離れた位置に貼り付け
少し離れた位置に貼り付け
スナップを無効に
スナップを無効に
ノードツールに切り替える
ノードツールに切り替える
ノードツールで範囲選択
ノードツールで範囲選択
選択されたノードは色が変わる
選択されたノードは色が変わる
片方のノードをドラッグしながらCtrlを押して垂直移動
片方のノードをドラッグしながらCtrlを押して垂直移動
選択ツールの拡大縮小モードの矢印
選択ツールの拡大縮小モードの矢印
選択ツールの回転モードの矢印
選択ツールの回転モードの矢印
回転矢印をドラッグして傾ける
回転矢印をドラッグして傾ける
ドラッグして移動する
ドラッグして移動する
親指と手のひらだけ複数選択して統合
親指と手のひらだけ複数選択して統合
統合されて1つの図形になった
統合されて1つの図形になった
カラーパレットでフィルとストロークの色を変更
カラーパレットでフィルとストロークの色を変更
フィル/ストロークで線の幅を変更
フィル/ストロークで線の幅を変更

手のひらと親指を組み合わせるとミトンの形になります。

ミトンと腕をグループ化して回転し、複製して左右反転します。

ミトンと腕を選択してグループ化
ミトンと腕を選択してグループ化
回転矢印になるまで数回クリック
回転矢印になるまで数回クリック
回転矢印をドラッグして傾ける
回転矢印をドラッグして傾ける
ドラッグして移動する
ドラッグして移動する
大きさや角度の調整が終わったら複製する
大きさや角度の調整が終わったら複製する
複製を選択して水平に反転
複製を選択して水平に反転
水平に反転した状態
水平に反転した状態
ドラッグしながらCtrlを押して水平移動
ドラッグしながらCtrlを押して水平移動
重なり順を胴体の後ろ側に変更する
重なり順を胴体の後ろ側に変更する

ミトンの統合をした後に腕(縦線)と中央揃えをすると手のひらの真ん中に揃えられないので、親指を作る前にミトンの手のひらと腕で整列をかけています。

[整列]については以前の記事でもご紹介しています。

Inkscapeで図形描画(5) グループ化して整列しよう
前回はタイルクローンを作成して花びらを増やしました。あとは位置の調整をしたいと思います。花の真ん中に黄色い正円が来た方が見栄えが良くなりますよね。どうやれば真ん中に黄色い正円を合わせられるかというと、整列というコマンドがあるのでこれを使用し...

手順6:マフラーの端と巻き部分を作る

どうしたらいいか迷うのがマフラーです。曲線が多いので図形で上手く作れないと思いますよね。でも、ここでも自由曲線は使いません。

巻き部分

最初に決めるのは巻き部分の幅と厚みです。作成後の図形から不要な部分を削ります。

  1. 頭の円を複製(複製1)
  2. 複製1を少し拡大してマフラーの幅を決める
  3. 角丸四角形を胴体に重ねてマフラーの厚みを決める
  4. 複製1と角丸四角形を選択して交差
  5. マフラーの巻き部分を頭の背面に移動
頭を選択して複製する
頭を選択して複製する
複製は最前面に作成される
複製は最前面に作成される
カラーパレットをクリックして色変更
カラーパレットをクリックして色変更
一時的に不透明度を下げる
一時的に不透明度を下げる
縦横比と中心位置を固定で拡大
縦横比と中心位置を固定で拡大
マフラーの幅になる大きさに拡大
マフラーの幅になる大きさに拡大
四角形でマフラーの厚みを決める
四角形でマフラーの厚みを決める
一時的に不透明度を下げる
一時的に不透明度を下げる
角丸四角形に変更する
角丸四角形に変更する
胴体と角丸四角形を選択
胴体と角丸四角形を選択
最大オブジェクトを基準で中央揃え
何もないところをクリックして選択解除
何もないところをクリックして選択解除
円と角丸四角形を選択
円と角丸四角形を選択
交差
交差
2つの図形の重なった部分が残る
2つの図形の重なった部分が残る
不透明度を100%にする
不透明度を100%にする
頭の後ろ側に移動する
頭の後ろ側に移動する
Ctrlで縦横比固定、Shiftで中心位置を固定で拡大縮小
Ctrlで縦横比固定、Shiftで中心位置を固定で拡大縮小
キーボードの上下矢印キーを利用すると垂直方向に移動できる
キーボードの上下矢印キーを利用すると垂直方向に移動できる
パーツを追加してバランスが気になる場合は調整する
パーツを追加してバランスが気になる場合は調整する
複数選択状態で位置の調整をする
複数選択状態で位置の調整をする

両端部分

角丸長方形を2本作成し、垂らします。

回転で角度を調整し、重なり順を調整すればマフラーの完成です。

「複雑に見える形」も、単純な図形の組み合わせで作れます。

矩形ツールに切り替える
矩形ツールに切り替える
カラーパレットをクリックして色変更
カラーパレットをクリックして色変更
フィル/ストロークで線の幅を変更
フィル/ストロークで線の幅を変更
右クリックして複製
右クリックして複製
ドラッグして移動する
ドラッグして移動する
元に戻す時はCtrl+Z
元に戻す時はCtrl+Z
矩形ツールに切り替える
矩形ツールに切り替える

あとはお好みで線の端や角を丸くしたり、線の太さを変更したり、位置を調整したりします。

完成:なぜこれで「絵」になるのか

ここまで、一度もペンツールでベジェ曲線を描いていません。鉛筆ツールでフリーハンド線も描いていません。
それでも雪だるまに見えますね。どうしてでしょうか?

人は「形の関係性」を見て、それが何なのか判断しています。

  • パーツの大小関係
  • パーツの配置
  • シルエットのまとまり

これが整っていれば人間の頭の中では絵として認識されます。
線画から描こうとすると、線がゆがんだり、まっすぐな線が引けなかったり、思い通りに描けないことがありますよね。でも、線画から描き始めなくてもいいんです。

線画から描かなくても、絵は描けます。

まとめ:絵を組み立てるということ

今回やったことは、実はこれだけです。

  • 図形を置く
  • 図形を変形する
  • 図形をまとめる
  • 図形を削る

たったのこれだけです。
手描きが苦手でも問題ありません。
曲線がきれいに引けなくても問題ありません。
ペンタブレットを持っていなくても、マウスだけで絵が描けます。

「絵が下手だから上手く描けない」
「絵心がないから無理」
今までそう思っていたとしても大丈夫です。
描けないのではなく、描き方を知らなかっただけかもしれません。

Inkscapeはフリーハンドの線を引くための道具ではなく、形を設計するための道具です。
そんな性質のソフトウェアなので直感的に使おうとすると「難しい・わからない・使いにくい」と思われがちですが、使い方さえ身に付ければ自由自在です。

Inkscapeは正確に線を引く・形を作るという操作が得意分野で、他のお絵かきソフトとは少し違う性質を持っています。描いた形は後からいくらでも変形が可能です。
積み木を重ねる・粘土をこねるような感覚で、イラストを「組み立てる」ことができます。

絵は線から描かなくていい
線を描くよりパーツを組み立てる

難しく考えずに楽な気持ちで、発想の転換をしてみてください。
きっと、想像より自由に創造できるはずです。

動画のスクリーンショットギャラリー

コメント

タイトルとURLをコピーしました