退屈ブレイキング

マンガ、ゲームとiPad Pro関連を中心に、世の中にある素敵なものをじっくりねっとり伝えるブログ。

Powered by 複眼RSS

Procreateの機能と使い方、効率よく絵を描く方法を徹底解説!【2017年度版】

はじめに

Procreate

Procreate

  • Savage Interactive Pty Ltd
  • エンターテインメント
  • ¥1,200

こんにちは!procreateを使い続けて
1年半が経過したdaimaです。
みなさんはprocreateで
楽しくお絵描きしてますか?

www.taikutsu-breaking.com

今回は、前回のProcreateの記事のから
さらに一段ステップアップして、
新たに追加された最新機能や、
より効率的に絵を描くための便利機能

なるべく要点を絞って簡潔に
お伝えしていきたいと思います。

基本的な作画の手順から、
新たに追加されたおすすめのブラシ
意外に難しいグラデーションの作成法
知って便利なレイヤーマスクの使い方
そしてレイヤーの合成モードを活用した
陰影付けのテクニックまで
とにかく私自身が体験して
これだけは知っておけ!と感じた
代表的な機能を一通り網羅しています。

それではどうぞ!

制作環境について

今回のモデル

f:id:ama46572222:20171119132807j:plain
(東方深秘録カットイン - イザヨイネットより引用)

今回は、東方地霊殿より、
EXボスの古明地こいしちゃんを
描いてみたいと思います。

こいしちゃんは、
人の心を読む能力を持つ妖怪でありながら、
その能力のために周囲から嫌われたため、
自ら心を読む第三の目を
閉ざしてしまったという
ちょっと可哀想な
設定をもつキャラクター。

そんな背景もあって、
可愛いだけでなく、ダークさも
混じったイメージで描かれることも
多いキャラクターですね。

下絵を用意する

f:id:ama46572222:20171119121222j:plain

前回と同じく、今回も紙と鉛筆で
簡単な下絵を作成しました。

下書きからデジタルでいけるぜ!
という方はこちらをクリックして
線画作成の行程までスキップしてください。


新規キャンバスを作成する

続いて、作成した下書きを
procreateに取り込みたいと思います。

f:id:ama46572222:20171119144752p:plain

procreateを起動し、
ギャラリー画面右上の+ボタンをタップ。
今回は下絵をスケッチブックに縦描きしたので
キャンバスサイズも、
縦方向のスクリーンサイズ(1,536×2,048)で
作成しました。

ここで気をつけていただきたいのですが、
私の知る限り、現在のprocreateでは
描画途中でキャンバスサイズを
変更することができません。

余裕を持って気持ち大きめの
キャンバスサイズを用意するのが得策ですが、
procreateではキャンバスが大きいほど
使えるレイヤーの数が減ってしまう罠があり、
あまりに大きすぎるキャンバスサイズを選ぶと
今度はレイヤーのやりくりに苦労します。

例えば今回のキャンバスサイズでは
レイヤーを60枚まで作成できますが、
それより大きなA4サイズで
キャンバスを作成した場合は
19枚までしか
レイヤーを作成することができません。

制作途中でレイヤーが足りなくて
困ってしまうことのないように、
キャンバスサイズの選定は、
事前によくよく吟味して
決定することをおすすめします。
(よほど凝ったものでなかれば
60枚もレイヤーが使えれば
大概問題はないと思いますが…)

f:id:ama46572222:20171119150513p:plain

新規キャンバスが作成されました。
各ボタンの配置は前回記事時点と
全く同じですのでこちらから
機能と配置を確認してみてください。


下絵をレイヤー内に読み込む

f:id:ama46572222:20171119151422j:plain

撮影した画像を読み込む際は、
画面左上のアクションツール(レンチのアイコン)
をタップし、さらに「写真を挿入」を選択します。

f:id:ama46572222:20171119152638j:plain

カメラロールから
下絵を取り込むことができました。
ちなみに撮影した下絵は、
下絵として使いやすいように、
事前にレタッチアプリ(AFFINITY PHOTO)で
コントラスト補正をかけ
線画を強調させてあります。

続いて、画面右上の
レイヤーツール(四角が重なったアイコン)を
タップし、レイヤーウィンドウを開きます。

f:id:ama46572222:20171119153109j:plain

そして、今呼び出した
下絵が入っているレイヤーをタップし、
「名称変更」をタップ。
テキスト入力画面が表示されるので
ここは「下絵」と名前をつけておきましょう。

レイヤーに名前をつけるのは少々面倒ですが、
これをやっておかないと
後ほど色々苦労するので(体験談)
レイヤーの新規作成時には
必ず名前付けを行うように
習慣つけておくことをおすすめします。


線画を作成する

前のタスクで読み込んだ下絵を元に、
線画を作成していきます。

f:id:ama46572222:20171119161700j:plain

まず、線画を見やすくするために、
下絵レイヤーの不透明度を
60%ほどに落としておきます。
レイヤーの透明度の変更する際は、
レイヤーを二本指でタップすると
素早く簡単に行うことができます。

続いて、画面右上の
ペンツール(ペンのアイコン)をタップし、
線画に使用するペンを選択します。

かっちりしたシャープな線が引きたいので、
ここではインキングペンの中から、
ベーシックなスタジオペンと、
筆圧で太さの変わらない
製図ペンをメインに使っていきます。

f:id:ama46572222:20171119161645j:plain

また、線の視認性を上げるために、
画面右上のカラーピッカーをタップし、
塗りの色を赤色のような
目立つ色にしておきます。
(線の色は後から簡単に変更可能です)


手ブレはストリームラインで対処!

準備が整ったところで
さっそく線を引いていくのですが、
ペンタブレットで線を引く際に
多くの方が悩まされるのが、
手ブレによる線の乱れです。

特に長い曲線を描く場合、
手ブレは厄介な難敵となるのですが、
procreateにはありがたいことに、
自動で手ブレを補正してくれる
ストリームラインという機能が
用意されています。

f:id:ama46572222:20171119162522j:plain

ストリームラインの設定は、
まずペンツールを開き、
使用するペンの名前部分をタップ。
さらに、ストロークのプロパティ内の
ストリームラインのスライドタブを
動かすことで変更することができます。
(初期状態では0(=OFF))

f:id:ama46572222:20171119170219j:plain

ストリームラインを使用すると、
このように長い直線であっても
比較的手ブレを抑えて描くことができます。

もっとも、フリーハンドである以上、
ベジェ曲線で描いたような
完璧な曲線を描くのはやはり難しいです。
これは、ぜひ今後のアップデートで
実装をお願いしたいところですね。


線画が完成!

f:id:ama46572222:20171119171200j:plain

2時間ほど頑張って、
全ての線を引き終えました。

次に、一時的に赤色になっている
線の色を本来の色へ変更します。

線画レイヤーをタップし、
表示されたメニュー内の
「選択」をタップします。

f:id:ama46572222:20171119171829j:plain

これで、線の部分だけが
選択された状態になったので、
続いて、画面右上の
カラーピッカーをタップし、
線に使う色を選択します。

再度レイヤータブに戻り、
今度はメニューから
「レイヤーを塗りつぶす」を選択。

f:id:ama46572222:20171119171851j:plain

これで、線の色が黒に変更されました。
最後に、上部のメニューバーから、
範囲選択ツールアイコン(ひも状のアイコン)を
タップし、選択状態を解除します。


下地色をベタ塗りする

続いて、作成した線画の上に、
下地となる色をベタ塗りしていきます。

ベタ塗りで大事なことは
範囲選択ツールを使いこなすこと。
そこさえ押さえてしまえば
驚くほど簡単に
塗りが進められるようになりますよ。

範囲選択ツールを有効活用すべし!

ベタ塗りを効率的に進めるには、
範囲選択ツールを活用します。

試しに、肌の色を塗ってみましょう。
まず、画面上部の
選択範囲ツールアイコンをタップし、
さらに画面下部に表示された
オプションメニューから、
「自動」をタップして選択します

f:id:ama46572222:20171119172740j:plain

続いて、レイヤー内の
色を塗りたい場所をタップすると、
タップした位置を起点とした
選択範囲が作成されます。

また、顔と手など、
離れた位置についても、
順次タップして
複数の範囲選択が可能です。

f:id:ama46572222:20171119172758j:plain

範囲の選択が完了したら、
レイヤーメニューをタップして、
肌パーツベタ塗り用の
新規レイヤーを作成します。

今は肌の色を塗りたいので、
作成したレイヤーには「肌」という
名前をつけておきました。

続いて、カラーピッカーから
肌を塗るために使う色を選択し、
先ほど作成した肌レイヤーをタップして
メニュー内の「レイヤーを塗りつぶす」
を実行します。

f:id:ama46572222:20171119173103j:plain

すると、選択した範囲内が
現在の色で綺麗に塗りつぶされました。

あとはこの手順を繰り返し、
髪、上着、スカート、靴、リボンなど
各パーツのベタ塗りを進めていきます。

f:id:ama46572222:20171119173640j:plain

その際、使った色を
カラーピッカーウィンドウ下部の
「パレット」に保存しておくと
あとで色が再利用できて便利です。

ベタ塗りが完了!

f:id:ama46572222:20171119174845j:plain

1時間ほどで全てのパーツの
ベタ塗りが完了しました。
続いて、今塗った色を元に、
陰影(ディティール)を詰めていきます。


陰影(ディティール)を詰める

先ほど作成したベタ塗りの上に、
陰影と質感を加えていきます。

彩色は一種の腕の見せ所であり、
ここの良し悪し次第で、
最終的な作品のクオリティが
概ね決定されるといっても
過言ではない重要なステップですので
これまで以上に気合を入れて進めていきます。

影を描き込む

影の付け方は
絵のタッチによって様々ですが、
今回は主にペイントブラシと
エアーブラシを使い、
適度に境界をぼかした
自然な彩色を目指します。

ベタ塗りの時と同じく、
まずは肌に影をつけてみましょう。

まず、ベタ塗りの行程で作成した
「肌」レイヤーの一つ上に
「肌 影」レイヤーを
新規作成し、加えて「肌」レイヤーを
範囲選択しておきます。

f:id:ama46572222:20171119175626j:plain

続いて、肌部分を指で長押しして
スポイト機能を実行し肌の色を取得。
さらに、その色を元に
明度を少し落として、
影に使う色を用意しました。

f:id:ama46572222:20171119175611j:plain

使用するペンには、ペンサイズ10%前後、
不透明度60%前後の円ブラシを選択。
どこから光が当たっているかを考え、
(今回のケースでは画面左上)
それに塗る対象のカタチを考えて、
自然になるような位置に
影を軽いタッチ重ねていきます。

もし塗りすぎてしまった場合は、
消しゴムツールを使います。
また、消しゴムツールも、
塗りと同様ブラシの形状や
透明度を任意で調整可能です。

影を塗るなら『アルファロック』もアリ

綺麗にはみ出さずに
色を塗る方法として、
procreateでは選択範囲の他に
アルファロックという
便利な機能も用意されています。

アルファロックは、
レイヤーメニュー内の
『Alphaロック』をタップすることで
ON/OFFを切り替えることができます。
(初期状態ではOFF)

f:id:ama46572222:20171210150117j:plain

レイヤーがアルファロックされると、
すでに塗られた部分以外が保護されて、
影付けなどをはみ出さずに
スムーズに行うことができます。

『レイヤーの選択』と比べると、
こちらは用途が限定的な分、
手軽に素早く使用でき、
範囲選択時の斜線も入りません。

アルファロックは対象の
レイヤーにしか効果がないため、
影とベタでレイヤーを分けた今回は
あまり出番がありませんでしたが、
procreateを使うなら
必ず覚えておきたい機能の一つですね。


レイヤーの合成モードを活用する

デジタルで色を塗る際に
是非知っておきたいのが、
レイヤーの合成モードです。

合成モードとは、
レイヤーの色が、それより下層の
他のレイヤーの色と重なった時の
色の処理方式のことです。

f:id:ama46572222:20171119180523j:plain

procreateでは、
レイヤーウィンドウ右の
アルファベット(初期値はN)を
タップすることで合成モードの
選択ウィンドウを開くことができます。

せっかくですので、
今回の制作でも使用した合成モードを
いくつかご紹介します。

合成モード「乗算」

合成モードが「乗算」は、
選択中レイヤーの色と
下層レイヤーの色を
掛け合わせて合成します。

その性質から、出来上がる色は
元の色より暗くなる性質があり、
主に影付けに便利な合成モードです。

合成モード「スクリーン」

合成モード「スクリーン」は、
選択中レイヤーの色を
下層レイヤーの色を反転させた上で、
掛け合わせて合成します。

乗算と真逆の効果であり、
元の色より明るくなる性質を利用して、
ハイライトの描画や
光、炎といったエフェクトの表現に
よく使われます。

合成モード「焼き込みカラー」

合成モード「焼き込みカラー」は、
基本の色相を保ったまま、
重ねた色を暗くします。

コントラストを高める効果があり、
今回は後ほど解説する背景色の
色味の調整に
少し利用しています。


多種多様なブラシの使い分け

現在のバージョンのprocreateには、
100種を超えるブラシが
デフォルトで実装されていて、
さらに、ストロークの入り抜きや、
にじみ具合などの設定を
ブラシごとに細かく
カスタマイズすることも可能です。

ここで今回役立ったブラシを
いくつか抜粋してご紹介します。

f:id:ama46572222:20171119182022j:plain

輝度ブラシのライトペンは、
レーザー光や金属光沢を
描く際に便利なブラシです。

輝度ブラシには他にも、
並んだ線状の光を描くパルスや、
光の粒子の表現に便利な微光など、
エフェクト描画に
役立つブラシが揃っています。

f:id:ama46572222:20171119182006j:plain

ブーツの陰影には
やや大きめ(10%前後)のエアブラシを
軽く塗り重ねて表現しました。

エアブラシは柔らかい表現ができるので
自然な影付けには欠かせないブラシです。

f:id:ama46572222:20171119181953j:plain

第三の眼のヒモ部分については、
スプラッターブラシやフリックブラシで
蛍光色をまぶして彩色してみました。

procreateの水彩ブラシは
にじみ具合が絶妙で、
複数のブラシを重ねて塗ることで
様々な面白い表現を生み出すことができます。


レイヤー数が上限に達してしまったら…

もしも作業中に
レイヤーの使用数が上限に達してしまったら、
レイヤー同士を結合させて
使用レイヤーを減らしましょう。

レイヤーの結合は、
レイヤーウィンドウの
対象レイヤーをタップし、
「下のレイヤーと結合」
タップして行えるほか…

f:id:ama46572222:20171119182936j:plain

このように、
複数のレイヤーを集めるように
二本指でピンチして、
素早くレイヤー結合を
行うこともできます。

ただし、合成モードの異なる
レイヤー同士を結合してしまうと、
意図しない色表示になってしまうので、
基本的に、同じ合成モード同士の
レイヤーを結合するようにしましょう。

キャラクターの陰影付けが完了 !

f:id:ama46572222:20171119183154j:plain

一通りの陰影付けが完了しました。

集中して絵を描いていると、
ズームでパーツを描いているときは
良い感じにできていたのに、
キャンバスを引いて全体で見ると
何だか思ったより微妙…

なんてことが良くあります。

そんなときは、
こまめに絵全体を確認するようにしたり、
パーツごとの塗りの進行具合を
ある程度揃えるようにしたり、
適時数時間の休憩を挟んで
脳をリセットすることが有効です。

shikisai-fleur.com

また、色のバランスに関しては
ジャッドの色彩理論なども知っておくと
色選びに迷った時の参考になりますよ。


背景を描く

今回背景については
下絵の段階で構想がありませんでしたが、
背景もまた主役を引き立てる
大切な要素の一つですので、
これまで同様に様々なテクニックを使いながら
絵の雰囲気に沿ったものを描画していきます。


おおまかアタリをとっておく

f:id:ama46572222:20171119184732j:plain

背景を書き込む前に、
床と壁面を区別するための
簡単な色分けをしておきます。。

ビル群や建物内部などを描こうと思うと、
パースや透視図法など
色々考えなくてはならないのですが、
今回はあまりその辺を
考えないで済むような
簡単な構図の背景にしたいと思います。


カリグラフィペンでツタを描く

小道具その1。
背景を飾る小道具として、
ツタのモチーフを
背景の壁一面に
描き加えることにします。

ここでは、にじみがなく、
滑らかな線を引くために、
カリグラフィブラシ内の
モノラインペンと細かい線を引くための
製図ペンを併用します。

f:id:ama46572222:20171119194133j:plain

先ほどつけたアタリを意識しつつ
ひたすらツタと葉っぱと蔓を
書き足していきます。
画面右上と画面下部には
別のオブジェクトを描く予定なので
今は描かずに空けてあります。

葉っぱの色を緑一色にせず、
赤や藍色、黄色なども混ぜているのが
ちょっとしたポイント。
色調が違ってもトーンが同じであれば
それなりに馴染んでくれます。


ipadマルチタスク機能を併用する

ios11には画面を分割して
同時に複数のアプリを扱える
マルチタスクという機能が存在します。

f:id:ama46572222:20171119194715j:plain

この機能を使えば上記のように
画面の半分でブラウザを開いて
参考画像を表示させ、
もう片方でprocreateを開き、
参考画像を見ながら絵を描くことができます。

絵を描くときは、資料を見ながら
描きたい場合も多いですので、
この機能は大変嬉しいですね。


バスケットと葉っぱを描く

f:id:ama46572222:20171119201123j:plain

小道具その2。
画面右上に
吊るされたバスケットと
樹木の葉を描き加えました。

バスケットは製図ペンで、
樹木の葉は水彩ブラシを
重ねて塗って表現しています。


淀んだ水面を描く

f:id:ama46572222:20171119202415j:plain

小道具その3。
今度は画面下部に
淀んだ水を追加しました。

水の部分は最初に暗い緑を塗り、
その上に不透明度を下げた円ブラシで
明るい緑を重ね塗りして描画、
さらに、水面上の壁面に、
エレメントブラシ内の
「水彩」ブラシで、水面から
反射する光の表現を描き加えています。


合成モード「スクリーン」で光の表現を追加

f:id:ama46572222:20171119203157j:plain

絵の雰囲気を高める狙いで、
画面左上から差し込む光と
その光が埃に反射して
キラキラ光る様子…
いわゆるチンダル現象的なものを
描き加えました。

差し込む光は、
不透明度を落とした円ブラシで
直線を引いて作成しました。
ちなみに直線は、ペンツール使用時に
キャンバス長押しで使用可能。

円状の丸いキラキラは、
ライトブラシの「ボケライト」で
描いた白い縁を
合成モード「追加」で
重ねることで表現しています。


スプラッタブラシでインク跳ねを追加

背景もだいぶ賑やかになってきましたが
ここでさらに一工夫加えます。

水彩ブラシ内の「マッドスプラッシュ」で
大きさと色を変えつつ
ちょいちょいっと連打してみると…

f:id:ama46572222:20171119204729j:plain

インクを壁にぶちまけたような、
面白い表現を作ることができました。
さらに、足元には
「少しウェットなブラシ」で
インクが垂れたような表現を追加しています。

f:id:ama46572222:20171119204757j:plain

合成モードと透明度を調整して
馴染ませた結果がこんな感じ。
サイケデリックな印象を
加えることができました。


画面全体のトーンを調整する

背景の描画も概ね完了したら、
仕上げとして、全体の色味を
調整していきます。

f:id:ama46572222:20171119210013j:plain

背景のコントラストを上げ明度を落とし、
さらに画面隅にエアブラシで黒を乗せて、
全体のバランスを引き締めました。

画面隅の明度を下げたことで、
絵全体にメリハリが生まれ、
また主役である中央のキャラクターが
より際立ったかと思います。

主役を目立たせたい場合は、
主役以外を目立たなくして
相対的に主役を目立たせる手も
あるということですね。


新機能!レイヤーマスクの使い方

procreateではver4.0.0から
新たにレイヤーマスク機能が追加されました。

このレイヤーマスク、
一体どういうものか簡単に説明すると、
特定のレイヤーだけを覆う
マントのような機能を持った
特別なレイヤーを作る機能です。

レイヤーマスクは、
レイヤーメニュー内の『マスク』を
タップして作成します。

f:id:ama46572222:20171210150735j:plain

試しに、キャンバスを覆う
白色で塗ったレイヤーを作成し、
そのレイヤーにマスクを追加して
マスクを黒色のペンで塗ってみると、
このように塗られた部分の描画が
消しゴムツールで消したように
見えなくなりました。

ただし消しゴムツールと違い、
レイヤーマスクは親の描画部分を
あくまでも隠すだけなので、
レイヤーマスクの塗りを消すか、
レイヤーマスクを非表示にすることで
隠した部分をすぐに
再表示させることができます。

後でまた使うかもしれないけど
一旦非表示にしておきたい
部分がある場合には
このレイヤーマスクが活躍します。


f:id:ama46572222:20171210151242j:plain

ちなみに、選択範囲から
レイヤーマスクを作成することもでき、
これを利用すれば読み込んだ素材から
選択範囲を作成して上記のような
切り抜きを作ることもできちゃいます。
このようにレイヤーマスクは使い方次第で
様々な応用ができる面白い機能なのです。

ただし、レイヤーマスクは
それ自体一つのレイヤーとして
カウントされるので、
レイヤーの残り枚数には
気をつけて利用してください。


procreateでグラデーションを作成するには?

procreateには現状、
グラデーションツールが存在しません。

ですが、ぼかしツールを駆使すれば、
擬似的なグラデーションを
作成することは可能です。

試しに、床と画面奥の壁に
奥行きを表現するための
グラデーションをかけてみましょう。

まず、新規レイヤーを作成し、
続いて、そのレイヤー全体を
黒色で塗り潰してしまいます。

さらに、自由変形ツールで
レイヤー内の塗りつぶした色の高さを
半分ほどに縮めます。

f:id:ama46572222:20171119210829j:plain

そして、調整ツール内の、
「ぼかし(ガウス)」を選択し、
指で画面を右方向へにスライドさせ、
レイヤー内の色を引き伸ばします。

これで、下から上へ濃さが増す
簡単なグラデーションを
作成することができました。

f:id:ama46572222:20171119210852j:plain

そして、作成したグラデーションを
サイズ調整して床に配置し、
奥に行くほど暗くなる描画が実現できました。
壁の方には、床と同じ手順で
作成したグラデーションを
180度回転させて配置しています。

ただ、この方法はやや煩雑で、
円形グラデーションなども作成不可です。
今後のバージョンアップによる
グラデーション機能の追加を
期待したいところですね。


イラストが完成!

f:id:ama46572222:20171119211302j:plain

背景も描き終わり、
今回はひとまずここで完成とします。

作品の良し悪しはともかく、
今回新しい機能やブラシを試す中で
改めてprocreateは描く人のことを
よく考えて作られたアプリだなという
思いを抱かされました。

次は、手順や画風を変えて
全く違った題材に挑戦してみたいですね。


あとがき

ここまでお付き合いいただき
誠にありがとうございました。

今回改めて感じたことですが、
procreateというアプリは、
UIデザインが本当に秀逸で無駄がなく、
デジタル絵の入門にはこれ以上ない
ツールだと思います。

www.youtube.com

プロのクリエイターの中には
このようにprocreateを駆使して
目を見張るような
素晴らしいイラストを描かれる方もおり、
その可能性の幅広さには本当に
心がワクワクさせられますね。

余談〜『絵を描くこと』について

私は趣味として
webコーダーの仕事の余暇に
気分転換がてら絵を描いていますが、
それでもやっぱりどうせ描くなら
良いものを作りたいという気持ちが強く、
理想と自分の能力のギャップに
思い悩むことも少なくありません。

ですが、時間をかけて試行錯誤して
それで自分の上達が感じられた時には
他では味わえない喜びがあるのも事実です。

これからも日々勉強と思いながら
臆さずどんどん新しい表現に
チャレンジしていきたいものです。
それでは、またの機会に。