ゲームアプリのデザインにおいて、割と頻繁に使われる「金色の文字装飾」。
イベント告知バナーや、キャンペーン告知バナー等によく使われます。
そんな「金色の文字装飾」は割と適当にグラデーションかけて発光させればそれなりに見えたりするんですが、ちょっとチープに見えたりしますよね。
今回はリッチに見える「金色の文字装飾」の作り方をまとめます。
さっそく、「金色の文字装飾」の作り方
1.テキストレイヤーを配置する
まずは、装飾を加えたいテキストレイヤーを作成しましょう。
今回は金色の文字を表現するべく、「ゴールドラッシュ」にしました。安直。
2.テキストレイヤーにレイヤースタイルを適用する
次に、工程１で作成したテキストレイヤーにレイヤースタイルを適用していきます。
テキストレイヤーには、「境界線」と「グラデーションオーバーレイ」をつけていきます。
どちらも金色っぽいグラデーションをのせるのですが、その時に下記を意識しましょう。
- 「境界線」につけるグラデは濃いめ
- 「グラデーションオーバーレイ」につけるグラデは薄め
これにより、次の工程で使用するレイヤースタイルが活きてきます。
3.テキストレイヤーをグループ化し、グループにレイヤースタイルを適用する
前の工程で作成したテキストレイヤーをグループ化しましょう。
そのグループに「ベベルとエンボス」のレイヤースタイルを適用。
そうすることにより、工程２でテキストレイヤーにつけた「境界線」部分に立体感をつけることができるので、金の重厚感、厚みを表現できます。
「ベベルとエンボス」のサイズを変えたりすると、立体感にもいろんな表情が出せるのでプロジェクトのイメージにあった加工に調整しましょう。
4.グループにレイヤースタイルを追加する
グループにつけるレイヤースタイルは「ベベルとエンボス」だけでなく、「光彩（内側）」もつけましょう。
光を受けて、輝いている表現が可能です。
また、「光彩（外側）」「ドロップシャドウ」で、より発光感を強めることで金っぽさが増します。
5.ハイライトを追加
工程４までに制作した素材に、ちょっと一手間を加えましょう。
各文字の角に、ハイライト的な表現を加えることで輝き感をさらに強調できます。
パスで斜めの形状に切り込んだ四角形を文字の角に配置し、マスクとスクリーンで輝いた表現をつけることができます。
6.キラキラエフェクトを追加
さらに、制作した素材にキラキラエフェクトを追加すると、さらにさらに煌めいた表現をのせることができます。
どんだけ輝かせるんだ、という感じですが笑
7.仕上げに文字の調整を
最後に、文字がレイヤースタイルで潰れてしまった箇所を修正です。
「ゴ」と「ド」の濁点が潰れてしまっているので、パスで引き直した感じです。
レイヤー効果を入れる前に調整する方もいるかと思いますが、どちらでも大丈夫です。
ここまでがざっくりと「金の文字装飾」の作る工程でした。
ここからは汎用性の話
上記の工程で制作した、「金の文字装飾」の素材ですが、様々な形に調整すれば汎用的に使えます。
「ベベルとエンボス」のサイズを変える
「ベベルとエンボス」のサイズを変えるだけでも、かなり表情が変わると思います。
先ほどまでの加工だと、文字の面がフラットな印象になっていましたが、こちらはより凹凸が感じられる加工になります。
また、上からのせた「ベベルとエンボス」、「光彩（内側）」の色が反映されて少しポップな色使いになります。
フォントを変える
フォントを変えるだけで、またガラッと雰囲気が変わります。
こちらは割とかっちりしたファンタジー系のデザインにも合う印象。
この「金の文字装飾」スタイルを１つ作るだけでいろんな形に転用できます。
まとめ：リッチな表現でプロジェクトのクオリティをあげよう
今回紹介した「金の文字装飾」で、プロジェクトのクオリティを上げていきましょう。
ただ、本当にベーシックな表現でもあるので、プロジェクトなりの工夫を追加して独自性は出す必要があります。
キラキラエフェクト１つとっても、プロジェクトで統一されたものを使っていると一貫したデザインに見えますよね。
文字装飾もそんな感じなので、ぜひこだわってみてください。