Photoshop

リアルなレッドカーテンをさくっと描けちゃうphotoshopチュートリアル

初めまして!デザイナーのAkiです。
前回のなおの記事に引き続き、本更新でもphotoshopの簡単なチュートリアルをご紹介したいと思います。
何かしらの発表や受賞コンテンツなど、WEBデザインで実はなにかと使用頻度が高いレッドカーテン。
深紅のドレープのニュアンスを、photoshopだけでさくっと描いてみましょう。

 

STEP1

横長のカンバスを用意します。
カンバス中央ほどを縦長にグレーで塗りつぶします。

 

STEP2

レイヤー効果をかけていきます。
フィルター > 描画 > ファイバー

 

STEP3

ファイバーをかけた縦長のレイヤーを選択し、カンバスいっぱいにぐいっと広げます。
粗くなっても大丈夫です。

 

STEP4

この手順で一気にカーテンの姿が見えてきます。
フィルター > ぼかし(移動)
ここで角度を90度(垂直)にします。
距離は適当に調整。この時点で陰影が濃いほど重厚な仕上がりになります。

 

STEP5

4までのレイヤーの上に新規レイヤーを作ります。
バケツツールで一気に赤でベタ塗りにします。
ここでは#bd0000で塗りました。

 

STEP6

このレイヤーの描画モードを乗算にすると。。。

 

STEP7

続いて、ライティング効果を加えていきます。
先ほどのレイヤーの上にさらに新規レイヤーを作り、グレーにぬります。
今回は#454545を使用。

 

STEP8

フィルター > 描画 > 照明効果を選択。
左右上部から対角線上に光が差し込むようにライティングのエフェクトをかけます。
この時点ではちょっと大げさに明暗を分けておくのが個人的には好み。

 

STEP9

このようになりました。
フィルターのプレビュー画面は小さくて見づらいので、実際ここでライティングが良い感じに決まるまで何度か調整を加えます。

 

STEP10

このレイヤーの描画モードをソフトライトにすると。。。(濃度足りなかったので同じレイヤー3枚くらい重ねちゃいました)

 

STEP11

カーテン部はほぼこれで完成です。あとは細かい明暗やコントラストの調整を行ってください。
今回はもう少し。。スポットライトも作ります。
新規レイヤーに白い円を描き。。。

 

STEP12

フィルター > ぼかし > ぼかし(ガウス)
で、輪郭をぼやかします。

 

STEP13

描画モードをソフトライトにすると。。。

 

STEP14

ソフトライトなのでレイヤー複製で重ねると重なった部分がなんか良い感じに。

 

STEP15

モチーフや文字、キラキラの光なんかを配置して完成です。

 

↓こちらの動画を参考にしています(英語です)

It’s Curtains For You