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

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

Photoshop

とけるチョコレートを作ろう

 

今回はPhotoshopで「溶けているチョコレート風」の加工をご紹介します。

文字の加工

とけるチョコレート_文字加工1
Photoshopで「chocolate」と打ち文字詰めをします。
カラーは「#953a12」です。

 

とけるチョコレート_文字加工2
文字が溶けているようにしたいのでペンツールを使いシェイプで雫を書いていきます。

 

とけるチョコレート_文字加工3
雫が一つだと雰囲気が出ないので隣にもう一つ描きます。

 

とけるチョコレート_文字加工4
「C」の部分が出来ました。
ここで作ったパスをコピーして他の文字にも足していきます。

 

とけるチョコレート_文字加工5
全部同じ大きさだとバランスが悪いので「編集 → パスの変形 → 拡大・縮小」で大きさに差を付けていきます。

 

とけるチョコレート_文字加工6
これで土台は完成です。
次からチョコレートのような質感にしていきます。

 

とけるチョコレート_文字加工6
先ほど作ったテキストとシェイプをラスタライズするのですが、その前に差分を残しておきます。
まず、作ったテキストとシェイプのレイヤーを複製し、「ラスタライズ前」というフォルダを作りその中に入れる。
「ラスタライズ前」というフォルダは非表示にしておきます。

 

とけるチョコレート_文字加工7
複製前のテキストとシェイプのレイヤーを選択し、右クリック「レイヤーを結合」を選びます。

 

とけるチョコレート_文字加工9
結合したレイヤーに「レイヤー効果:ベベルとエンボス」を入れます。
数値は上記の画像を参考に入れてください。
「ハイライトのモード」のカラーは「#fff」、「シャドウのモード」のカラーは「#5c3d2c」を入れます。

 

とけるチョコレート_文字加工10
結合したレイヤーに「レイヤー効果:シャドウ(内側)」を入れます。
数値は上記の画像を参考に入れてください。
「描画モード」のカラーは「#553417」を入れます。

 

とけるチョコレート_文字加工11
結合したレイヤーに「レイヤー効果:光彩(内側)」を入れます。
数値は上記の画像を参考に入れてください。
「構造」のカラーは「#855100」を入れます。

 

とけるチョコレート_文字加工12
結合したレイヤーに「レイヤー効果:サテン」を入れます。
数値は上記の画像を参考に入れてください。
「描画モード」のカラーは「#633701」を入れます。

 

とけるチョコレート_文字加工13
とけるチョコレート_文字加工13_2
結合したレイヤーに「レイヤー効果:グラデーションオーバーレイ」を入れます。
数値は上記の画像を参考に入れてください。
グラデーションの設定は左から「カラー:#6b3826 位置:1%」・「カラー:#2d2a26 位置:68%」・「カラー:#693227 位置:100%」です。

 

とけるチョコレート_文字加工14
先ほど加工したレイヤーを複製し、「レイヤー効果:ベベルとエンボス・シャドウ(内側)」以外を非表示にします。

 

とけるチョコレート_文字加工15
複製したレイヤーの「レイヤー効果」を変更します。
「描画モード:色相」「不透明度:63%」に変更します。

 

とけるチョコレート_文字加工16
複製したレイヤーに「レイヤー効果:ベベルとエンボス」の数値を設定します。
数値は上記の画像を参考に入れてください。
陰影のカラー設定は「ハイライトのモード:#fff」・「シャドウのモード:#fff」です。

 

とけるチョコレート_文字加工17
複製したレイヤーに「レイヤー効果:シャドウ(内側)」の数値を設定します。
数値は上記の画像を参考に入れてください。
構造のカラー設定は「描画モード:#000」です。

 

とけるチョコレート_文字加工18
また、先ほど加工したレイヤーを複製し、「レイヤー効果:ベベルとエンボス」以外を非表示にします。

 

とけるチョコレート_文字加工19
複製したレイヤーの「レイヤー効果」を変更します。
「描画モード:色相」「不透明度:68%」に変更します。

 

とけるチョコレート_文字加工20
複製したレイヤーに「レイヤー効果:ベベルとエンボス」の数値を設定します。
数値は上記の画像を参考に入れてください。
陰影のカラー設定は「ハイライトのモード:#fff」・「シャドウのモード:#fff」です。

 

とけるチョコレート_文字加工21
以上の加工が終了するとこんな感じになります。

 

とけるチョコレート_文字加工22
雫の部分に足りないハイライトを描き足します。
新規レイヤーを作成し「ハイライト」という名前にしてください。

 

とけるチョコレート_文字加工23
ブラシツールを選択し「ソフト円ブラシ 筆圧タイプ」を選びます。
「直径」は3〜5pxくらいにします。

 

とけるチョコレート_文字加工24
カラーは白を選び左上の方をワンクリックします。
大きめの雫のときはブラシサイズを少し大きくするときれいに描けます。

 

とけるチョコレート_文字加工25
全てに描き終わったらレイヤーの不透明度を「67%」にします。
これで文字の加工は完了です。
次からは背景を作っていきます。

背景の加工

とけるチョコレート_背景加工1
文字のレイヤーの下に新規レイヤーを作成し、ペンツールで上から流れているようなチョコレートのシェイプを作ります。
カラーは「#953a12」です。

 

とけるチョコレート_背景加工2
このシェイプにもレイヤー効果を入れていきます。

 

とけるチョコレート_背景加工3
「レイヤー効果:ベベルとエンボス」を入れます。
数値は上記の画像を参考に入れてください。
「ハイライトのモード」のカラーは「#fff」、「シャドウのモード」のカラーは「#5c3d2c」を入れます。

 

とけるチョコレート_背景加工4
「レイヤー効果:シャドウ(内側)」を入れます。
数値は上記の画像を参考に入れてください。
「描画モード」のカラーは「#5c3d2c」を入れます。

 

とけるチョコレート_背景加工5
「レイヤー効果:サテン」を入れます。
数値は上記の画像を参考に入れてください。
「描画モード」のカラーは「#5c3d2c」を入れます。

 

とけるチョコレート_背景加工6
「レイヤー効果:ドロップシャドウ」を入れます。
数値は上記の画像を参考に入れてください。
「描画モード」のカラーは「#454545」を入れます。

 

とけるチョコレート_背景加工7
こんな感じの見た目になります。

 

とけるチョコレート_背景加工8
シェイプのレイヤーの下に新規で塗りつぶしレイヤーを入れます。
カラーは「#d1af9b」です。

 

とけるチョコレート_背景加工9
ベタ塗りの背景だと浮くので上にグラデーションレイヤーを足して質感を加えます。

 

とけるチョコレート_背景加工10
数値は画像の通りです。

 

とけるチョコレート_背景加工11
グラデーションの設定は左から「カラー:#ffffff 位置:44%」・「カラー:#311608 位置:83%」・「カラー:#290e00 位置:98%」です。

 

とけるチョコレート_背景加工12
グラデーションレイヤーの不透明度を「38%」、レイヤースタイルを「乗算」にします。

 

とけるチョコレート_背景加工13
今度は文字が浮くので複製元の文字レイヤー(描画モードが通常のもの)に「レイヤー効果:ドロップシャドウ」を入れます。
数値は上記の画像を参考に入れてください。
「描画モード」のカラーは「#3b1601」を入れます。

 

とけるチョコレート_背景加工14
なんとなく文字のハイライトが強く感じたので1番上の文字レイヤー(レイヤー効果がベベルとエンボスだけのもの)の不透明度を「40%」にします。

完成

チョコレート
これで完成になります。
おつかれさまでした!

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

関連記事

  1. Photoshop

    素材の一部をテキストで表現する

    素材の半分をテキストで覆った魅力的なデザインを作ります。レイヤーや…

  2. Photoshop

    Photoshopで雪を降らせてみよう

    今回は、Photoshopで簡単に雪を降らせる方法を紹介します。…

  3. Photoshop

    飛び出す写真を作ってみよう

    飛び出す写真の作り方を今回紹介したいと思います。まず、レイヤー…

  4. Photoshop

    レイヤーカンプの基本操作

    Photoshopのレイヤーカンプとは、レイヤーの表示/非表示などの状…

  5. Photoshop

    便利機能!フレームで自由に写真を飾ろう!

    デジタルカタログやフリマアプリのバナーって、画像が綺麗に並んでいますよ…

  6. Photoshop

    広角補正で写真の歪みを補正しよう

    Photoshopで写真の歪みを修正する方法に、レンズ補正がありますが…

人気の記事

おすすめの参考書

PAGE TOP