【デザイン学生必見!】
ポートフォリオをゼロから作ろう!

【差分イラスト】汗や効果の描き方を徹底解説forクリスタ初心者

記事内にプロモーションを含む場合があります
Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

CLIP STUDIO PAINT(クリップスタジオペイント)を使った差分イラストの描き方講座Part.5です。

当講座では汗や効果線、描き文字の追加について詳しく解説していきます。

では早速進めていきましょう!

バーグさん@S.D.L

前回のPart.4で一通りキャラが仕上がりました。
せっかくだからキャラ以外の個所で遊んでみようか。
まだ何か追加するのですか?
そろそろお腹がいっぱいなのですが。。。

江須出井 絵瑠

バーグさん@S.D.L

差分イラストに終わりは無いからね。
元気出して表現をさらに追加してみようじゃあないか!
ふぇ~い。

江須出井 絵瑠

汗の表現

バーグさん@S.D.L

汗を追加してみようか汗。
汁モノですね。
いや、別に汗かきたくないのですが。。

江須出井 絵瑠

バーグさん@S.D.L

んじゃ追加していきますー!
人の話を聞け~い!

江須出井 絵瑠

CLIP STUDIO PAINTを導入しましょう
当記事の内容を実践するにはCLIP STUDIO PAINT(クリップスタジオペイント)が必須です。
CLIP STUDIO PAINTが未導入の方はセルシス公式サイトからダウンロードしておきましょう。
通販サイトや量販店のパッケージ版より公式サイトのDL版の方が断然お得ですよ。

普通に描く

とてもシンプルで簡単な汗の描き方です。

STEP.1
ベースを描く
汗のベースとなる水滴を描きます。
白でそれっぽく描いてみましょう。

クリスタを未導入の方は公式サイト から入手しておきましょう。
STEP.2
不透明度を下げる
レイヤーの不透明度を60%くらいに下げます。
STEP.3
ハイライトを追加する
ハイライトを追加します。
白でちょこちょこっと描きます。
FINISH
影を追加して完成
水滴の下に濃い目の肌色で影を追加しておしまい。
シンプルな汗が簡単に表現ができました。

Photoshopのレイヤースタイルを使った液体表現

Photoshopのレイヤースタイルを使うと液体のベースを描く「だけ」で影とハイライトが自動で追加されます。事前にスタイルを登録しておくと一瞬で質感のある液体が作れます。

STEP.1
液体のベースを描く
Photoshopが必須です。
導入されていない方はAdobe公式サイトから入手しましょう。

汗の形をブラシで適当に描きます。何色で描いても構いません。
FINISH
スタイルを適用して完了
スタイルを適用。はい、おしまい!
簡単に液体表現ができます。
おまけ
質感調整も楽
後から一括で質感を変えることも可能です。

詳しい作り方は下記で解説しています。
サンプルPSDも配布中!
【Photoshop】レイヤースタイルで水滴や汗を作る方法【PSD有り】
Photoshopのレイヤースタイルの便利さ、チート級ですね。

江須出井 絵瑠

バーグさん@S.D.L

いやホントにチートだよね。汗だけじゃなくて黄金表現も簡単だよ。
他にも無料で配布されているレイヤースタイルを紹介しているから確認してみてね。
またフォトショでゲームUIを作る時にもレイヤースタイルが大活躍。
一家に1ライセンスPhotoshopがあるとその日からデザイナーになれるよ!
ところでクリスタとPhotoshopはどう違うのですか?

江須出井 絵瑠

バーグさん@S.D.L

ざっくり説明するとクリスタは「お絵描き特化型」Photoshopは「グラフィック作成全般何でも」かな。Photoshopなら写真加工、お絵描き、デザイン、簡単な動画等、総合的に制作が可能だよ。WEBやUIUX制作をやっている僕にはPhotoshopとIllustratorは超必需品、無いとお手上げ。
ちなみにクリスタで描いたイラストをフォトショで加工してる絵描きさんも多いよ。
クリスタだけでなくPhotoshopもあればイラスト制作が捗る事、間違いなし!
ほぇ~、私もPhotoshopに挑戦してみようかな。

江須出井 絵瑠

バーグさん@S.D.L

Photoshopの使い方Illustratorの使い方も詳しく解説しているから併せて見てね!
Photoshopがあると表現の幅が一気に広がる
クリスタだけでなく、Photoshopも活用されているでしょうか?
まだ導入されていない方はAdobe公式サイトのフォトプランから入手できます。
また、当サイトの ゼロから始めるPhotoshop では、初心者の方でもプロを目指せるフォトショの使い方を完全解説しています。

集中線を追加

クリスタなら勢いを出したいシーン等に使われる集中線を超簡単に作れます。
手描きなら大変な集中線がクリスタなら一瞬!

STEP.1
図形から集中線を選択
クリスタは導入されていますか?
まだの方はセルシス公式サイトから入手できます。

[ 図形(U) ] を選択します。
サブツールはサンプルでは [ まばら集中線 ] を選択します。
STEP.2
ツールプロパティを設定
ツールプロパティを設定します。
集中線の線の太さや長さ、密度等を設定できます。
STEP.3
ドラッグで集中線の中心を設定
集中線の中心をドラッグして描きます。
FINISH
完成
集中線が完成しました!
クリスタならドラッグ一つで簡単に集中線が描けます。
あっ、こういうの漫画で見た事ありますっ!
「ダーッ!」とか「ドンッ!」って感じ」の時に出す線ですよねっ!

江須出井 絵瑠

バーグさん@S.D.L

手描きだと中心に画鋲を刺して定規を当てて描くみたい。職人技すぎるよね。
でもクリスタなら誰でも簡単に「ダーッ!」とか「ドンッ!」って感じを描けちゃうんだ。フジタ先生ばりに。
努力?んなもんはクリスタEXがあれば不要!!
クリスタ、優秀すぎます!

江須出井 絵瑠

描き文字を追加

描き文字を追加してみるとまた一風変わった表現ができます。
クリスタを使って好きな文言を描いてみましょう。

【おまけ①】グラデーション文字の作り方

STEP.1
文字を描く
文字を描きます。

クリスタの導入がまだの方は公式サイト から入手できます。
STEP.2
レイヤーを追加
新規レイヤーを追加し、STEP.1で描いた文字に [ 下のレイヤーでクリッピング ] を適用します。
STEP.3
グラデーションを選択
[ グラデーション(G) ] を選択します。
サブツールは [ 描画色から背景色 ] を使ってみます。
STEP.4
描画色と背景色を設定
描画色と背景色を設定します。
左上の手前にある箱が描画色、右下の背面にある箱が背景色となります。
色を変更するとツールプロパティのグラデーションが自動で変わります。
FINISH
完成
グラデーションさせたい方向へドラッグするとグラデーションの完成です。

サンプルは上から下にかけてドラッグした例です。

【おまけ②】グラデーション文字にフチ線を付ける方法

STEP.1
文字レイヤーをコピー
文字レイヤーをコピーし、レイヤーの一番下に置きます。
STEP.2
境界効果を適用
レイヤープロパティの境界効果を適用し、[ フチの太さ ] と [ フチの色 ] を設定します。
FINISH
完成
完成です。

境界と文字の間に「微妙に元文字の塗りが入る」場合は「文字とグラデのレイヤーをコピーし、結合したレイヤー」に対して境界効果を適用するとキレイに作れます。
Photoshopのレイヤー効果は超高性能
クリスタでも文字の装飾はある程度可能です。
しかしPhotoshopなら「より簡単でより複雑」な装飾が可能です。
下記でPhotoshopのレイヤー効果を応用した金属表現の作り方を紹介しています。

エフェクトを追加

身体状況を表すようなエフェクトを追加して遊ぶこともできます。何を追加するかは貴方の自由。お絵描きで遊びましょう!
「ビクッ」表現
「ビクッ」となるような表現の際に、効果線を上から描き足すのではなく、体の線自体に効果を追加すると違った表現ができて面白いかもしれませんよ。
ちょ!こんなどうでもいい事の解説なんていらないでしょ!
妙な描き文字まで加えて…

江須出井 絵瑠

バーグさん@S.D.L

こういう「どうでもいい事」が案外大切なんです。
誰か助けて~

江須出井 絵瑠

他にも差分を追加

服を作成した時と同様の手順で他にも好きな衣装差分等を追加してみましょう。
何を追加しようが貴方の自由。遊んじゃいましょう!
何でわざわざスク水なんですか~!

江須出井 絵瑠

バーグさん@S.D.L

いるかな、と思って。。
いやいや、いらないでしょっ!
…はぁ、もう諦めました。。。

江須出井 絵瑠

次は最終回

バーグさん@S.D.L

といった感じでPart.5はこんなところかな。
次のPart.6で長かった初心者クリスタお絵描き講座も終わり。
完成画像の書き出しと+αのテクニックついて解説するね。
おつかれー!

後半は変態っぽい感じがしてましたけど。。。
とりあえずおつかれさまでしたー

江洲出井衣 絵瑠

 

バーグさん@S.D.L

次もぜってぇ見てくれよなっ!
ぜったい見てねっ!

江洲出井衣 絵瑠

Photoshopがあると表現の幅が一気に広がる
クリスタだけでなく、Photoshopも活用されているでしょうか?
まだ導入されていない方はAdobe公式サイトのフォトプランから入手できます。
また、当サイトの ゼロから始めるPhotoshop では、初心者の方でもプロを目指せるフォトショの使い方を完全解説しています。
クリスタを使った差分イラストの作成方法
クリスタとフォトショの違い

CLIP STUDIO PAINTとPhotoshopの違いと用途を具体例を交えて解説

タブレットの導入方法

初心者にオススメの液晶タブレット(液タブ)とペンタブ(板タブ)を解説&徹底比較


Part.1 導入&ラフ作成

差分イラストとは?
デジタルイラスト作成に必要な環境
基本操作とラフの作成方法

Part.2 線画&下塗り

ラフを下絵にした線画の作成方法
下塗りの作成方法
差分パーツのベースを作る

Part.3 塗り込み&自動着色

塗り重ねとぼかし、肌色表現
差分の落ち影作成の注意点
自動着色機能の紹介

Part.4 目の描き込み&仕上げ

目の塗り方、表現方法
パーツの組み合わせで表情を作る
細部の描き込みと仕上げ

Part.5 汗、集中線・効果、描き文字

汗や液体の表現方法
集中線や効果の追加
描き文字の表現方法とグラデーション

Part.6 書き出し トーン化 2Pカラー

キャラ絵の書き出しと命名
トーン化で漫画のような表現
2Pカラーを簡単に作る方法

OMAKE.1 キャラ絵を使ったバナー

キャラ絵を使ったスマホゲームのイベントバナーをゼロから作る方法

OMAKE.2 キャラ絵を使った痛車

キャラ絵を使った痛車をゼロから作る方法

OMAKE.3 キャラ絵を使ったゲームUI

キャラ絵を使ったスマホゲームUIをゼロから作る方法


画力向上への道(自習編)

画力を独学で上達させる4つの方法について解説

絵を学ぶ方法(学校編)

イラストの描き方を学校で学ぶメリットと方法について解説


ゼロから始めるPhotoshop

Photoshop未経験からプロを目指せるようにフォトショを徹底解説

ゼロから始めるIllustrator

Illustrator未経験からプロを目指せるようにイラレを徹底解説

SCROLL
目次一覧

ワンランク上のテンプレート素材

Photoshopを使っている方に超オススメの高品質テンプレートです。
作業の効率化とクオリティアップだけでなく、テクニックを研究する上でも役立つテンプレートばかり!
全て商用利用可能です!


例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートでレイアウトや余白、文字サイズを簡単に研究可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート40選


デザイン制作の勉強としての導入にオススメの名刺デザイン。
想像だけで作るとイマイチな仕上がりになりがちですが、良質なサンプルを参考に作ると吸収できる情報の質が段違いです。
相手に舐められない名刺テンプレート50選


バナーもフォトショップの練習をする上で良質な教材です。
想像だけ・中途半端な素材を参考にするのは有効な学習方法とは言えませんよ。
ハイクオリティなバナーテンプレート50選


素敵なキャラ絵には素敵な背景を置きたいですよね。しかし背景を描くのは面倒…そんな方にオススメ!高品質で商用利用できる背景イラストを厳選しました。
ハイクオリティな背景イラスト66選


ゲームUIの制作は素材制作にはツールの深い知識が必要です。
テンプレートはまさに制作ノウハウの宝庫!
どれも最高の素材ばかりです。
ゲームUIに使えるテンプレート48選


良質な素材をもっと見る
上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください!

ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!