クリエイティブ基礎力アップ!Adobe Photoshop Sketchで描くデジタルアート(基礎編)

Photoshop Sketchを活用して簡単に手描き風イラストを描く方法をご紹介します。

こちらの絵はPhotoshop Sketchに標準搭載されている「鉛筆ブラシ」と「水彩画ブラシ」のみを使用して描かれています。

詳細な手順を紹介しますのでマネしながらご自身でも是非トライしてみてください。

https://blog.adobe.com/media_4219b4f378767275f634afd2d15cc701ad6fbd45.gif

▽使用した機能

▼ブラシ〈全2種〉
・鉛筆
・水彩画

▼レイヤー〈全8階層〉
最下層:背景(初期設定の作画用紙)
2層目:背景(色を塗ったもの)
3層目:作画元の写真
4層目:下書き
5層目:色ぬり(肌の色)
6層目:色ぬり(髪の毛と服の色)
7層目:ハイライト
最上層:アウトライン

※Photoshop Sketchの全機能はこちらのページにまとめられています。

作画手順

・新規プロジェクトを立ち上げる

https://blog.adobe.com/media_98666cbf2cb80433a04558855937425e169a0bcf.gif

Photoshop Sketchを起動後、画面右下に表示されている「+」をタップ。任意の形式を選択しましょう。※今回の作例は〈iPad Pro(横)〉という形式を選択しています。

・作画元になる写真を配置

https://blog.adobe.com/media_5a54f18cb429685b59d6da7005ec2f42e3b14629.gif

https://blog.adobe.com/media_db04ded236a2c20ccf2505744da76cf3e04475a1.gif

新しいプロジェクトの画面が開いたら、画面右側にあるレイヤーの「+」をタップし、「画像レイヤー」から作画元になる写真を配置する。

・下書き

https://blog.adobe.com/media_4db16f1ff71af11c0e29c8b00530882bd0c7b076.gif

画面左側にあるブラシツール最上段の鉛筆ブラシを使って下書きを描いていきましょう。※写真レイヤーにそのまま描き始めるだけで自動的に作画レイヤーが生成されます。

ブラシのサイズや色の濃さは使用するブラシを選択後、もう一度同じブラシをタップすると出てくる、ブラシオプションにて自由に変更可能です。描きやすい設定に調整してみましょう

《ワンポイントアドバイス》
下書きで手応えがないまま本番でなんとかしようとしても、満足できる仕上がりにならないことが多いです。下書きはあとでレイヤーごと消去可能なので、納得出来るまで存分に描き込んでみましょう。不慣れな方は写真をトレースしてもOK。

・色塗り(肌)

https://blog.adobe.com/media_6d5d17cf88b0a3836d29b841571cb9a4552ec039.gif

画面右側のレイヤー上部にある「+」をタップして下書きレイヤーの上に一枚「スケッチレイヤー」を追加しましょう。

https://blog.adobe.com/media_fb386e4c7923c2005faf422207e89ce47667f6b6.gif

画面左側のブラシの下から2番目にある「水彩画ブラシ」を2回タップし、カラー設定から肌の色を選択しましょう。※よい色が見つからない場合は「カラー」→「ピッカー」からお好きな色を作ってみてください。

https://blog.adobe.com/media_120d44e28078242548fb47f0e7d309674311a87a.gif

ブラシサイズを塗りやすい大きさに調整します。インク量は100%がオススメです。

https://blog.adobe.com/media_7fdbfc479606902c211b7eb1f542fd69c356e7d0.gif

まずは肌は全体を一色で塗ります。下書きの線が見えなくなりました。

https://blog.adobe.com/media_7157de18878701399e417545547c5dba671d77db.gif

任意のレイヤーを長押しするとレイヤーの順序を入れ替えることができます。色を塗ったレイヤーを長押しして下書きレイヤーよりも下に持ってきましょう。

https://blog.adobe.com/media_fae8b25259ce7e27d1f9381422ee278b6d0c87ec.gif

https://blog.adobe.com/media_31fbb54ca3bfd8879351877b8aacdb967de5d6d7.gif

次は影になる部分に濃い肌色を塗りましょう。細かい影を塗りやすい太さにブラシサイズを調整してください。

https://blog.adobe.com/media_e9297bc7759f2d7324a380554314dba18dbb651e.gif

耳や唇に赤みを加えて、肌の血色を良くしてみましょう。

・色塗り(髪の毛、その他)

https://blog.adobe.com/media_83f10b163bbdfb2fa7c18f9564ce90f861dc261a.gif

https://blog.adobe.com/media_ba6b7ea3b9970e674b4f6a5061233d326e56a8a6.gif

https://blog.adobe.com/media_beeaf3d792f8683e87f35691af65b71bc414b304.gif

新しいスケッチレイヤーを一枚重ねて髪の毛や服の色を塗りましょう。

〈ワンポイントアドバイス〉
髪の毛はブラシサイズを小さめの設定にして毛の流れに沿って何度か塗り重ねるとうまくいきやすいです。※水彩画ブラシの滲みを抑えたい場合は色を塗った後すぐにブラシツールの下にある扇風機アイコンをタップすると、その時点で滲みがストップします。

https://blog.adobe.com/media_260507bedf7853c8083387edd57adf33fe3dee84.gif

髪の毛の色はグレースケールのブラックより、赤系の色の明度を下げる方が仕上がりが自然です(グレースケールの場合は塗りの薄い部分が灰色っぽくなってしまうため)。

https://blog.adobe.com/media_24e8c59b899625d5e929f788c22bdc99a6cbf44f.gif

ブラシ設定のカラーをタッチしながらアートボードにスライドさせると、スポイト機能が使用できます。色の選択に困ったときは、スポイトで写真から色を抽出してみてください。

・アウトライン

https://blog.adobe.com/media_920ee9ebbeb314ffde56eb6ca747af42cd315505.gif

次はアウトラインを描いていきます。下書きレイヤーをタップしてオプション画面を開き、不透明度を30程度まで下げましょう。

https://blog.adobe.com/media_13950578de15a04a29d90641e3abc2e42c24866f.gif

新しいレイヤーを一枚重ねて鉛筆ブラシをタップします。
ブラシのオプションからブラシサイズを20、インクを100%、カラーをブラックに設定しましょう(初期設定では鉛筆ブラシのカラーは100%のブラックにはなっていません)。

https://blog.adobe.com/media_eff2350cac0010a77f60853641d8c1e867fb1a81.gif

https://blog.adobe.com/media_2c632ba351af378571e1ad9f6225a57c59a41cc0.gif

アウトラインを鉛筆ブラシで描いていきましょう。

https://blog.adobe.com/media_1e24d60a42308f954e6b84fc5017707635acd454.gif

レイヤーはダブルタップで非表示にできます。アウトラインが描けたら下書きレイヤーを非表示にしましょう。

・ハイライト

https://blog.adobe.com/media_1c1333a3efe52199f27e2ff6f4f29eb1f685fcb9.gif

アウトラインをかき消さないように、アウトラインの下にスケッチレイヤーを一枚追加します。

https://blog.adobe.com/media_50da178ec3e10a039b3fd39c74fdda5b947873bf.gif

鉛筆ブラシのカラーをホワイトに切り替えてハイライトを塗ります。

・背景

https://blog.adobe.com/media_4441221540d867fa71837c859de5b56cdb527fd6.gif

https://blog.adobe.com/media_9f1036ec04fab53f183ca46f6f832e0ef0e4017f.gif

あとは背景を塗ったらイラストが完成です。背景に取り掛かる前の下準備として写真レイヤーをダブルタップして写真を非表示にします。一番上のレイヤーオプションから「すべてのレイヤーを変換」を選択し、イラストをアートボードの中央に移動させます(イラストの大きさの変更も可能です)。

https://blog.adobe.com/media_1285105f00edd18991a910c593e276722263fe50.gif

https://blog.adobe.com/media_9b3517001611052603ab97c47cdf4f9ed912ad74.gif

写真レイヤーの下に手付かずのスケッチレイヤーが一枚余っていますので、そちらに背景を描いていきます。サイズが大きめの水彩画ブラシで人柄に合った色を塗りましょう。

https://blog.adobe.com/media_633c3ce75b1c7d6aacae16c5f40147a41e34500d.gif

https://blog.adobe.com/media_4219b4f378767275f634afd2d15cc701ad6fbd45.gif

最後に消しゴムブラシで人物に重なっている背景を消したら完成です。

描いたイラストを活かす

https://blog.adobe.com/media_1bea18662ae10e18d00d8f7c51fa301fa8c015c4.gif

Photoshop Sketchで描いたイラストは様々な使い方ができます。

・イラストを保存、共有する

Photoshop Sketchでは、プロジェクトに加えた編集は自動的に保存されます。いつでも「閉じる」をタップすれば、「プロジェクト」ビューに戻れます。「+」をタップして、プロジェクトに新しいドキュメントを追加することも可能です。また、「…」をタップして対象のドキュメントを選択し、複製や削除、または他のプロジェクトに移動することができます。「作品」ビューでは、選択したプロジェクトを一括して削除、複製することも可能です。

もちろん画像をカメラロールに保存することもできます。また、PSDまたはPDFの形式でCreative Cloudに保存することも、リンクを作成してプロジェクトを他の人と共有することも可能です。

・Behanceとの連携

コミュニティギャラリーで世界中のアーティストやデザイナーの作品を参照できます。また、Photoshop Sketchで制作中の作品をBehanceに公開して、アプリ内ですぐにフィードバックを得ることも可能です。

・Illustrator、Photoshopに直接送信

作成したイラストをIllustratorに送り、4倍まで拡大して高解像度のコピーを印刷できます。また、レイヤー付きのPSDファイルとしてPhotoshopに送り、イラスト、背景、画像をそれぞれ個別のレイヤー上で編集できます。

・タイムラプス機能

Photoshop Sketchでは作画の全行程が自動的に録画され、タイムラプス機能を使って手順を一から振り返ることができます(当記事冒頭の動画はこの機能によるものです)。

タイムラプスのビデオもまた、保存と共有が簡単にできます。

Photoshop Sketchは無料でご利用いただけます

Photoshop SketchはCreative Cloudのアカウントをお持ちの方ならどなたでも無料でご利用いただけます。
イラスト制作からちょっとしたメモ書きまで、使い方は無限大ですので是非インストールしてご利用ください。
https://www.adobe.com/jp/products/sketch.html

Adobe MAX Japan 2018にてワークショップを開催します

Adobe MAX Japan 2018にてワークショップ「クリエイティブ基礎力アップ!モバイルアプリで描くデジタル作画講座」を本記事執筆者の田中ラオウが行います。

作画アプリの基本的な使い方から人物をバランスよく描くコツなどを解説いたしますので、ご興味がある方のご参加お待ちしております。こちらから参加登録が可能です。

次回予告

https://blog.adobe.com/media_d4ec2203de105183cf1d8904b49fe058d73574a6.gif

次回はPhotoshop Sketchを使ったより高度な作画の工程を紹介する【Adobe Photoshop Sketchで描くデジタルアート(応用編)】をお送りします。配信をお楽しみに!