Adobe認定トレーニングセンター

主にAdobeのソフト操作を紹介しています。DTPやWebの業務で役にたったことやツールのポイントなど参考になればと思います。 主観的なものもありますのでご了承ください!

リアルな湯気をつくろう

Photoshop

Photoshopでリアルな湯気を作ろう

使用ソフト: Photoshop CS5(CCでも可)  

料理の写真などを使いたいけどイマイチ何か物足りない・・・
そんな時、アクセントになるのが「湯気」ではないでしょうか?
今回は「湯気」をサクッとPhotoshopで作りましょう!

1.[ファイル]→[新規作成]からアートボードを作成します。
新規作成からアートボードを作成
今回は[W:700px][H:600px][解像度:72px/inch][カラーモード:RGB]で作成します。
名前は今回湯気を作成するので「湯気フィルター」とします。

2.アートボードを作成したら[塗りつぶしレイヤー]を作成し背景に「クリッピングマスク」をして、その上にもう1つレイヤーを作成します。
新規作成の結果
↓結果このような構成になります。↓
新規作成をしたレイヤーの構成

3.ペンツールで任意の大きさの逆三角形を作成します。
ペンツールで任意の大きさの逆三角形を作成
この時に「パス」ではなく「シェイプ」を選択して逆三角形を作成します。

4.[フィルター]→[ぼかし]→[ぼかし(ガウス)]を適用します。
ぼかし(ガウス)適用
作成した逆三角形の大きさにもよりますが、今回は[半径:20px]に設定します。

ぼかしを適用する際に下のような警告が出ますが[OK]を選択して続行します。
フィルターの適用時の警告

[ぼかし]を適用するとこのような結果になります。
ぼかしを適用した結果の逆三角形

5.次に[フィルター]→[変形]→[波形]を適用します。
波形フィルターを適用
[波数:5]
[波長:最小 20/最大 120]
[振幅:最小 5/最大 35]
[比率:水平 100%/垂直 50%]
[種類:正弦波]
[未定義領域:端のピクセルを繰り返して埋める]
に設定をします。
この際、「開始位置を乱数的に変化させる」をクリックすると形が変化します。
これは、作成した逆三角形のランダムな位置から設定(波長、振幅など)を反映させるために形が変化するということです。
このボタンをクリックする度に形が変わっていきますので、試してみてください。
今回は押さずに作成をしました。

[波形]を適用するとこのような結果になります。
波形フィルターを適用した逆三角形

6.次に[編集]→[波形をフェード]を適用します。
フェードを適用
[不透明度:50%]
[描画モード:通常]
に設定をします。

[フェード]を適用するとこのような結果になります。
フェードを適用した逆三角形

7.5,6を繰り返し実行します。おおよそ3回~4回で次のような形になります。
波形とフェードを繰り返した結果
この際[アクション]に5,6の手順を登録しておくと作業が非常に楽に行えます。

8.[レイヤーパネル]から[塗り:50%]に設定をします。
塗りを50%に設定
このような結果になります。
湯気らしくなってきましたがここから湯気に少し動きを与えます。

9.[フィルター]→[ぼかし]→[ぼかし(移動)]を適用します。
ぼかし(移動)の適用
[角度:-70°][距離:100px]に設定をします。

[ぼかし(移動)]を適用するとこのような結果になります。
ぼかし(移動)を適用した結果
これで「湯気」の完成です!
実際に使用してみましょう!

美味しそうなラーメンが・・・
合成前のラーメンの画像

湯気を付け加えることによってアツアツでさらにおいしそうに!
合成後のラーメンの画像

濃厚そうなカボチャスープも・・・
合成前のカボチャスープの画像

湯気を付け加えることによって思わずフーフーしてしまいそうに!
合成後のカボチャスープの画像
※フィルターを適用した際に[塗り][大きさ]を画像に合わせて変更をしています

こんな風に料理の写真などのアクセントに「湯気」を作って使用してみてはいかがでしょうか?

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

関連記事

  1. アイキャッチ

    Photoshop

    photoshopで画像の一部を簡単に消す方法!

    画像の不要な部分を簡単に消す方法今回はPhotoshopを使用して…

  2. Photoshop

    暑中見舞いをつくろうー画像のレタッチー

    絵を描くのが苦手…。風景のイラストを描くのが面倒…。そんな方に…

  3. トップ画像

    Photoshop

    Adobe Stockの素材を使ってオリジナルの缶をデザインしよう!

    みなさんAdobe Stockはご存知ですか?Photoshopや…

  4. Photoshop

    二つの画像を自然に重ねる

    ライオンの画像とシマウマの画像。レイヤーマスクを使い、二つを自然に…

  5. Others

    【今さら聞けない】MojaveでPhotoshop CS5文字ツール使えない対処法

    MojavaでPhotoshopCS5の文字ツールを使うとすぐに落ちて…

  6. Photoshop

    非破壊処理で逆光を描画

    非破壊処理とは。非破壊編集とは、元の画像データを変更せずに、見た目…

人気の記事

CodeCamp

おすすめの参考書

PAGE TOP