ゼロから始めるAffinity3 Affinity中級者講座その22 手書きイラストの読み込み方

2026-08-05

Affinity Affinity中級者講座 パソコン関係

t f B! P L
Affinity V3中級者講座のブログアイキャッチ画像(初心者向け美少女イラストの描き方)
ゼロから始めるAffinity3 Affinity中級者講座その21 ベクター塗りつぶしツール の続き

さて、それでは今回から美少女イラストの描き方を学んでいきましょう。
「美少女じゃなくね?」という苦情は受け付けない。
基本的な美少女の描き方は、それこそネットにたくさんあるのでそこから学んでください。

あくまで、ボクが教えられるのはAffinityの機能説明のみです(=・ω・=)

手書きのイラストを読み込む方法

手書きで下書きをしたり、ペン入れをした状態でパソコンに読み込みたい、という人もいるでしょう。
そんな方たちのために、手書きイラストの読み込み方から紹介していきます。

描いたイラストは、スキャナーで読み込むなり、カメラで写すなりして、画像の状態にしておいてください。

今回はスマホカメラで撮ったこのイラストを読み込んでいきたいと思います。
手元にボールペンしか無かったんでボールペン一発書き。

絵が下手なのは見逃してください。イラストレーターではないので(´・ω・`)
スマホのカメラで撮影した手書きのボールペン画の女の子イラスト
なんだかんだで手書きでイラスト描いたの、5年ぶり以上な気がする(=・ω・=)

1.作成するイラストのドキュメントを作る

今回はWeb用にアップするイラストで、Youtubeのサムネイルとかに使えるサイズで作ろうと思います。
Youtubeサムネイルのサイズ1280px×720pxの設定を選び、もしかしたら拡大縮小するかもしれないので、ページの幅と高さを2倍の2560px×1440pxにしておきます。

Affinity V3の新規ドキュメント作成画面で幅2560px・高さ1440px・配置DPI72を設定する様子

2.メニューの「ファイル」-「配置」で手書きイラストを読み込む

「配置」で手書きのイラストを指定し、キャンバス上に配置します。
Affinity V3のキャンバス上に配置ツールで読み込まれた手書きのイラスト画像

3.移動ツールで、描きたいイラストの大きさに拡大縮小する

描きたい位置やサイズになるよう、移動ツールで調整してあげて下さい。
Affinity V3の移動ツールを使ってキャンバスのサイズに合わせて手書きイラストを拡大・位置調整する画面
このままだと、ちょっと背景がグレーがかっていてキレイではありません。
なので、レベル補正を使ってできるだけ白と黒をはっきりさせましょう。

4.レイヤーパネルの「調整」から「レベル」を選ぶ

レイヤーパネルの下の方にある、半分に塗られたアイコンをクリックして、「レベル」を選びましょう。
Affinity V3のレイヤーパネルの下部メニューから新規調整レイヤーのレベルを選択する操作画面

5.黒レベル、白レベル、ガンマを動かして、白黒をはっきりさせる。

黒レベルを右に寄せればグレーだったところが濃く、
白レベルを左に寄せれば、グレーだったところが白くなっていきます。
ガンマを左右にずらして、白黒の割合をいい感じに調整しましょう。

レベルの詳しい使い方は「調整レイヤー②/Affinity3 レベル」参照。
クイック調整パネルまたはレベル調整のダイアログで黒レベル・白レベル・ガンマのスライダーを調整して線画をくっきりさせる画面

6.「結合」を押して、調整を確定する

まだ調整レイヤーのまま残しておいてもいいですが、もういじることないな、と思ったら右上にある「結合」を押して、調整内容を確定して画像を上書きしてしまいましょう。
レベル調整レイヤーのプロパティ画面で右上にある結合ボタンをクリックする操作画面

7.レベルでも消えなかったゴミなどを消す

レベルで飛ばしても消えなかったゴミなどを、ペイントブラシツールなどを使って消していきます。
ピクセルスタジオに切り替え、ペイントブラシツールに切り替えます。
ペイントブラシツールは大体この辺の位置にあります。
Affinity V3の左側ツールバーにあるペイントブラシツールのアイコン位置を示す画面
直接読み込んだ手書きイラストを修正しても良いですが、「うっかり消しすぎたー」を防ぐために、新しくピクセルレイヤーを作って、そこに白ブラシで修正するのオススメです。
失敗したら消しゴムで消せば元に戻せるので。

レイヤーパネルの右から2番目にある「ピクセルレイヤー」のアイコンをクリックして、空のピクセルレイヤーを作成し、その上に白で塗っていってください。

キャンバス上を右クリックすると、ブラシの詳細設定を決められます。
キャンバス上を右クリックしてペイントブラシツールのサイズや流量、硬さを設定するコンテキストポップアップ画面
「基本」のラウンドブラシ、不透明度・硬さ・流量100%、ウェットエッジOFFが個人的オススメ。
硬さは、線を描き足すときは80%のがフチがガビガビしなくていいかも。
ペイントブラシツールではなく、「ピクセルツール」を使ってもOKです。ドット絵レベルのバキッとした塗り分けができます。

ラウンドブラシのオプションを表示して、間隔を1にすると、太い線を書いたときにもこもこするのを抑えられます。

ここら辺のブラシ設定については「ペイントブラシツール/Affinity3」参照。
ブラシの編集ダイアログでラウンドブラシの間隔プロパティを1パーセントに変更する設定画面
を押して前景色/背景色を白と黒にし、で白と黒を切り替えながら、ゴミを消したり、消えかけの線を描き直したりします。
消しすぎたらで消しゴムを選択して消せば、元の状態に戻せます。

コンテキストツールバーや、右クリックでブラシのサイズを変えられます。
エンターキーの横にある「[」や「]」でもサイズ変更可能。
新しく追加したピクセルレイヤー上で白のペイントブラシツールを使いイラスト周辺の不要なゴミを消去する様子
修正が終わったら、上にのせたピクセルレイヤーを選択し、メニューの「ピクセル」-「結合」-「下」で結合します。

出来るだけ後で戻せるようにレイヤーとか残しておく、と今まで解説では言ってきましたが、イラストを描くとものすごいレイヤー数になってしまうので、修正の可能性がないものはどんどん結合してレイヤー数を減らしていった方が楽です。

あと、保存をほんとこまめにやるように!
ショートカットはCtrl+Sなので、ひとつ作業が終わったらこまめに押しておきましょう。

キレイな画像が作れました。
レベル補正とピクセルレイヤーでのゴミ取りが完了したきれいな女の子のモノクロ手書き線画
このままだと使いにくいので、紙の白いところを透明にしたいと思います。

8.レイヤーを選択した状態で、メニューの「ピクセル」-「フィルター」-「カラー」-「背景の紙を消去」を押す

Affinity V3の上部メニューからピクセル、フィルター、カラー、背景の紙を消去を選択する手順画面
ちょっと分かりにくいですが、白い部分が透明になりました。
背景に水色の四角を置いてみましたが、ちゃんと下が透けてます。

このレイヤーを一番上にして、下に塗りを作っていけばキレイに色塗りができそうです。
背景の紙を消去フィルターを適用し線画の背景白部分を透明化して水色の背景を透けさせた画面
もちろん、この絵を下書きとして、ペンツールや鉛筆、ペイントブラシツールで線を描き直してもOKです。

レイヤーパネルの「不透明度」を下げると、表示を薄くすることができます。
うっかり触って動かさないように、隣にある鍵マークをつけておくといいでしょう。
レイヤーパネルで下書き用ピクセルレイヤーの不透明度を下げて鍵マークでロックをかける操作画面
鍵マークをつけると、キャンバス上でクリックして選択できなくなります。
レイヤーパネルでレイヤーを選択した状態で色を塗ると描き込めてしまうので、レイヤーパネル上で選択しないように気をつけましょう。

不透明保護や描画禁止と間違えそうですが、ただ選択しにくくなるという機能なだけです。

また、ペン入れにタブレットを使う人は設定から「ツール」-「タブレット入力方式」で「高精度」に切り替えて下さい。
Affinity V3の設定画面内ツールメニューでタブレット入力方式を高精度に設定する画面
線が書かれるのがワンテンポ遅れる、入り抜きの線が消えるなど、うまく動かないときは「Windowsインク」または「低精度」にしてください。
「高精度」→「Wndowsインク」→「低精度」の順にオススメ。
高精度が理想だけど、古いパソコンや古いタブレットだとうまく動かないことがあります。
ペンツールと境界線の幅ツールを使用して滑らかにデジタル清書された女の子のベクター線画イラスト
流石にボールペン一発書きだとアレなので、ペンツールと境界線の幅ツールを使ってペン入れしました。
慣れるとペンツールを使ってマウスで線を描いた方が早くて楽なんです(=・ω・=)

下書きはペンタブで直書きして、ペン入れはマウス使う感じです。
自分みたいな描き方してる人は少ないと思う(´・ω・`)
パーツごとにフォルダ分け整理されコンテナレイヤーの活用イメージを沸かせるレイヤーパネルの構成画面
パソコンでペン入れする人は、大まかなパーツごとにレイヤーを分けておくと、後で何かと便利だったりします。
こんな感じにフォルダっぽい感じでレイヤーを整理できたら、見やすいし作業しやすいですよね?

次回、「コンテナレイヤー」というレイヤーを整理するフォルダみたいな機能を勉強します!

ゼロから始めるAffinity3 Affinity中級者講座その23 に続く

書いてる人

検索

最新の投稿

ゼロから始めるAffinity3 Affinity中級者講座その22 手書きイラストの読み込み方

ゼロから始めるAffinity3 Affinity中級者講座その21 ベクター塗りつぶしツール の続き

ゼロから始めるAffinity3 Affinity中級者講座その22 手書きイラストの読み込み方

人気の投稿

Twitter(X)

アフィリエイトについて

このサイトはアフィリエイト広告(Amazonアソシエイト含む)を掲載しています。

QooQ