Adobe Photoshop Sketchで描くデジタルアート（応用編）〜描いたイラストを使ってMAX CHALLENGEに参加しよう〜 #AdobeMAXJapan
Adobe MAX Japan 「MAX CHALLENGE（マックス チャレンジ）」
Adobe Photoshop Sketchを活用してハイクオリティなイラストを描く方法をご紹介します。描いたイラストを使ってMAX CHALLENGE「スニーカー部門」に応募する方法も併せて紹介しますので是非参考にしてみてください。
https://blog.adobe.com/media_b033841fe6a382a03c707bfc8a4e5f6b140a4c8b.gif
今回はこちらの絵の詳細な作画手順を紹介しますのでマネしながらご自身でも是非トライしてみてください。
Adobe Photoshop Sketchで描くデジタルアート（基礎編）はこちら。
作画手順
・新規プロジェクトを立ち上げる
https://blog.adobe.com/media_72f8032a69d5853fd316a926b7b7679ff77109cd.gif
Adobe Photoshop Sketchを起動後、画面右下に表示されている「+」をタップ。「新しい形式」を選択しましょう。
https://blog.adobe.com/media_13b3bd2895b3036455cc97b75713ef670715e344.gif
「単位」をピクセルに設定し、MAX CHALLENGE「スニーカー部門」のテンプレートに規格を合わせて幅2064px、高さを1024pxと入力してください。
https://blog.adobe.com/media_a780f70b2a7509d1ea7b20a734fc4805bbf87fa5.gif
新しいプロジェクトの画面が開いたら、画面右側にあるレイヤーの「+」をタップし、「画像レイヤー」から作画元になる写真を配置しましょう。
https://blog.adobe.com/media_7ce2f2512815ede12d4428dea6b2d71df5827aa3.gif
今回は写真をトレースして描いていきますので、アートボードに対して丁度いい構図になるよう配置してみましょう。
※元写真はご自身で撮影したものを利用しても良いですし、Adobe Stockからお気に入りの写真を選んでみるのも良いと思います。
・線画
https://blog.adobe.com/media_764c3e86d20e99bb56443caf23674d3b3f6526e2.gif
写真をトレースします。
画面左側にあるブラシツール最上段の鉛筆ブラシを使ってモチーフの輪郭を描いていきましょう。※写真レイヤーにそのまま描き始めるだけで自動的に作画レイヤーが生成されます。
ブラシの太さや濃さは使用するブラシを一度タップすると出てくる、ブラシ詳細設定にて自由に変更可能です。
https://blog.adobe.com/media_be5f0876a61fefb26a53228505775b97bc2e6cda.gif
写真レイヤーの透明度を調整して描いた線を見やすくする方法もオススメです。
https://blog.adobe.com/media_d3814eed70b2dc89f87089bf638a690c5160cd7b.gif
https://blog.adobe.com/media_e5de31fce5e1ec23e7c3b102c618917050d7ae73.gif
トレースができたらこのような状態になります。
https://blog.adobe.com/media_915dba767f4e8708ab830b1bfb66a370d0dc5141.gif
https://blog.adobe.com/media_48cf2e4eb3df19ed8f2fb8553d1e7ea9f68faaf8.gif
https://blog.adobe.com/media_c7e6bfd100b58b2b2c42b7bad801f003c8196e3f.gif
https://blog.adobe.com/media_8a46af0a33e486c0c95ac5518062ecda080146e9.gif
他の部分もどんどん進めていきましょう。
https://blog.adobe.com/media_935448683b82435d8ced1d4b60170d7bb3e3e4e8.gif
完成した線画がこちら。
・背景を描く
https://blog.adobe.com/media_112de9c2ecfd01652e3edc2f811ffeea8cefd372.gif
線画レイヤーの下に新しいスケッチレイヤーを一枚追加し、水彩ブラシを使って背景を描きましょう。大きめのブラシサイズで大雑把に色を置いていき、色と色を滲ませて、良い雰囲気を作りましょう。
〈ワンポイントアドバイス〉
線画をしっかり描き込んでいる絵の場合、線自体がイラストのクオリティを支えてくれますので、色ぬりはそれほど厳密に描き込む必要はありません。自由にご自身の感性を爆発させて楽しんでください。
反対に、線をあまり描き込まない絵の場合は厳密な色ぬりが求められます。これがイラストにおける「線」と「色」のバランスです。
・陰影をつける〜最も暗い部分〜
https://blog.adobe.com/media_fc6e72f8273fbe69ea43f0aa748f699417516773.gif
https://blog.adobe.com/media_a9cbbc9a9a4fa9bb087a1e2b37b941016d38a6e7.gif
線画が描けたら、次に暗い部分に陰影をつけていきます。線画レイヤーの下に新しいスケッチレイヤーを一枚追加して、まずは最も暗い影になっている部分を鉛筆ブラシで塗りつぶしてみましょう。
https://blog.adobe.com/media_cee448623f1bb0887e5aab60c9efde047d69a201.gif
https://blog.adobe.com/media_0990591a61ea4b493b166bb5e5cfbb5dc56543b2.gif
影をどんどん塗っていきます。
https://blog.adobe.com/media_fc1e637dad40cb13041e6f870c1dec6dba330008.gif
全体の影を塗り終えた状態がこちら。
・陰影をつける〜少し暗い部分〜
https://blog.adobe.com/media_af6436b7f19cc04d5dbc6ec140834b1754350de6.gif
https://blog.adobe.com/media_286f22723b2c011119d35bbe66cfee41e401ab48.gif
最暗部の影が描けたら、次に花弁のディテールや少し暗い部分に陰影をつけていきます。
Photoshop Sketchは筆圧を繊細に感知してくれますので、鉛筆ブラシで画面を優しく撫でるようにタッチすると、薄い線が描けます。
https://blog.adobe.com/media_e5828db180f7f81d3ce7548e66a87ce724302f3c.gif
全体に薄い影を入れた状態がこちら。
・色塗り
https://blog.adobe.com/media_9c7d108101c97c9fa6a96681e61bb8ac9cd118ef.gif
陰影をつけたスケッチレイヤーの下に新しいレイヤーを一枚追加して色を塗っていきましょう。まずはお花ごとに一色で塗り分けていきます。
https://blog.adobe.com/media_a70c365522fc1bf5de0ea8ab899b8640ae715658.gif
大まかに塗り終えた状態がこちら。
〈ワンポイントアドバイス〉
https://blog.adobe.com/media_1ed8ed78fb8b6958828d6faa9f92973b517ca94e.gif
色ぬりはお花ごとにレイヤーを分けて塗ります。同一レイヤー内で全ての色ぬりを行うと隣り合う色同士がこのように滲んでしまうからです。あえて滲ませたい場合は同一レイヤーでも構いません。仕上がりが綺麗になりそうな方法で自由に色ぬりを楽しんでください。
・仕上げ
https://blog.adobe.com/media_f59f3d309803f40060df64f5672c2bc1af7962d1.gif
色ぬりレイヤーの一番上に新しいスケッチレイヤーを一枚追加し、水彩ブラシで仕上げの色を塗っていきます。
それぞれのお花のベース色はひとつ前の工程で大まかに描き分けてありますので、次は同一レイヤーで滲みを利用しながら色の濃淡を使って自由に塗っていきます。写真に忠実に描いていっても良いですし、自分のイマジネーションで色を置いていっても構いません。
前述の通り、今回のイラストは線がクオリティを支えてくれていますので色の自由度は高いです。
https://blog.adobe.com/media_b033841fe6a382a03c707bfc8a4e5f6b140a4c8b.gif
新しいスケッチレイヤーを一枚重ねて、ハイライトを描けば完成です。
https://blog.adobe.com/media_4aeeaa96d9c5a03af9700fd4332d889b138f937b.gif
イラストを画像として保存しましょう。
MAX CHALLENGEに参加する
描いたイラストを使ってMAX CHALLENGE「スニーカー部門」に参加する方法を解説します。
スニーカー部門にはAdobe Dimension CCを使って参加します。
まずはこちらから参加に必要な素材（MAXロゴとスニーカーテンプレート）をダウンロードしてください。
・スニーカーに貼り付け用の画像を作る
https://blog.adobe.com/media_1b1a4318108b36014dce87755b08fc98d4e5bdde.gif
Adobe Illustratorにてスニーカー用テンプレートを開きます。Photoshop Sketchで描いたイラストをテンプレートに配置して、MAXのロゴを任意の場所に入れます。※ロゴがどこか一箇所にでも入って入れば良いというルールです。ロゴはあまり端に寄せてしまうと立体化された時に見切れる場合があるので、少し内側に寄せて配置しましょう。
https://blog.adobe.com/media_a8434a80a77071e12556b2c2dd97f2aa8f4991fb.gif
https://blog.adobe.com/media_a654d4496506123cdf2ca0de96a0b5d362e8b989.gif
「スクリーン用に書き出し」を選択すると、frontとbackのPNGデータを書き出しできます。
・Dimensionでスニーカーに画像を貼り付ける
https://blog.adobe.com/media_efce040ef7d4147c8069796195d088b4e4b589c5.gif
Dimension用のスニーカーテンプレートを開くとこのような状態です。
https://blog.adobe.com/media_d2f4e20c060fa1523515a12a53f3852d488fe5e2.gif
デザイン部分をダブルクリックすると右側のウインドウに「画像」という項目が現れますのでクリックし、「ファイルを選択」を選択してください。
https://blog.adobe.com/media_9eaee6a3c48f46c0f1d6d0131edf8c60f95f2396.gif
先ほど保存したデザインデータ「front」を配置します。
https://blog.adobe.com/media_cc03378def116c9c416d778484aa0707d17ec625.gif
このように綺麗に配置されました。
https://blog.adobe.com/media_6be92503540450ffd237015c9108bdad5219bab1.gif
https://blog.adobe.com/media_f427e4f7fdf0e7935d815e13cf18f1abebc654a0.gif
backも同じ要領で「ファイルを選択」をクリックし、デザインデータ「back」を配置します。
https://blog.adobe.com/media_adc2b599614e7f11a998cdeb8380bf6898cc127c.gif
あっという間にオリジナルスニーカーの3Dデータが完成しました。
・レンダリング
https://blog.adobe.com/media_1be9ebc2c225e62614b10c2dd62a3d2101849976.gif
レンダリングを行いPNGデータを書き出します。画面左上の「レンダリング」タブをクリックしてください。「画質」は中、「書き出し形式」でPNGを選択してください。
https://blog.adobe.com/media_b8c8515763de95253aa9863f57207c33cfaebd1c.gif
「レンダリング」をクリックすると、このようにデータが書き出されていきます。
https://blog.adobe.com/media_b1bc4ad727c96d0aba4ba3471d98aeb33593503b.gif
完成したデータがこちら。
Behanceに登録
https://blog.adobe.com/media_8ab258adda63b93cdd6edc5da6223516e55ab703.gif
MAX CHALLENGEへの参加はBehanceへ画像をアップし、それをTwitterへ投稿することで完了します。Behanceを開いて「プロジェクトを作成」をクリックしましょう。
https://blog.adobe.com/media_118924ada4271b7a6a2bc8e7bf92aa1166f0a05e.gif
https://blog.adobe.com/media_a02cc084c335c6e7e7a0ff376db22c19058b2886.gif
「ファイルのアップロード」をクリックし、先ほど保存したスニーカーのPNGデータを読み込みます。
https://blog.adobe.com/media_a38a99ed1a1d0cdd811281ff02e398f60ac28cde.gif
タイトルを入力し「切り抜き＆続行」をクリック。
https://blog.adobe.com/media_37a24ec815be3de11d7e6b482da3c5352cb15159.gif
「プロジェクトの設定」→「見つけられやすさ」からキーワードに「#AdobeMAXJapan」と入力してください。
https://blog.adobe.com/media_6ac07c689cd8c613796cd6effa86e87745f58ce7.gif
Behanceへ作品を投稿すると「作品を宣伝する」という項目が現れますのでTwitterへ投稿すると応募完了です。
@creativecloudjpMAX CHALLENGE に応募しました。 #AdobeMAXJapan@Behance「Flowers by Photoshop Sketch」 https://t.co/R8awarztRK
— 田中ラオウ (@raoutanaka) 2018年10月7日
いかがでしょう。あっという間にオリジナルスニーカーのデータを作成することができました。
このようにデジタルアートは色々なものへの転用が容易です。
Photoshop Sketch,Behance共にCreative Cloudのアカウントをお持ちの方ならどなたでも無料でご利用いただけますので、是非インストールしてご自身の豊かなアートライフにお役立てください。
Adobe MAX Japan 2018にてワークショップを開催します
Adobe MAX Japan 2018にてワークショップ「クリエイティブ基礎力アップ！モバイルアプリで描くデジタル作画講座」を本記事執筆者の田中ラオウが行います。
作画アプリの基本的な使い方から人物をバランスよく描くコツなどを解説いたしますので、ご興味がある方のご参加お待ちしております。こちらから参加登録が可能です。
次回予告
次回はIllustrator Drawを使った作画の工程を紹介する【Adobe Illustrator Drawで描くデジタルアート（基礎編）】をお送りします。配信をお楽しみに！