前回、Photoshop で Web デザインを強化する方法の詳細を紹介しましたが、多くの友人は私が十分に話せなかったと感じており、Photoshop で特別なテキスト効果を作成する方法を知りたがっている友人もいました。実際、現在のWebデザインではよく使われるテキストエフェクトは少なく、実装方法も非常にシンプルなので、以下の内容がWebデザイン初心者の参考になれば幸いです。
私のこのチュートリアルでは、「グラデーション」と「シャドウ」という 2 つのキーワードに焦点を当てます。
1. より質感のある言葉
まず、画像のロゴを見てみましょう。テキストは外側に伸びていて、Web ページにしっかりと貼り付けられていないことがわかります。はい、テキストの色は単色の塗りつぶしではなく、「グラデーション」になっています。なぜ「グラデーション」のほうが質感が高く見えるのでしょうか。これは、自然光の効果をシミュレートしているためです。つまり、ハイライト部分が上にあるからです。同時に、テキストの「影」である別の詳細も無視しないでください。
では、どうすればよいのでしょうか?
画像の2番と3番に注目してください。グラデーションの追加方法がわからない場合は、レイヤーパネルの「レイヤー名」の右側の空白をダブルクリックするか、 の2番目のボタンをクリックしてください。下の画像 (下のレイヤーパネル内) を選択して、[スタイル] パネルを開きます。
「グラデーションオーバーレイ」を選択し、以下のようにグラデーションの色を「濃淡コントラスト」の2色を選択します。例では、明るい緑と濃い緑を選択します。照明効果をシミュレートします。
さて、残るは影だけです。いつものようにスタイルパネルの左側にある「影」をクリックし、以下のように設定します。
この方法を使用する他の Web サイトのデザインを見てみましょう。