【various sun】第16笑:——で? (9P/21P) 公開!!2020.11.23

クリスタは難しい?イラスト完成までの描き方を紹介します!(個人差あり)

クリスタ:イラストの描き方サムネ

皆さん、本日も閲覧ありがとうございます。
山本電卓と申します。

今回は漫画・イラスト制作ソフトCLIP STUDIO PAINT(クリップスタジオペイント)の使用を「操作が難しそう」という理由で保留している方の為に1枚のイラストをCLIP STUDIO PAINTの起動から完成までの手順・工程を紹介したいと思います。

あくまで私個人の制作工程なのですが、CLIP STUDIO PAINTでの制作する感覚を知っていただければと思います。

それではよろしくお願いいたします
( `・∀・´)ノ!


▼イラスト・簡単な漫画なら【CLIP STUDIO PAINT PRO】


▼本格的な漫画・アニメーション制作なら【CLIP STUDIO PAINT EX】


CLIP STUDIO PAINT:製品版【クリスタダウンロード版:コンビニ支払い】購入からインストールまでの方法-全工程画像付き!

CLIP STUDIO PAINT(クリスタ)でイラストを描くまでの準備

デバイス・周辺機器の準備

私が使用するデバイス・周辺機器は以下の通りです。

●ノートパソコン(Windows 10/64bit)

●液晶タブレット(USB端子/HDMI端子)

●tab-mate controller(USB端子)

液晶タブレット


tab-mate controllerとはCLIP STUDIO TABMATEの旧モデルとなる片手デバイスです。

tab-mate controller


このtab-mate controllerがあるおかげでキャンバスの移動や拡大縮小、レイヤーの作成、上書き保存などの操作を片手で行うことができます。

もちろん、こういった片手デバイスがなくてもメニュー選択やキーボード操作で行うことができますよ。

クリスタ:必要なものクリスタを使う為に必要な4つのもの+α HDMI液タブとHDMI端子に翻弄される素人の日記

お得なオリジナル品が豊富なペンタブレットの【ワコムストア】


CLIP STUDIO PAINTを起動

周辺機器の接続が完了しましたらパソコンの電源を入れてCLIP STUDIO PAINTを起動させます。

私の場合はパソコンの画面下(タスクバー)にCLIP STUDIO PAINT起動のアイコンを設置していますのでこのアイコンを1回タッチするだけでCLIP STUDIO PAINTが起動します。

CLIP STUDIO PAINTアイコン
クリスタ一発起動【クリスタ】3つのCLIP STUDIO PAINT起動ショートカットですぐに制作開始できる!!(Windows)
CLIP STUDIO PAINT


CLIP STUDIO PAINTが起動しました。

CLIP STUDIO PAINT(クリスタ)でのイラスト制作

以降の説明で紹介するウィンドウや項目が見当たらない場合は以下の記事を参考にしていただければと思います。

CLIP STUDIO PAINT画面【クリスタ補足】ウィンドウ(パレット)やアイコンが説明されている場所に見当たらない時は?

クリスタでキャンバスを新規作成する

CLIP STUDIO PAINTを起動しただけではまだキャンバス(絵を描く紙)が作成されていません。

CLIP STUDIO PAINT

※初起動時など、前回に保存を行っていない場合は自動でキャンバスが作成されてことがあります。


ですのでまずはキャンバスを作成していきます。

CLIP STUDIO PAINT画面上部から「ファイル」→「新規」と選択することで新規作成ウィンドを表示させます。

クリスタ:新規作成

クリスタ:新規作成


ここで作成したいキャンバスの設定を行います。


今回は以下の設定にしたいと思います。

クリスタ:新規作成(イラスト)

【作品の用途】

「イラスト」(左端のアイコン)

【ファイル名】

後から変更できるのでそのまま

【プリセット】

自分でサイズ指定するので「カスタム」のままで

【単位】

「mm」

【キャンバス】

幅:「100(mm)」

高さ :「100(mm)」

解像度:カラーイラストにするので「350(dpi)」

基本表現色:「カラー」


最後に右上の「OK」を押せばキャンバスが作成されます。

クリスタ:新規作成


今回単位を「mm」にしたのは単純に自分で大きさを把握したかっただけです。

投稿サイトなどで公開したい場合、規定サイズが「px(ピクセル)」で表記されていますのでそちらに合わせて設定していただければいいでしょう。


また、新規作成ウィンドウの細かい説明は以下の記事を参考にしていただければと思います。

新規作成【初めてのクリスタ】絵を描く最初のステップは「新規作成」!

書き出し時に拡大縮小する場合はその比率に合わせてキャンバスサイズを設定しよう!

後述しますが、CLIP STUDIO PAINTで制作したイラストは最後に公開用の画像データを作成する「書き出し」という作業を行います。

また、デジタル制作では大きいサイズで制作した方がより細かい描画ができますがその分容量が大きくなってしまう為、制作サイズは大きく設定し、書き出し時に縮小するという作業をよく行います。

投稿サイトにイラストを上げる時など、イラストのサイズが指定されている場合書き出し時の縮小率も計算してサイズを決める必要があります。

今回の場合ですと、(投稿サイトの規定に合わせるということはしませんが)幅×高さ=50 mm×50 mmのイラストを作成したく、書き出しの時に50%に縮小する予定ですのでキャンバスサイズは目的のサイズの2倍となる「幅×高さ=100 mm×100 mm」で作成しています。

下描きレイヤーを作成し、下描きする

キャンバスを作成しましたら、次は「レイヤー」を作成していきます。

デジタル制作ではキャンバスは土台であり、実際に絵を描いていくのはこの「レイヤー」上になります

「レイヤー」とは透明な紙をイメージしていただければ分かりやすいかと思います。

デジタルのイラストはこのレイヤーが何枚も重なって1枚の絵になります。

デジタルペイント:レイヤーとは

もちろん1枚のレイヤーに絵を描いてもいいのですが、絵を部分的に別のレイヤーで描くことで描画や修正がやりやすくなるという利点があります。

キャンバスを作成すると既に1枚普通のレイヤー(ラスターレイヤー)が作成され、選択している状態になっています。

クリスタ:新規作成
クリスタ:新規作成(ラスターレイヤー)


これを下描き用のレイヤー「下描きレイヤー」に変換して下描きを描いていきたいと思います。

方法は右下のレイヤーパレットの上部にある「下描きレイヤーに設定」のアイコンをタッチするだけです。

クリスタ:下描きレイヤー


これだけで下描きレイヤーになります◎

通常のラスターレイヤーに下描きを描いていってもいいのですが、下描きレイヤーに描かれた線はペン入れ時の線とは別物として認識してくれるようになりますので是非利用してみて下さい◎

下描きレイヤー【クリスタで絵を描く】下描きレイヤーを使えば効率が上がる!!


あとはイラストの下描きをお好みのペンツールを使って描いていきましょう。

私の場合は「ミリペン」を使用して描いています。明るい(薄い)色でアタリを描き、細かい描画はブラシサイズを細くして濃い色で描いていきます。

クリスタ:ミリペン
クリスタ:下描き


また、目などは何回も描き直すことが多いのでレイヤーを分けて描いています。(色も変えます)

クリスタ:下描き
クリスタ:下描きレイヤー


レイヤーを分けることで「消しゴムツール」使う場合も髪の毛など周辺の線を消すことなく目だけを消すことができるのです◎


新しく下描きレイヤーを作成したい場合はまずレイヤーパレット上部のアイコンをタッチしてレイヤー(ラスターかベクターのどちらか)を作成し、先程と同様に「下描きレイヤー設定」アイコンをタッチして下描きレイヤーに変換しましょう。

クリスタ:レイヤーパレットアイコン


関連記事

レイヤー:サムネ【初めてのクリスタ】キャンバス作成後は「レイヤー」を作って絵を描こう!!

キャンバスの表示を変えて描きやすい状態で描こう!

CLIP STUDIO PAINTではキャンバスの表示を回転させたり、拡大・縮小したり左右や上下を反転させることができます。

※キャンバスの表示ですので実際のイラストが変形されるわけではありません。

クリスタ:表示


「左向きの顔は描きやすいけど右向きの顔は苦手」というような、利き手によって描きやすい角度というのがあると思いますので自分の描きやすい表示・傾きをどんどん利用して描いていきましょう◎

クリスタ:左右反転表示

移動・変形で調整ができる!

絵を描いていて全体的なバランスを確認すと一部の絵の位置や大きさを修正したいという場面も出でくるかと思います。

そんな時でも絵の一部を指定して移動・変形させることができます◎

上手く描けた絵を消さずに修正できるというわけですね。

クリスタ:下描き修正

【注意!】定期的に「保存」をしよう!

作業中でも定期的に「保存」をしましょう。

めったに起こることではありませんが、不意にパソコンやCLIP STUDIO PAINTが閉じてしまった場合にそれまでの作業が消えてしまう可能性があります。

保存方法はいくつかありますのでやりやすい方法で行いましょう。

●CLIP STUDIO PAINT画面上部「ファイル」→「保存」と選択する

●CLIP STUDIO PAINT画面上部の「保存アイコン」を1回タッチする

●キーボードで [Ctrl(command)]+[S] と入力する

クリスタ:保存

※TABMATEなどの片手デバイスに保存の操作を登録することもできます。


また、最初に保存を行うと作業データの保存場所やデータ名を設定するウィンドウが開きますので任意の場所・名前で保存しましょう。

クリスタ:保存

※中央のファイル表示欄には選択中のデータ形式(ここではCLIP STUDIO形式)と同じデータしか表示されません。


2回目以降は保存の作業をするたびにCLIP STUDIO PAINTの画面のまま上書き保存されていきます。

※保存中、動作が1,2秒止まる場合があります。


ちなみに、ここで保存されるのはCLIP STUDIO形式(.clip)であり、CLIP STUDIO PAINTでのみ開いて作業ができるデータ形式になっています。

CLIP STUDIO形式データ


もし、作業を中断したい場合はこの(上書き)保存を行ってからCLIP STUDIO PAINTを閉じましょう。

※未保存のデータがある状態でCLIP STUDIO PAINTを閉じようとすると注意ウィンドウが表示されます。


作業を再開する時はこのCLIP STUDIO形式データを開くことでCLIP STUDIO PAINTと作業中のデータの両方が開き、続きから作業を行うことができます。

MEMO

保存が完了しますと「保存のアイコン」が半透明になって選択できなくなり、切り替えタブの右端の「★」が消えます。

逆にこれらの表示がある場合は上書き保存していない部分(データ)があるということになります。

クリスタ:保存・未保存

下描き完成!

下描きが完成しました。

クリスタ:下描き


最終的に「全体」「顔」「手(と銃)」の3つの下描きレイヤーを使用しました。

イラストのペン入れをする

下描きが終わりましたらペン入れの作業に入ります。

その為に下描きレイヤーの不透明度を下げて表示を薄くします。

クリスタ:下描き(不透明度)
クリスタ:不透明度


こうすることでペン入れの線が分かりやすくなり、間違えて下描きレイヤーにペン入れしてしまうというミスに気付きやすくなります。

下描きレイヤーにペン入れ【クリスタ】下描きレイヤーにペン入れしてしまった時に下描きだけを消す方法!!


ではペン入れ用のレイヤーを作成していきます。

私はペン入れに「ベクターレイヤー」を使用します。

これがCLIP STUDIO PAINT特有のレイヤーで、描画した線をデータ化してくれる為に線の修正が容易にできてしまうのです。

ベクターレイヤー【これぞクリスタの特徴!】ベクターレイヤーでこんなことができる!!


ベクターレイヤーの作成も簡単です。

レイヤーパレット上部の「新規ベクターレイヤーのアイコン」をタッチするだけで選択中のレイヤーの上の段にベクターレイヤーが作成されます。

クリスタ:レイヤーパレットアイコン


レイヤーの名前も「線画」に変えておきます。

クリスタ:レイヤー名変更


ベクターレイヤーを作成しましたら再びお好みのペン・ブラシサイズでペン入れを行っていきましょう。

今回、線画は「Gペン」で描いていきたいと思います。

クリスタ:Gペン


ベクターレイヤーですので線のはみ出しも「消しゴムツール」で線に触るだけで簡単に消してくれます◎

クリスタ:消しゴム(ベクター)


ここでも目や手前の部分などを別レイヤーにすることで描画や修正をしやすくできます。

クリスタ:レイヤー分け


はい、線画が完成しました!

クリスタ:線画(ベクターレイヤー)


今回は背景の線画はなしにします。(色塗りの時に描きます)

注意

ここでも定期的に「(上書き)保存」をするのを忘れないようにしましょう。

イラストに色を塗っていく

線画が完成しましたら色を塗っていきます。

下描きレイヤーはもう表示させなくていいのでレイヤーの「目のマーク」を消して非表示にします。

クリスタ:レイヤー非表示

クリスタ:線画


色の塗り方は特に好みが分かれる工程ですが、今回はシンプルに「塗りつぶしツール」で塗っていきます。

クリスタ:塗りつぶしツール


塗りつぶしツールはベクターレイヤーでは使用できませんのでラスターレイヤーを線画のレイヤーの下に作成します。

クリスタ:ラスターレイヤー(色塗り用)
MEMO

レイヤーの位置は作成した後に自由に移動させることができます。


ラスターレイヤーを作成・配置しましたら「塗りつぶしツール」を使って色を塗っていきます。

タッチするだけで線で囲まれた面を一気に塗ってくれます◎

クリスタ:塗りつぶしツール


色が決まればあっという間に終わります。

クリスタ:塗りつぶし

背景も塗っていく

今回のイラストは背景を線画で描きませんでしたので、色塗りの工程で背景も一緒に塗っていきます。

背景を塗る用のレイヤーも分けます。

クリスタ:塗りつぶし
クリスタ:ラスターレイヤー(背景)

イラストを仕上げていく

最後の工程です。

イラストにさらに細かい塗りを足して仕上げていきます。

陰影を付ける

イラストに影・陰を付けていきたいと思います。

色を塗ったレイヤーの上に新たにラスターレイヤーを作成し、レイヤーの合成モードを「乗算(じょうざん)」に変更します。

クリスタ:乗算
MEMO

「合成モード」とは設定したレイヤーに描いた色とその下にある全てのレイヤーの色を合成して様々な効果を付けることができるデジタル特有の機能です。


合成モードを「乗算」にしますと、そのレイヤーに塗った色がその下にある全てのレイヤーの色と合成されて暗い色味になります。

主に陰影を表現したい時に使用される合成モードです。

もちろん、上から普通のレイヤーで暗い色をそのまま塗っていっても構いません。

しかし、この「乗算」を利用すると下にある色に合わせた陰影を表現できますのでカラーイラストを描くなら覚えていて損はないと思います◎

また、陰影の表現ですのでグレーで塗ってもいいのですが、それでは味気ないので今回は「青寄りのグレー」を使って陰を塗っていきたいと思います。

クリスタ:乗算


陰を塗るペンは線画の時と同じGペンを使用し、広い範囲はGペンでフチを描いて中を塗りつぶしツールで塗っていきました。

クリスタ:塗りつぶし


肌の部分の陰は肌感が出やすい薄い赤色で塗っていき、境目はぼやけさせたかったので筆ツールの「塗り&なじませ」を使って塗っていきます。


明るめの色を選択していますが、「乗算」の効果で陰のような色合いになっているのが分かります↓

クリスタ:乗算(顔の陰)


最終的にはこんな感じで陰を描きました↓

クリスタ:乗算

光の表現を付ける

陰影だけでは暗い印象になりますので光の表現も入れていきます。

アナログのように薄い色を上から塗ってもいいですが、ここでは再び合成モードを利用します。

線画の上からも光の表現を出したいので線画のレイヤーより上にラスターレイヤーを作成し、合成モードを「加算(発光)」にします。

クリスタ:加算(発光)


合成モードを「加算(発光)」にしますと、そのレイヤーに塗った色がその下にある全てのレイヤーの色と合成されて明るく発光してるような色味にすることができます。

白色で塗ってもいいですが、イラスト(キャラクター)に合った色味を足してもいいですね◎

今回は緑色で塗っていきます。

クリスタ:加算(発光)

クリスタ:加算(発光)

「自動選択ツール」ではみ出しを防ぐ!

ペンや筆ツールで色を塗っていく場合、そのままでは線からはみ出してしまうことがあります。

そこで「自動選択ツール」を使えば、タッチした点から線で囲まれた部分に選択範囲を作成することができます。

選択範囲を作成すれば、その範囲内しか作業の影響が出なくなるのです。


下の画像では顔の部分に選択範囲を作成している為、顔の上に描く陰をはみ出すことなく塗ることができています。

クリスタ:自動選択ツール

追加の描画をしていく

予定では光の表現で完成のはずでしたが、何か物足りない感じがしましたので前方にも破片の絵を描き足していき、さらにその上に「加算(発光)」のレイヤーも足しました。

クリスタ:加算(発光)

イラストの完成!

これでイラストが完成しました◎

クリスタ:イラスト


「(上書き)保存」を忘れないようにしましょう。

シンプルな手順でしたが、慣れてくれば自然と手順も増えていくでしょう。

今回描いたイラストのレイヤー数

今回のイラストで使用したレイヤーの数は11枚(その内、下描きレイヤーが3枚)でした。

クリスタ:レイヤー


多い人ですと身体のパーツごとに線画のレイヤーを分けて何十枚と使用していますが、私は比較的使用するレイヤーの数が少ない方だと思います。

レイヤーを細かく分けますと修正や変形などの作業がしやすくなります。

今回のイラストで言えば途中で銃を持つ手の大きさと位置を変更しましたが、この部分もレイヤーを分けていた為、他の絵に影響を与えることなく修正が行えたのです。

しかし、レイヤーが多くなると「どこのレイヤーに何が描かれてあるのか」の把握が大変になり、データ容量も大きくなってしまいます。

公開するイラストの見え方はレイヤーが何枚だろうと変わりませんのでご自身の制作方法に合ったレイヤー数で描いていただければと思います◎

今回描いたイラストの容量

今回描いたイラストのCLIP STUDIO形式のデータ容量は4.15 MBでした。

クリスタ:容量


全体のサイズも大きくなく、レイヤー数も少なめだったので私が今まで描いたイラストの中では小さめのデータ容量になりましたね。

クリスタ:ファイルサイズサムネクリスタのファイルサイズ(容量)ってどれくらい?漫画とイラストの容量をお見せします!(個人差あり)

CLIP STUDIO PAINT(クリスタ)で制作したイラストを公開する

制作データの書き出し

制作したイラストのデータはCLIP STUDIO形式ですのでそのままではSNSや投稿サイトにイラストを上げて公開することができません。

イラストを公開するには「JPEG」や「PNG」などの画像データにする為に「書き出し」という作業を行う必要があります。

イラストのデータを開きましたら、CLIP STUDIO PAINT画面上部から「ファイル」→「画像を統合して書き出し」と選択し、書き出ししたいデータ形式を選択します。

クリスタ:画像を統合して書き出し


私はよくPNGを使用しますので「.png(PNG)…」を選択します。

データ形式の詳細は以下の記事を参考にしていただければと思います。

入出力フォーマットクリスタの動作環境「入力・出力対応フォーマット」の意味解説します!


データ形式を選択しますと書き出しするデータの保存場所とデータ名を決める画面が表示されますので任意の場所を指定し、データ名を入力して下部の「保存」を選択します。

クリスタ:書き出し

※データ名はCLIP STUDIO形式のデータ名と同じ名前が既に入力された状態になっています。変更したい場合は改めてデータ名を入力しましょう。

※データ名は後から自由に変更できます。

※中央のファイル表示欄には選択中のデータ形式(ここではPNG形式)と同じデータしか表示されません。

MEMO

この段階でも「ファイルの種類」で別のデータ形式に変更することができます。

クリスタ:書き出し(ファイルの種類)


「保存」を選択しますと書き出し内容を設定するウィンドウが表示されます。

イラストを書き出しする場合、基本的に設定するのは「出力サイズ」くらいでしょう。

クリスタ:書き出し

※過去に書き出しを行っている場合は全回の書き出し設定がのこっています。


デジタル制作は大きめに描けばより細かい描画ができますが、その分データ容量も大きくなってしまいます。

その為、私は大きく描いて書き出しの時に「出力サイズ」で縮小して書き出ししています。

ここでは当初の目的通り「50(%)」で設定します。

クリスタ:書き出し


また、「表現色」がイラストに合っていること(今回の場合は「RGBカラー」)と、「拡大縮小時の処理」を「イラスト向き」にしてあることをしっかり確認しましょう。

内容を確認し、問題なければ右上の「OK」を選択します。

「出力時にレンダリング結果をプレビューする」にチェックを入れている場合はプレビュー画面が表示されます。

クリスタ:書き出しプレビュー


このプレビューで書き出しするイラスト全体を表示している場合は多少荒く表示されていますが、書き出ししたデータはちゃんと表示されますのでご安心を。

問題なければ「OK」を選択しましょう。書き出しが実行されます。

データ容量が大きく時間がかかる場合は以下の画像のようにウィンドウが表示される場合もあります。その場合はしばらく待ちましょう。

クリスタ:書き出し・レンダリング

これで書き出しは完了です◎

書き出し実行後、特に完了の表示は出ません。指定した保存先のフォルダを見ば選択したデータ形式で書き出しデータが作成されているのが確認できます。

クリスタ:書き出し(PNG)



今回の書き出したPNGの画像データの容量は152 KBでした。

クリスタ:容量(PNG)

※表示されている「大きさ」は単位が「px」になっています。


書き出し時の細かい設定内容に関しては以下の記事を参考にしていただければと思います。

クリスタ:書き出し【クリスタ:書き出し】描いた作品を画像ファイルで保存する方法と補足説明!

イラストのデータを公開しよう!

書き出しによって画像データができましたらイラストを公開していきましょう◎

この時、イラストの画像データの容量が公開するサイトやSNSの規定容量を超えていないかも確認しておきましょう。

MEMO

容量が大きい場合はさらに縮小して書き出ししましょう。

また、その他の容量を小さくする方法は以下の記事を参考にしていただければと思います。

クリスタ:ファイルサイズサムネクリスタのファイルサイズ(容量)ってどれくらい?漫画とイラストの容量をお見せします!(個人差あり)


パソコンで制作をしたイラストをスマートフォンで公開したい場合はメールなどで画像データを送ればいいですね。

SNS投稿

制作データがあればいつでも編集できる!

イラストが完成した後でも、制作用データ(.clip)をCLIP STUDIO PAINTで開けばいつでも再編集が可能です。

例えば、色塗りしたレイヤーを非表示にした状態で書き出しをすれば線画のみの画像データを作成することができ、「線画と完成の比較」といったSNSでよく見かける投稿などもすることができます◎

クリスタ:線画と完成


また、気になる所がある場合はその部分だけを描き直したり、位置だけを変えるといった再修正も簡単にできます


完成したイラストを複製して二重にし、上に重ねた方のイラストをぼやけさせたり合成モードを利用して印象を変えるなんてこともできますよ◎

クリスタ:レイヤーを複製

クリスタ:ガウスぼかし

クリスタ:オーバーレイ

クリスタ:オーバーレイ


こういった自由度が高いのもデジタル制作ならではでしょう。

最終公開イラスト

前項まででイラストの制作工程を紹介させていただきましたが、その後改めてイラストを見ると個人的に気になる箇所がいくつか出てきましたので修正をし、全体にぼかし効果も付けて最終的に以下のようなイラストになりました。

クリスタ:イラスト

CLIP STUDIO PAINT(クリスタ)は制作の手助けになる!

CLIP STUDIO PAINTでのイラスト制作を私なりの手順ですが紹介させていただきました。

私がとても助かっているのは「ベクターレイヤー」での線画作業です。

修正が容易なのでアナログと比べて効率がかなり上がります。

また、時間が限られてる中で画材屋に行くことなく作業ができるのも助かっています◎

手も汚れませんしね◎


また、以下の記事も合わせて読んでいただければなと思います。

一部デジタル移行サムネ【漫画・イラストのデジタル化に悩んでいる方へ】全てをデジタル化しなくてもいいのです! 漫画:デジタル漫画を『アナログ制作』から『デジタル【クリスタ】制作』に移行して感じた13の違い


CLIP STUDIO PAINTでの制作も悪くないなぁと感じた方は是非ご検討を。


それではここまで閲覧ありがとうございました!

お疲れ様でした!!


▼イラスト・簡単な漫画なら【CLIP STUDIO PAINT PRO】


▼本格的な漫画・アニメーション制作なら【CLIP STUDIO PAINT EX】


▼動画視聴型お絵描き講座【Palmie(パルミー)

パルミー