#006 イルミネーション文字の作り方をインプット
おはようございます。こんです🦊
こちらのnoteで宣言した通り、昨日インプットしたことを記録します。
今日で6日目。なんとか一週間は続けられるかな。
今回は結構難しくて・・・正直もう少し突き詰めたかった。レイヤー効果をしっかり駆使できるようになるまでまだまだだなぁと感じました。
ただ、タナボタ的にブラシツール・パスツールの使い方が広がりました！
今回のインプットの目的
イルミネーション文字の作り方をインプットする。
季節感のあるデザインや、高級感のあるデザインの時に使ってみたいなと思いつつ、これまでうまく作れなかったので今回やってみました。
参考にしたデザイン
今回のインプットの成果
イルミネーション文字の作り方をインプット！
文字の中のライト（？パール？）部分は、ブラシツールを使って作成できる！
パスツールを使えば、曲線部分にも自在にブラシを引くことができる。
日時の表記は、時刻の「：」や（曜日）のジャンプ率、ベースラインの位置を丁寧に調整することが視認性にとても大事。特に（曜日）の文字間をコンパクトにしてあげると一行が長くてもまとまりがでる。
制作の手順
参考サイトを見つつ、レイヤー効果の設定はプレビューを見ながら独自に設定しました。（今回は完全にトレースしきれていないので詳細省略します）
配色の設定がむずかしい〜〜〜。
※私の備忘のために残しているので、下記に示す参考サイトを見る方が勉強になります！
（参考１：イルミネーションエフェクトの作り方）
（参考２：イルミネーションエフェクトの作り方）
（参考３：パスに沿ってブラシで線を書く方法）
【STEP1】テキストレイヤーで土台となる文字を作りレイヤー効果を設定する。
【STEP1-1】ベベルとエンボス効果を設定
【STEP1-2】光彩（内側）を設定
描画モードもプレビューで変更しながら設定してみると変化が見られた。
【STEP1-3】サテンを設定
【STEP1-4】光彩（外側）を設定
「さらにソフトに」にするか、「精細」にするかでもだいぶ違いが見られます！
【STEP2】イルミネーションの電球に当たる部分をブラシツールで作成する。
【STEP2-1】新規ドキュメントでブラシを定義する。
今回は、参考サイトを真似して500×500の新規ドキュメントに辺が7つの多角形（320×320）を作成し「編集」「ブラシを定義」で登録。
【STEP2-2】元のドキュメントに戻り、ブラシ用のレイヤーを新規作成する。
※先ほど登録したブラシを選択し、「ブラシパネル」から先端のサイズを変更。今回は先端サイズを8px、間隔を180%、色は白に設定。
※後ほどレイヤー効果を設定するため、ブラシ用のレイヤーを用意してそちらで描くのがおすすめ！
【STEP2-3】ブラシ用のレイヤー上で、まず直線部分のブラシで引く。
【STEP2-4】ブラシ用のレイヤー上で、さらに曲線部分のブラシで引く。
※この時、曲線部分をなぞるように曲線ペンツールでパスを作成し、
先ほどと同じブラシを選択して、「パス」の「ブラシでパスの境界線を引く」を実行すると、パスに沿った線が引ける！これは便利。
作業詳細は、参考3がわかりやすかったです。
【STEP3】ブラシレイヤーに光の効果を設定する。
【STEP1】と同じようにして、ベベルとエンボス、光彩（内側・外側）をうまく調整しながら設定する。
【STEP4】イルミネーションに電球部分を追加する。
【STEP2】のブラシレイヤーを複製して、ベベルとエンボスを設定する。
詳細な値は割愛しますが、（参考1）を見ながらだいぶ試行錯誤しました。
【STEP5】そのほかの文字を調整して完成。
ちなみに下段の日時のレイヤー効果は、ネオン文字を作った時のインプットが役に立ちました！
【おまけ】参考1〜3のサイトを見ながら、光の効果を調整し練習してみた。ブラシの間隔を変更したり、光彩の設定を変えるとだいぶ印象変わる。こっちの方が見やすい！
おわりに
最後まで見てくださりありがとうございます。
これまでで一番難しかったです。いつも何気なく見ているバナーだけど、目を惹かれるバナーには細かい気遣いが隠れているんだなと感じました。
この記事が気に入ったらサポートをしてみませんか？