Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
今回はPhotoshopを使ってゼリーやグミのようなぷるっとした質感が特徴的なテキストスタイルを作成してみたいと思います。グラフィックで作り込むような広告媒体でタイトルコピーのスタイルとして目にすることもあるかと思いますが、実際に作ってみると少し工夫も必要だったりします。それでは早速作成してみましょう。
ベースとなるテキストを用意します。太字の丸ゴシック体や、柔らかい丸文字などが相性がよさそうですね。
今回は基本的にレイヤースタイルでデザインをしていきます。まずは「グラデーションオーバーレイ」で色味をつけていきます。できるだけ鮮やかで明るめの色にしておくとやりやすいです。
「ベベルとエンボス」で「ベベル(内側)」を設定し凸面を作っていきます。できるだけ柔らかな丸みになるようにします。ハイライトについてはできるだけ明るく反射光を強くしたいので、描画モードを「覆い焼き(リニア)」にしておきます。ポイントとしては、135°の角度で70°くらいの高度から光源を当てる形で適用するといい感じになります。
続けてベベルの「輪郭」を追加していきます。凸部分の曲面を強調させるようにしていきますが、あまり強くしすぎると周囲が暗くなってしまい、透明感が出にくくなるので注意します。
さらにベベルの「テクスチャ」も設定します。今回はゼリーっぽい水々しさを表現するので、水面のテクスチャを加えておきます。
次は「境界線」を敷き、テキスト周囲の明瞭度を上げておきます。目標とするデザインに合わせて境界線の色などを設定します。
「シャドウ(内側)」を設定していきます。曲面の裏側に影ができることで、よりリアルな見た目に近づけていきます。ある程度幅を持たせても良いのですが、濃くなりすぎないように注意します。
「光彩(内側)」を追加します。先ほど設定した内側のシャドウの反対側にハイライトが入るようになります。ここでも反射光を強調させたいので、描画モードを「覆い焼き(リニア)」に設定しておきます。
その後に「サテン」で表面の光や影の部分をランダムに反射させていきます。仕上がりイメージを見ながら適用量を調整していきます。
色々とレイヤー効果を重ね付けしていると暗くなってしまいがちになりますので、白色の「カラーオーバーレイ」を適用し明度と彩度を調整します。露光量を増やすように明るく鮮やかにしていきます。
最後に「ドロップシャドウ」で立体感を調整します。これでゼリーやグミっぽい光沢と透明感のあるスタイルが出来ました。
今回作成したスタイルの仕上がりはこのようになりました。袋文字などで多重構造にするとよりインパクトがある見た目になりますね。過去記事「Photoshopで輝きのある派手な立体装飾文字を作成する」でも詳しく紹介しているので合わせてご参考ください。
グラフィックデザインではこのような表現方法も使われるかと思いますが、ウェブデザインではあまり使う機会も少ないかもしれません。Photoshopは強力なレイヤースタイル機能が充実しているので、アイデアの一つとして覚えておきたいですね。












グラフィックデザインではこのような表現方法も使われるかと思いますが、ウェブデザインではあまり使う機会も少ないかもしれません。Photoshopは強力なレイヤースタイル機能が充実しているので、アイデアの一つとして覚えておきたいですね。
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories