やもともりブログ

HSPママの試行錯誤

アイビスペイントでフラットデザイン風のイラストを描く方法

こんにちは。やもともりです。

我が家の娘(現在小学2年生)は昔からお絵かきが大好き。

最近では紙やホワイトボードに描くだけでなく、スマホの「ibisPaint(アイビスペイント)」というお絵かきアプリを使うことがあります。

今日はそんな娘と一緒にアイビスペイントを使い、いつもと違った遊びをしました。

フリーハンドを使わず、図形描画(丸や三角)のみで描いてみよう

すると、フラットデザイン風のイラストが完成。簡単で楽しかったので、以下に描き方を記載します。

ちなみにフラットデザインとは、以下のようにシンプルで平面的なデザインのことです▼

f:id:yamotomori:20230417134853p:image

アイビスペイントの公式サイトはこちら▼

ibispaint.com

ibisPaintでフラットデザイン風のイラストを描く方法

今回は、以下のようなクマちゃんを描いていきます。小さい子でも描きやすいように「円」だけを使いました。また、色は原色ではなく落ち着いた色がオススメです。

f:id:yamotomori:20220108235613p:plain

図形描写でシンプルな絵を描く

アプリを開き、マイギャラリーを押して、左下のプラスボタンを押します。

f:id:yamotomori:20220108180005j:plainf:id:yamotomori:20220108180020j:plain

キャンバスのサイズを選びます。今日は1280×1280を使いました。

f:id:yamotomori:20220108180032j:plain

ツールの中から「ブラシ」を選択して、

f:id:yamotomori:20220108224333j:plain

ペンの種類や太さを選びます。今日は「デジタルペン」で、太さを「8.0px」にしました。

f:id:yamotomori:20220108225115j:plain

キャンバスに戻りたいときは、キャンバス上をタッチするか、このボタンを押します。

f:id:yamotomori:20220108225814j:plain

次に、上にある「人差し指マーク」を押して、「描画ツール」の中の『〇(円)』を選択します。
(「塗りつぶし」や「現在の色を使う」はオンの状態にしておきます)

f:id:yamotomori:20220108225901j:plain

キャンバスに戻り、次は色を選びます
色は自分で作ることもできます。この茶色は自分で作った色です。

f:id:yamotomori:20220108231539j:plain

自分で色を作るには、この「<」のマークを押して、

f:id:yamotomori:20220108231600j:plain

白い2つの〇を動かすことで色を調節できます。もしくは赤・緑・青(R・G・B)の値を指定します。気に入る色が出来たら「>」のマークで戻ります

f:id:yamotomori:20220108231614j:plain

作った色をパレットに残しておきたい場合は、作った色を長押ししながら下に移動します。

f:id:yamotomori:20220108231628j:plain

ここからはキャンバスに戻り、クマちゃんを描いていきます。先ほどの手順で「描画ツール」の「円」を選択したので、キャンバスに指をのせて少し動かすと円が描けるモードになっています

もし直前の作業を取り消したい場合は、左上にある「取り消し」ボタンを使います

描いていくと、以下のようになりました。続いて、下にある数字付きの四角を押して「レイヤー画面」を開きます。

f:id:yamotomori:20220108232519j:plain

レイヤー画面」ではレイヤーの操作ができます。(レイヤーとは透明のフィルムのようなもの。各パーツや背景を複数のレイヤーに分けて描くと、細かい調整がしやすくなります。)プラスマークを2回押して、レイヤーを2つ増やしましょう

f:id:yamotomori:20220108232856j:plain

クマちゃんを描いたレイヤーの上に、透明のフィルムが2枚載った状態になりました。新しく追加したレイヤー2を長押しして、クマちゃんのレイヤーよりも下に移動させます。

f:id:yamotomori:20220108233120j:plain

一番下に移動したレイヤー2が青い枠で選択されていることを確認したら、キャンバスに戻ります。

 

レイヤー2に背景を描いていきます。ツールを「ブラシ」から「塗りつぶし」に変更します。

f:id:yamotomori:20220108233357j:plain

今回は赤色の背景にしたいので、色を赤色に変更してから、キャンバスの白い余白をタップします。すると、背景が赤色に変わります

アクセントとしてシンプルで薄い影を付ける

これで完成でも良いのですが、ここから影を追加してかっこよくします

右下の数字付きの四角を押してレイヤー画面を開きます

f:id:yamotomori:20220108234042j:plain

一番上のレイヤー3を選択し、「クリッピング」を押します。すると、レイヤー3がレイヤー2に固定され、「レイヤー3」に描くものはクマちゃんのレイヤーに色が塗られた部分だけに反映されます。クリッピングははみ出さず塗るときや影を付けるときに便利ですが説明がややこしいので、実際にやって確かめてみましょう。

f:id:yamotomori:20220108234403j:plain

普通」を押して、「乗算」を選択し、キャンバスに戻ります。

f:id:yamotomori:20220108234709j:plain

ツールが「塗りつぶし」になったままなので、「ブラシ」に戻します。これからやろうとしていることは、「ブラシでクマちゃんの一部にのせる影を描く」作業です。

 

ブラシの色を黒っぽい色に変え太さを一番細くし不透明度を15%ぐらいにします(※ここでは不透明度を20%にしていますが、個人的には10~15%がオススメ)。

f:id:yamotomori:20220108234946j:plain

右上の「人差し指マーク」を押し、「□長方形」を選択してキャンバスに戻ります。

f:id:yamotomori:20220108235112j:plain

クマちゃんの顔の半分だけに影をつけるため、長方形を以下の位置に描きます。(キャンバスに指をのせ、少しずらすと長方形が描けます。)

f:id:yamotomori:20220108235224j:plain

上手く影がついたら完成です♪
アイビスペイント内には自動でイラストが保存されますが、スマホの写真フォルダにも保存したい場合は、右下の矢印マークから「PNG保存」を押します。

f:id:yamotomori:20220109005005j:plain

完成したイラストはこちら

f:id:yamotomori:20220108235613p:plain

なお、「描画ツール」の「折れ線」を利用し、背景のレイヤーの方にも影をつける作業をすると、

f:id:yamotomori:20220109000103j:plain

こんな仕上がりにもできます。

f:id:yamotomori:20220109000125p:plain

おわりに

f:id:yamotomori:20230417115213p:image

アイビスペイントは、時間を忘れるくらい楽しくお絵かきできるオススメアプリです。

以下のような機能も少しずつ覚えていけば、さらに自由に描けるようになります▼

  • お手本としたい画像をフォトライブラリから読み込んでなぞり書き
  • レイヤーの表示 / 非表示
  • 対称定規を使って左右対称に描く
  • ベジェ曲線で綺麗な曲線を描く
  • レイヤーの複製やレイヤーの左右反転
  • 投げ縄で選択した一部分を移動、加工
  • 移動変形ツール微調整

細かい使い方はYouTubeに動画がたくさんアップされているので、気になる機能があれば検索してみてくださいね。

 

あわせて読みたい▼

プライバシーポリシー  / お問合せ