
#003 切り裂かれた文字を作る方法をインプット
おはようございます。こんです🦊
こちらのnoteで宣言した通り、昨日インプットしたことを記録します。
今日は3日目!明日は、3日坊主回避なるか!
今回のインプットの目的
文字の見せ方のバリエーションを増やしたい。
インパクトのある配色学びたい。
参考にしたデザイン

今回のインプットの成果

切り裂かれたような文字の作り方をインプット!
「黄色系」は視認性が下がる印象があったけど、背景色との相性で十分みやすくなるし、インパクトがある。
強めの色(今回だとかなり明るいイエロー)を使うときは、なるべく配色は統一し、ジャンプ率(フォントサイズやフォントウェイトを変える)で、強弱をつけた方が全体に統一感が出て読みやすい。
背景色に少しだけグラデーションを入れてあげると、抜け感が出て柔らかい印象になる。
制作の手順
※私の備忘のために残しているので、下記に示す参考サイトを見る方が勉強になります!
(参考):いろんな場面でとってもお世話になっているマッピーフォトさんのYoutube!
【STEP1】土台となるテキストレイヤーを作る。
※文字位置をずらしたいときは、一文字ずつ別レイヤーにしても良いが、
文字パネルの「ベースラインをシフト」を使って上下に配置すると数値管理できて便利!

【STEP2】隠したい範囲を「多角形選択ツール」で囲ってレイヤーマスクをかける。

【STEP3】STEP2で作ったレイヤーマスクを反転する。
(ショートカットは、⌘+I)

【STEP4】背景や写真、そのほかの文字を配置して完成!
おわりに
最後まで見てくださりありがとうございます。
ちなみに、あまりセンスのない記事のタイトルたちは、photoshopでの操作方法がわからず、検索する時に入力したワードたちです。
検索結果は、画像一覧で見てみると自分がイメージしているのに近い完成形の記事のサムネが出てきたりするので、目当てのものに早くたどり着けて便利だなぁと思いました!