Photoshop|火が灯るリアルなロウソク(キャンドル)の作り方チュートリアル

Candle-32.jpg

この度の「東北地方太平洋沖地震」におきまして、被害にあわれた皆様に心よりお見舞い申し上げます。

現在も各地で計画停電が実施されていますが、停電中に明かりを灯すアイテムの一つに「ロウソク」があると思います。

そこで今回は、Photoshop(フォトショップ)で、淡い火が灯るリアルなロウソク(キャンドル)の作り方チュートリアルをご紹介します。

 

まずはPSDダウンロード(6.1MB)

【ステップ1】

編集>新規(幅600px:高さ800px、解像度:72px)で新規ファイル作成。

Candle-01.jpg

【ステップ2】

背景を黒(#000000)で塗りつぶします。

Candle-02.jpg

【ステップ3】

長方形ツールで、幅200px:高さ400pxの長方形を描きます。(レイヤー名:Candle)

Candle-03.jpg

【ステップ4】

レイヤーパレット>"Candle"レイヤーをダブルクリックして、下図のようにレイヤースタイルを追加します。

グラデーション(左から)
#fdbc50 - #db7c26 - #8f4f21 - #704c23

Candle-04.jpg

下図のように、グラデーションのかかった長方形になります。

Candle-05.jpg

【ステップ5】

ペンツール(P)>アンカーポイントの追加ツール

を選択し、以下の図のように長方形にパスを追加&変形させていきます。

《メモ》今回、この部分をパスで描いていますが、ブラシツールや消しゴム、選択範囲ツールなど他の描画ツールで作成しても構いません。

Candle-06.jpg

【ステップ6】

"Candle"レイヤーの上に、新規レイヤー(レイヤー名:Flame)を作り、下図のようにペンツール(P)を使って炎のベースを描き、スマートオブジェクトに変換します。

《メモ》今回、この部分をパスで描いていますが、ブラシツールや消しゴム、選択範囲ツールなど他の描画ツールで作成しても構いません。

Candle-07.jpg

 スマートオブジェクトに変換

Candle-08.jpg

【ステップ7】

"Flame"レイヤーにぼかしを加えます。

フィルタ>ぼかし>ぼかし(ガウス):半径1.0px

Candle-09.jpg

【ステップ8】

ぼかしを加えた"Flame"レイヤーの外枠に、さらにレイヤースタイルで光彩を加えて炎を引き立たせます。

光彩(外側)
描画モード:スクリーン、色:#b18242、
スプレッド:7%、サイズ:46px、
範囲:38%

Candle-10.jpg
Candle-11.jpg

【ステップ9】

"Flame"レイヤーの上に、新規レイヤー(レイヤー名:Blue Flame)を作ります。
炎の明るい部分をなげなわツール(L)で選択し、"Blue Flame"レイヤーにマスクをした後、「塗り」の不透明度を65%に変更します。
そしてブラシツールで炎の付け根の部分を青く描きます。

ブラシツールの設定
描画色:#78789e、マスター直径:15px〜20px

Candle-12.jpg

【ステップ10】

"Blue Flame"レイヤーの上に、新規レイヤー(レイヤー名:Flame Glow)を作ります。
炎の明るい部分に、楕円形ツール(色:#f4b155)で下図のように細長い楕円を描き、スマートオブジェクトに変換します。

Candle-13.jpg

スマートオブジェクトに変換

Candle-14.jpg

【ステップ11】

"Flame Glow"レイヤーにぼかしを加えます。

フィルタ>ぼかし>ぼかし(ガウス):半径15.0px

Candle-15.jpg

【ステップ12】

"Blue Flame"レイヤーの下に、下図のように"Line Wick"という名前のフォルダと、その中に同名の新規レイヤーを1つ作り、ペンツール(P)でロウソクの「芯」を描きます。

ペンツール 芯の色:#35364b

《メモ》今回、この部分をパスで描いていますが、ブラシツールや消しゴム、選択範囲ツールなど他の描画ツールで作成しても構いません。

Candle-16.jpg

【ステップ13】

"Line Wick"レイヤーの上に、新規レイヤー(レイヤー名:lighten1〜2)を作り、下図のように「芯」と「炎」が馴染むように調整します。

Candle-17.jpg

より炎を馴染ませるため、レイヤーの一番上に新規レイヤー(レイヤー名:Whiten)を作り、下図のようにブラシツール(B)で炎の一番明るい部分を強調します。

ブラシツールの設定
描画モード:オーバーレイ、不透明度:40〜60%
描画色:白(#ffffff)、マスター直径:5px〜10px

Candle-18.jpg

【ステップ14】

お疲れさまでした!炎の部分はこれで完成です。
次にロウソクの本体部分を作り込んでいきましょう。

"Candle"レイヤーの上に、新規フォルダ(フォルダ名:Shadow)を作ります。
その中に新規レイヤー(レイヤー名:Shadow1〜2)を作り、ブラシツール(B)でロウソクの側面(特に下図の白線枠)へ段階的に"影"をつけます。

ブラシツールの設定
描画モード:乗算、塗り:30%
描画色:黒 #000000、マスター直径: 80px

Candle-19.jpg

次に"Shadow"レイヤーの上に、新規フォルダ(フォルダ名:Hilights)を作ります。
その中に新規レイヤー(レイヤー名:Hilight1〜2)を作り、ブラシツール(B)でロウソクの側面(特に下図の白線枠)へ段階的に"光"をつけます。

ブラシツールの設定
描画モード:オーバーレイ、塗り:20%
描画色:白(#ffffff)、マスター直径: 60px

Candle-20.jpg

【ステップ15】

"Candle"レイヤーの下に新規レイヤー(レイヤー名:Candle_back)を作り、下図のようにロウソクの奥を描きます。

Candle-21.jpg

"Candle"レイヤーのレイヤースタイルを、そのまま"Candle_back"レイヤーにもコピーします。

Candle-22.jpg

【ステップ16】

"Hilights"フォルダの上に、下の図のように、新規レイヤー(レイヤー名:Side-Highlight)を作り、長方形(白:#ffffff)を描きます。

Candle-23.jpg

ぼかしを加えます。

フィルタ>ぼかし>ぼかし(ガウス):半径17px

Candle-24.jpg

レイヤーの塗り:20%に変更

Candle-25.jpg

【ステップ17】

ここからは、背景を描きます。

フリー素材から下記のような「壁紙」と「木目」の画像をピックアップします。

(※今回は『フリーフォト素材|写真素材 足成gauさんあけぼのさんの写真を使わせて頂きました)

Candle-26.jpg

【ステップ18】

"Candle_back"レイヤーの下に、下の図のように新規フォルダ(フォルダ名:Background)を作り、その中にさらに「Table」「Wall」という名前のフォルダを作ります。

それぞれに「木目の画像(レイヤー名:Table)」と「壁紙の画像(レイヤー名:Wallpaper)」をスマートオブジェクトで配置します。

Candle-27.jpg

【ステップ19】

テーブルの境目から"上"を長方形選択ツールで囲み、下記の設定でマスクします。

レイヤー名:Wall-dark 1〜2
新規調整レイヤー>レベル補正>出力レベル:65

下図のようにレイヤーマスクサルネームを選択して、ブラシツール(色:黒:レイヤー直径:100〜300px)でロウソクの炎から奥へ明るくなるように段階的に調整します。

Candle-28.jpg

【ステップ20】

テーブルの境目から"下"を長方形選択ツールで囲みマスクします。(レイヤー名:Table-dark)

"Table-dark"レイヤーのレイヤーモードを「乗算」にして、ブラシツール(色:黒:レイヤー直径:100〜200px)でテーブルの脇を暗くします。

"Table-dark"レイヤーの下に、新規レイヤー(レイヤー名:Table-light)を作ります。

レイヤー名:Table-light
レイヤーモード:ソフトライト、塗り:80%

下図のようにブラシツール(色:白(#ffffff)、レイヤー直径:200〜250px)でロウソクの周辺を少し明るくします。

Candle-29.jpg

【ステップ21】

"Candle_back"レイヤーと"Background"フォルダとの間に、下図のように2つのレイヤーを追加します。

(1)新規レイヤー(レイヤー名:Candle_shadow)

下図のように、ロウソクの付け根の部分に楕円形ツール(色:黒 #000000)で楕円を描き、スマートオブジェクトに変換します。

ぼかしを加え、レイヤーの塗りを85%にします。

フィルタ>ぼかし>ぼかし(ガウス):半径17.3px

Candle-30.jpg

(2)新規レイヤー(レイヤー名:Reflection)

今まで作ったロウソクの部分"のみ"を複製して、スマートオブジェクトに変換した後、オブジェクトを垂直方向に反転させます。

編集>変形>垂直方向に反転

反射する部分を大きめにマスクした後、レイヤーマスクサルネームを選択して、ブラシツール(色:黒、レイヤー直径:100〜150px)で調整し、レイヤーの塗りを35%に変更します。

Candle-31.jpg

【ステップ22】

これで完成です。

Candle-32.jpg

PSDダウンロード(6.1MB)

和訳原文:"Create a Photo-Realistic Candle with Basic Photoshop Tools"

関連記事はこちら

UP↑

トラックバック(0)

このブログ記事を参照しているブログ一覧: Photoshop|火が灯るリアルなロウソク(キャンドル)の作り方チュートリアル

このブログ記事に対するトラックバックURL: http://weska.xsrv.jp/mtos/mt-tb.cgi/341

コメントする

アーカイブ

2011年10月

            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

プロフィール

ダイナマイト・ドラマー

名前:ダイナマイト・ドラマー
職業:Webデザイナー
好物:牛のたたきとビール