この記事は3分で読めます

【Photoshop】涼しげな文字をつくる

  • 投稿日
  • 更新日

あとで読む

【Photoshop】涼しげな文字をつくる

この記事では、 Photoshopのレイヤー効果の「パターンオーバーレイ」と「グラデーションーバーレイ」を使って、バナーなどに使える涼しげな文字のパーツを作る方法を紹介します。

イッパイアッテナ

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

加工前の下準備

レイヤー効果での加工に入る前に、文字の下準備をします。

STEP
ベースになるテキストを用意する

明朝体で、ウェイトは細すぎないものがおすすめです。

今回はヒラギノ明朝 ProNのW6を使用しています。

バナーにしたとき、個別に微調整することを考えて、「ひんや〜り」と「つめたい」のレイヤーは別で作っておきます

STEP
文字間を調整する

文字パネルのトラッキングでざっくり全体の間隔を詰め、個別にカーニングを調整します。

後から微調整できるため、大体で構いません。

STEP
文字を水色にする

寒色系(特に、青色や水色)を使用すると、涼しげな印象になります。

今回はカラーコード「#88e7ff」にしました。

レイヤー効果で加工

いよいよ、下準備した文字をレイヤー効果で加工していきます。

STEP
文字の中に水面の揺らぎを付ける

まず、文字のレイヤーを選択した状態で、「レイヤー効果」を開きます。開き方を3つ紹介します。

  1. レイヤー名などが無いところにカーソルを合わせ、ダブルクリックする(早く開けるのでおすすめです!)
  2. レイヤーパネルの「fx」(「effects=効果」の略称です)をクリックする
  3. レイヤー上で右クリック → 「レイヤー効果」を選択する

次に、「パターンオーバーレイ」→「」を選択します。今回は右端の水面を選択しました。

続いて、不透明度比率を調整します。今回は、不透明度80%、比率40%にしました。

最後に「OK」をクリックします。

(※レイヤー効果を調整するときは、プレビューにチェックを入れておくと、効果反映後のオブジェクトを実際に見ながら調整できるのでおすすめです。)

STEP
文字にグラデーションを付ける

先ほど加工した文字のレイヤーを選択した状態で、「レイヤー効果」→「グラデーションオーバーレイ」を選択します。

グラデーション」 → 「グラデーションエディター」を開きます(色の部分をダブルクリックすると開けます)。

お好みのグラデーションに調整します。

四角形のつまみをダブルクリックすると、「カラーピッカー」を開けます。また、こちらのつまみの位置は調整できます。

今回は、緑(#36c178) → 青緑(#2a90b2) → 水色(#2acdfc) のグラデーションにしました。

その他の設定は、今回、下記の通りにしました。

【 描画モード:通常|不透明度:40%|スタイル:線形|角度:90°|比率:100%|方法:知覚的 】

最後に、「OK」をクリックします。

STEP
別のレイヤーにも効果をコピペする

レイヤー効果はコピペできます。別のレイヤーに同じ効果を当てたいとき、便利です。

  1. 効果をコピーしたいレイヤーを選択 → レイヤー効果にカーソルを合わせて右クリック → 「レイヤースタイルをコピー」をクリックします。
  2. 効果をペーストしたいレイヤーを選択 → レイヤー上で右クリック → 「レイヤースタイルをペースト」をクリックします。

涼しげな文字パーツができました。

ここから+αとして、「レイヤー効果」→「ベベルとエンボス」を足すと、ぷっくり感を出せるのでおすすめです。

涼しげな文字をつくる手順まとめ

STEP
テキストの下準備をする

フォントを決め、文字間を調整し、テキストに色を付けます。

完成後に微調整もできるので、ざっくりで構いません。

STEP
テキストをレイヤー効果で加工する

まず、「パターンオーバーレイ」の「」で文字の中に水面を付けます。

次に、「グラデーションオーバーレイ」で文字にグラデーションを付けます。

また、+αとして「ベベルとエンボス」を足してみるのもおすすめです。

最後に

このように、レイヤー効果の組み合わせによって、さまざまな印象のパーツをつくることができます。

夏に涼しげな印象を与えたいときなどに、こちらの文字パーツを活用してみてください。

この記事で使用したデータの
ダウンロードはこちら

利用規約 ※必ずお読みください

この記事を書いた人

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Web制作について相談してみませんか?

必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。

会社名

任意

お名前

必須

メールアドレス

必須

電話番号

任意

お問い合わせ内容

必須