公開日: 更新日:

FireAlpacaとマウスだけで絵を加筆修正する手順

約 12 分で読めます

お絵描きソフトの機能を知っていれば、マウスだけで絵の加筆修正はできます。

FireAlpaca の画面。真ん中のキャンバスに、背景を透明にしたキャラクターの画像
FireAlpaca の画面

前の記事では、AI で生成した画像に手を加えて配信用のアバターを作る手順を書きましたが、お絵描きソフトの説明は省略しました。PNGTuber でアバターを用意したい人の中には、お絵描きソフト未経験の人も結構いるようなので、今回は『マウスでお絵描き』することに軸をおいた話になります。Peraravatar+ で使うアバターを例に進めますが、基本的には FireAlpaca の使い方になります。もちろん他のお絵描きソフトにも基本的には同じ機能が備わってるので応用も利きます。

Peraravatar+で配信用アバターを作る手順 PNGTuber の Peraravatar+ で配信用のアバターを作る。AI で生成した1枚絵からのっぺらぼうのベースを作り、プリセットで動かす初級編、目と口のパーツを自分で用意する中級編、胸とアクセサリーを揺らす上級編まで。 GyunGyun×Create (gyungyun.com)

今回は、Peraravatar+ で使うアバターの用意をマウスだけでやる方法を説明します。マウスでお絵描きをする所謂『マウサー』と呼ばれる人もいるので、使いこなせばペンタブなしでも大抵のことはできます。私も元マウサーです。めげずにチャレンジしてみてください。タブレットで ibisPaint を使ってる人はそっちで十分対応できると思うので自力で頑張ってください。

インストール

FireAlpaca は無料で、個人利用でも商用利用でも使えます。

  1. FireAlpaca のダウンロードページを開く
  2. Windows 版(Windows 10 以降)か Mac 版(macOS 12 以降)をダウンロードする
  3. ダウンロードしたファイルを開き、画面の案内に沿ってインストールする
有料の FireAlpaca SE もありますが、この記事の作業はすべて無料版でできます。

画面の見方

FireAlpaca を起動すると、このような画面が表示されます。

FireAlpaca を起動した直後の画面。①左端のツールのアイコン、②カラーとカラーパレット、③ブラシコントロールやブラシなどのウィンドウ、④メニューの下のツールの設定、⑤右下のレイヤーが赤い枠で囲まれている。真ん中は灰色
FireAlpaca を起動したところ

自分用にブラシサイズなどの配置を変えた状態のスクショなので、細かいメニューの配置などは↑の画像と違うと思います。まずはざっくり何があるか確認してください。

場所すること
①ツールブラシ・消しゴム・選択などのツールを切り替える
②カラー・カラーパレット描く色を選ぶ
③ブラシコントロール・ブラシなどブラシのサイズや種類、不透明度などの設定
④ツールの設定選んでいるツールの設定。ツールを切り替えると項目が変わる
⑤レイヤーレイヤーを足したり、表示と非表示を切り替えたりする

①のアイコンは、どれが何のツールなのか覚えなくても大丈夫です。アイコンにカーソルを合わせると、ツールの名前が表示されます。

左端の筆のアイコンにカーソルを合わせ、「ブラシツール」と名前が表示されている
カーソルを合わせると、ツールの名前が表示される

誤って各メニューの右上の✕ボタンを押してウィンドウを閉じてしまったときは、「ウィンドウ」メニューから再度表示できます。

画像を読み込む

まずは AI で生成した画像を開きます。

「ファイル」メニューの「開く」で画像を選ぶか、フォルダから画像を FireAlpaca の画面へドラッグ & ドロップ

FireAlpaca で画像を開いた画面。真ん中のキャンバスに、白い背景の上に立つ、紫の髪に猫耳とメイドのヘッドドレスを付けたちびキャラの女の子。右下のレイヤーには「レイヤー1」が1枚
画像を開いたところ。今回は前の記事のキャラのデフォルメを使います

背景を消す

最初に消し忘れを見つけやすくするために、画像の下に濃い色で塗ったレイヤーを置きます。

  1. レイヤーのウィンドウの一番左のボタンを押して、新しいレイヤー(レイヤー2)を追加する
  2. レイヤー2 をドラッグして、画像のレイヤー(レイヤー1)の下へ動かす
レイヤーのウィンドウ。キャラクターの画像の「レイヤー1」の下に、空の「レイヤー2」が追加され、選択されている
新しいレイヤーを画像のレイヤーの下へ動かしたところ
  1. レイヤー2を選択した状態で、左端のバケツのアイコン(バケツツール)を選ぶ
  2. カラーで、キャラクターに使われていない色味の濃い色を選ぶ。今回は暗めの緑にしました
  3. 上のツールの設定の「参照」を「アクティブレイヤー」にする
バケツツールを選び、カラーで暗めの緑を選んだ状態。ツールの設定の「参照」のリストが開き、キャンバス・アクティブレイヤー・指定レイヤーのうちアクティブレイヤーを選んでいる
「参照」を「アクティブレイヤー」にする
  1. キャンバスをクリックする。新しいレイヤーの全体が緑で塗られます
レイヤーのウィンドウ。「レイヤー1」の下の「レイヤー2」のサムネイルが緑一色になっている
下のレイヤーの全体が緑で塗られたところ

ここから背景を選択していきます。

  1. 左端の魔法の杖のアイコン(自動選択ツール)を選ぶ。ツールの設定の「参照」は「キャンバス」にする
  2. 背景をクリックする

「許容値」はクリックした色にどのくらい近い色まで一緒に選択するかの値です。AI で生成した画像の白い背景は、よく見ると真っ白ではなく少しずつ色が違うので、許容値が1のままだと背景がまだらに選択されます。

許容値1のまま自動選択ツールで背景をクリックした画面。背景の左側だけが、白と黒の点々のまだらに選択されている
許容値1のまま選択したところ

この値を少しずつ上げて、背景だけが綺麗に選択される値を探します。上げすぎると、白い服や羽根まで選択されるようになります。選択し直すときは、Ctrl + D で選択を解除してから背景をクリックし直します。今回は許容値を7にしました。

許容値7で背景をクリックした画面。キャラクターの縁に沿って点線が出て、背景全体が選択されている
許容値7で選択したところ

それでも細かい選択漏れが残るので、選択ペンに持ち替えて選択漏れを塗っていきます。

  1. 左端の魔法の杖のすぐ下のアイコン(選択ペンツール)を選ぶ。選択ペンにすると、選択している範囲に色が付いて表示されます
  2. マウスのホイールで拡大縮小して、縁を見て回る
  3. 色が付いていない背景の白(選択漏れ)を見つけたら、クリックで塗って選択範囲に足す。細かい箇所はブラシサイズを変えながら塗ります。間違えたときは Ctrl + Z で戻します
やり直し: 戻しすぎたときは Ctrl + Y でやり直せます。
選択ペンツールで足元のリボンのあたりを800%に拡大した画面。背景の選択範囲が赤く表示され、靴下の縁の外側に白い点が少し残っている
靴下の縁の外側に選択漏れが残っている

線同士の隙間が狭い箇所は要注意です。角の奥まで選択されないので手動で塗ります。

選択ペンで拡大した、リボンと髪の端。背景は赤く選択されているが、線同士が鋭い角度で交わる角の奥に白が残っている
狭い隙間は自動では選択されない
  1. レイヤーのウィンドウで画像のレイヤー(レイヤー1)をクリックし、Delete を押して背景を消す。レイヤー2 を選択したまま Delete を押すと、レイヤー2 の緑の方から選択した範囲が消えるので要注意
  2. Ctrl + D で選択を解除する

背景が消えて、下の緑が見えるようになります。ただし、髪の毛同士の隙間のような、線に囲まれた背景はまだ白いまま残っています。

背景を消して、下の緑のレイヤーが見えている画面。キャラクターの周りは緑になったが、髪の毛同士の隙間などには白い背景が残っている
背景を消したところ。髪の毛同士の隙間の背景はまだ消えていません
  1. 髪の毛の隙間も、自動選択ツールで選択し、選択ペンで選択漏れを塗って、Delete で消します。手順 7〜13 の繰り返しです
複数の箇所を選択する: 自動選択ツールで Shift キーを押しながらクリックすると、複数の箇所を同時に選択できます。Ctrl キーを押しながらクリックすると、その箇所を選択から外せます。

Delete で消したのに、うっすら色が残ることがあります。原因はアンチエイリアスです。アンチエイリアスは、縁に透明度のある色を足して滑らかに見せる機能です。

透明な背景に描いた黒い縦線2本の拡大。左のアンチエイリアスがオンの線は縁に灰色が入って滑らか、右のオフの線は縁がギザギザ
左がアンチエイリアス ON、右が OFF

選択ペンでもアンチエイリアスが効いていて、ON だと塗った箇所がうっすら選択された状態になります。うっすら選択された箇所は、Delete しても色が完全には消えずに残ります。

下の画像は、アンチエイリアス ON で選択ペン(ブラシサイズ1)で中央の1マスをクリックしたところです。1回だけだと、うっすら選択された状態です。クリックするごとに選択色が徐々に濃くなり、5回ほどクリックすると、アンチエイリアス OFF で塗ったのと同じ状態になります。

ピクセル単位まで拡大した画面。選択ペンで1回クリックした真ん中の1マスが、薄いピンクになっている
1回クリック
同じ場所を5回クリックしたあと。真ん中の1マスが濃いピンクになっている
同じ場所を5回クリック

アンチエイリアスはデフォルトで ON になっているので、必要に応じて OFF に切り替えてください。

ブラシツールを選んだときのツールの設定。スナップ、図形、対称の右に「アンチエイリアス (全体設定)」のチェックがあり、チェックが入っている
ツールの設定の「アンチエイリアス (全体設定)」
  1. 選択箇所を Delete で消したあとにまだ消し損ねた小さいエリアがある場合は、消しゴムツールで消します。
選択して消すか、消しゴムで消すか: やっていることはどちらも同じです。背景のように消したい範囲が広いときは、選択して Delete で消す方が楽です。細かい箇所はわざわざ選択する必要はないので、消しゴムで直接消します。
背景を消し終わった画面。髪の毛同士の隙間も含めて、キャラクターの周りがすべて下の緑のレイヤーの色になっている
背景を消し終わったところ
  1. レイヤーのウィンドウで緑のレイヤーを非表示にする
緑のレイヤーを非表示にした画面。キャラクターの周りの背景が市松模様になり、透明になっている
緑のレイヤーを非表示にしたところ
こまめに保存する: こまめに保存しておきましょう。読み込んだ画像は PNG のままなので、そのまま「ファイル」メニューの「保存」で保存すると、元の画像に上書きされ、レイヤーも残りません。最初の1回は「ファイル」メニューの「名前をつけて保存」で、FireAlpaca の形式(.mdp)を選んで保存してください。2回目からは「保存」(Ctrl + S)で .mdp に上書きされます。

絵の完成度を上げる

AI で生成した画像は、よく見るとおかしい箇所があります。今回は、赤丸の箇所が気になりました。こういう細かいところが気にならない人はこの手順はスキップして大丈夫です。

背景を消したキャラクターの画像に、気になる箇所が赤丸で囲まれている。右の猫耳、両方の眉と前髪、右の頬の横、チョーカーの金具、左肩の髪の先、右肩の髪と羽の間
今回気になった箇所

遠目に見るとほとんど分からないので、そのままでも構いません。顔面ドアップの雑談配信にこのアバターを使うつもりの人は直したほうがいいとは思います。個人的には、ChatGPT で生成した画像は線のガタつきが気になります。特に前髪。他にも、何かを描きかけてやめたような謎の線が残っていたり、髪の毛が崩れていたり、A型人間には耐え難い部分が多々あります。あ、ちなみにA型じゃないです。

前髪のガタつきを直す

  1. 画像のレイヤーの上にレイヤーを追加する
  2. 左端の一番上の筆のアイコン(ブラシツール)を選ぶ
  3. マウスのホイールで拡大する
  4. 塗りたい箇所の周辺で右クリックで色を取る。ブラシツールのまま右クリックすると、スポイトで色が取れます
  5. 取った色で、マウスでぽちぽち塗っていく。色が変わる箇所に来たら、また右クリックで色を取り直す

元の画像に直接塗らないので、失敗しても追加したレイヤーを消しゴムで消せば元に戻せます。前髪を部分的に修正してみるとこうなりました。

前髪と眉のあたりを600%に拡大した画面。前髪の線の縁がガタガタしている
直す前
同じ箇所を、上のレイヤーで塗って直したあとの画面。前髪の線の縁が滑らかになっている
直したあと

ぽちぽちじゃなくて線が引きたい場合は、ツールの設定の「手ぶれ補正 (全体設定)」の値をめっちゃ上げてください。Max の 100 にしても大丈夫です。こうすることでゆっくり線を引いてもガタつかなくなります。

ツールの設定の「手ぶれ補正 (全体設定)」のリストを開いたところ。0 から 100 までの値が並び、80 が選ばれている
手ぶれ補正の値は 0 〜 100 から選べる

試しに手ぶれ補正を 0・20・40・80・100 にして、マウスでハートを描いてみました。私のマウサー力が思ったより高くて分かりにくいかもしれませんが、値が大きいほど線が滑らかになります。ペンタブを使っている人は描きたい線の種類に応じて 0 〜 50 で調整する事が多いです。マウサーは手ぶれ補正0なんて使うとガッタガタの線になります。100にしてゆっくり線を引いてみてください。線がついてくるスピードは遅いですが狙った場所に滑らかに引けます。

手ぶれ補正を 0、20、40、80、100 にしてマウスで描いたハート5つ。中にそれぞれの値が書かれていて、値が大きいほど線のガタつきが少ない
左から手ぶれ補正 0・20・40・80・100 で描いたハート

更に、手ぶれ補正の隣にある「両端の筆圧をゼロにする」にチェックを入れると、線の描き始めと描き終わりが細くなるので、ペンタブで描いたような線になります。これを応用すると、マウスでもこんな目が描けます。

「両端の筆圧をゼロにする」にチェックを入れてマウスで描いた線。左は太さの違う弧が4本で、どれも両端が細くなっている。右は同じ線で描いた、まつげと瞳の輪郭の目
「両端の筆圧をゼロにする」にチェックを入れて、マウスで描いた線と目

手ぶれ補正を使っても微妙な線しか引けないという人は、図形の「曲線」を使います。

  1. ブラシツールを選んだ状態で、ツールの設定の「図形」にチェックを入れ、隣のリストで「曲線」を選ぶ
ツールの設定の「図形」にチェックを入れ、隣のリストを開いたところ。直線・折れ線・多角形・矩形・正方形・楕円・正円・スーパー楕円・曲線・閉じた曲線が並び、曲線を選んでいる
「図形」にチェックを入れて「曲線」を選ぶ
  1. 線を引きたいカーブを、クリックでなぞっていく

  2. ダブルクリックで確定する。選んでいるブラシの太さで線が引かれます

前髪の線に沿って、曲線をクリックでなぞっている画面。前髪の縁に沿って細いカーブが引かれている
前髪の線に沿って、クリックでカーブをなぞっているところ
図形の曲線で描き直した前髪の線。線は1色の濃い紫で、周りの髪の色と合っていない
曲線で描いた前髪の線

図形の曲線で引いた線には、「両端の筆圧をゼロにする」は効きません。描き始めから描き終わりまで同じ太さの線になります。

曲線は1色でしか描けないので、描いたあとで線の色を周りに合わせます。

  1. レイヤーのウィンドウで「透明度を保護」にチェックを入れる。線が描かれている箇所以外には、色が塗れなくなります
レイヤーのウィンドウ。線を描いたレイヤー4を選択し、「透明度を保護」にチェックが入っている
「透明度を保護」にチェックを入れる
  1. 周りの前髪の線の色を右クリックで拾って、部分的に塗る
前髪の線の色を塗り直したもの。根元は黒寄り、先端は薄紫
根元を黒寄り、先端を薄紫に塗ったもの

この手順で気になるところを全体的に直します。

気になる箇所を全体的に直したあとのキャラクターの画像。背景は透明
修正後

のっぺらぼうにする

元の画像の目と口を、肌の色で塗りつぶします。

  1. レイヤーのウィンドウで元の画像のレイヤーを選択し、「レイヤー」メニューの「複製」で複製する。ここからは複製した方で作業します
  2. ブラシツールのまま右クリックのスポイトで、目の周りの肌の色を取り、目の上にぽちぽち乗せていく。場所によって肌の色が違うので、その都度取り直します
目のあった箇所に、周りから取った肌の色をぽちぽち乗せた画面。目は消えているが、乗せた色の境目がまだらに見えている
目の周りの肌の色をぽちぽち乗せたところ
  1. そのままだと馴染まないので、ブラシのウィンドウで「ぼかし」を選び、ブラシコントロールの「ぼかしの強さ」を上げる
ブラシのウィンドウで「ぼかし」を選び、ブラシコントロールの「ぼかしの強さ」を 100 にしたところ
「ぼかし」を選んで、ぼかしの強さを上げる
  1. 乗せた色の上をなぞって、ぼかしで色同士を馴染ませる
ぼかしのブラシでなぞったあとの頬のあたり。乗せた色の境目が消えて、肌の色が滑らかにつながっている
ぼかしで色同士を馴染ませたところ
  1. 口も同じように消す
  2. レイヤーのウィンドウで元の画像のレイヤーと緑のレイヤーを非表示にする
  3. 「ファイル」メニューの「書き出し」から「書き出し」を選ぶ
「ファイル」メニューの「書き出し」にカーソルを合わせ、横に出たメニューの一番上の「書き出し」を選んでいるところ
「ファイル」メニューの「書き出し」
  1. 書き出し設定のファイル形式で「PNG (透過PNG)」を選び、「OK」を押す
書き出し設定のウィンドウ。ファイル形式で「PNG (透過PNG)」を選んでいる
ファイル形式で「PNG (透過PNG)」を選ぶ
  1. 保存する場所とファイル名を決めて、「保存」を押す
目と口を肌の色で消して、のっぺらぼうにしたキャラクターの画像。眉は残っていて、背景は透明
のっぺらぼうにした画像

目を切り出す

元の画像から、片目を切り出してパーツにします。

  1. レイヤーのウィンドウで元の画像のレイヤーを選択する
  2. 左端の点線の四角のアイコン(選択ツール)で、左目の周りをドラッグして四角く囲む
  3. Ctrl + C でコピーする
  4. 「ファイル」メニューの「新規作成」で、幅と高さを 200 にして、200 × 200 のキャンバスを作る
  5. Ctrl + V で、コピーした目を貼り付ける
  6. 貼り付けた目は元の画像の位置のままになるので、「レイヤー」メニューの「移動」から「中央に配置」を選んで、中央に移動する
200 × 200 のキャンバスに貼り付けた目。「レイヤー」メニューの「移動」にカーソルを合わせ、横に出たメニューの「中央に配置」を選んでいる
「レイヤー」メニューの「移動」から「中央に配置」
  1. 「ファイル」メニューの「書き出し」で、透過 PNG で保存する

切り出した目の周りに肌が残っていても、Peraravatar+ でベースの画像の目の位置に重ねれば馴染むので、綺麗に消さなくても大丈夫です。

他はマウスを使うことを除けば前の記事と同じです。

まとめ

  • 消したい範囲が広いときは選択して消し、細かい箇所は消しゴムで直接消す
  • 「許容値」はクリックした色にどのくらい近い色まで一緒に選択するかの値
  • アンチエイリアスは、縁に透明度のある色を足して滑らかに見せる機能
  • 細かい箇所は、マウスのホイールで拡大してぽちぽち塗る
  • 線を引くときは、手ぶれ補正の値を上げるか、図形の「曲線」を使う
  • 「透明度を保護」にチェックを入れると、描いてある箇所にだけ色が塗れる
  • レイヤーを分けて作業する。失敗しても、そのレイヤーを消せば元に戻せる
  • こまめに保存する

Contact

不具合報告・機能要望

「動かない」「こんな機能が欲しい」はこちらからお問い合わせください。

お問い合わせ ▶

お仕事・その他

お仕事のご相談など、その他のお問い合わせはメールでどうぞ。

メール ▶

感想・応援メッセージ

匿名でひとこと送りたい人向け。「使ってるよ」だけでも教えてくれると嬉しいです。

マシュマロ ▶

開発支援

サーバ代やドメイン代の足しに。新作のモチベになります。国内は OFUSE、海外は Ko-fi をどうぞ。