1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

【Photoshop入門】イラストをセルに分割して細部までデザインしてみよう!

photoshop
Pocket

イラストをPhotoshopでレイヤーに分割しながら作成する方法についてご説明します。
一枚のイラストを作成する際に各パーツをレイヤーに分割することにより、
各パーツの色が混ざらないので着色や加工などの作業が非常に便利になります。
それでは具体的な手順について確認していきましょう。

主線の描画

まずは下絵を描いた画像を開き、『レイヤー』ウインドウの右下のアイコンをクリックして
新しいレイヤー『レイヤー1』を作成します。(レイヤーの名称は任意で変更可能です。)
そしてこの『レイヤー1』を選択した状態でペンツール等で主線を描いていきます。

各パーツの描画

次に、新しくレイヤーを作成しクマの体を茶色で着色します。
レイヤーの名称は分かりやすいように『体』という名前に変更しておきましょう。

続けて、服やメガネなど各パーツのセルを作成してそれぞれ着色していきます。
ちなみに上のセルに着色すると下のセルの重なった部分は見えなくなります。
つまり、透明なセロハンのようなものに各パーツを着色し
それぞれのセロハン(レイヤー)を下から順に重ね合わせて1枚の絵を描画するようなイメージです。

パーツの影やハイライトを着色

全てのパーツを着色し終えたら『体』レイヤーを選択して新規にレイヤーを作成します。
そしてAltキーを押しながら新規に作成したレイヤーと『体』レイヤーの境界をクリックすると
2つのレイヤーがグループ化され、下のレイヤーに着色された部分のみ上のレイヤーにも着色できるようになります。

そして上のレイヤーの描画モードを『乗算』にし、『体』レイヤーと同じ茶色で影部分を描いてみましょう。
『乗算』のレイヤーで描いた部分は濃い色で着色されます。
ちなみに描画モードを『スクリーン』にすると明るい色で着色されるので、ハイライトの描画に向いています。

パーツの透過

続けて、先ほどの要領で描いたメガネのレイヤーの不透明度を変更してみましょう。
不透明度を下げることによりレイヤーがだんだんと透過していき、下のレイヤーの色がくっきりと見えるようになるので
ガラスのように透ける素材の描画等に活用したいテクニックです。

各パーツ毎に色味を調整

蝶ネクタイを着色したレイヤーを選択した状態で
メニューバーの『イメージ』→『色調補正』→『色調・彩度』を順にクリックし、
『色相・彩度』画面で色相のバーを左右に動かすとレイヤーの色味を変更することができます。
同様に彩度や明度も調整することで任意のパーツの色味を自在に調整することができます。

最後に『背景』レイヤーを作成したらCtrl+Shift+Eキーまたはメニューの『レイヤー』→『表示レイヤーを結合』で
全てのレイヤーを結合して1枚の絵にします。

おわりに

レイヤーを分割することにより各パーツごとに分けて描画することができるようになります。
CGならではの特殊効果をかけたレイヤーと合成する等、ぜひ色々とアレンジしてみてください。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

WebCampは、一ヶ月の短期集中でWebデザイン、プログラミングスキルを習得するスクールです。学習効果の高い反転授業(自主学習でインプット、講義でアウトプット)を採用し、年間1000名を輩出しています。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ

3WEB塾

WEB塾

メールマガジン

ページ上部へ戻る