![見出し画像](https://assets.st-note.com/production/uploads/images/88463382/rectangle_large_type_2_9778fbcf17ffd82f47ccc56bf9db9b79.png?width=800)
009 バナーを作ろう! -文字組をしてみよう-
ヘッダー画像:UnsplashのRemy_Lozが撮影した写真
STEP01.文字組みをしてみよう
(1)「2022年 12⺼1日(木)OPEN!」のレイヤーサムネイル部分をダブルクリックで文字を選択状態にします
![](https://assets.st-note.com/img/1665991930955-3d32JlAwvT.png?width=800)
![](https://assets.st-note.com/img/1665993932297-KYQeENlPTQ.png?width=800)
(2)文字の設定
文字パネルでフォントを「ヒラギノ角ゴ」ウエイトを「W6」(フォントはなんでもOK!文字の太さが選べるやつがいいね)文字サイズを28px、カラーを「#91908c」カーニングを「メトリクス」にしてください。
![](https://assets.st-note.com/img/1665992054545-zuSkuPOTdj.png)
![](https://assets.st-note.com/img/1665993972903-1PNcjmEGT0.png?width=800)
(3)文字ツールを使って「年」を選択。文字サイズを18pxに。
![](https://assets.st-note.com/img/1665993995651-q5d3cDSLt6.png?width=800)
![](https://assets.st-note.com/img/1665994026565-tekQE7vQau.png?width=800)
(4)同じように「月」、「日」「(木)」の文字サイズを18pxに。
![](https://assets.st-note.com/img/1665994063360-RqHEErAVgP.png?width=800)
(4)「(木)」の( )の部分だけウエイトを「W3」(細いウエイト)に
![](https://assets.st-note.com/img/1665994095172-sjaMN2UQYt.png?width=800)
![](https://assets.st-note.com/img/1665994138105-0gL02HXI0E.png?width=800)
年、月、日の文字サイズを小さくしたり、カッコを細くしたりするとグッとクオリティーがアップすると思います。
これ以外に文字間隔の微調整などを行えばもっとよいと思います。
文字組みは情報を整理して伝えるデザインにとってはものすごく重要です。もちろん美しく見せることにも気を遣うことも忘れないで。
バナーに限らず目を引く広告を見つけたときは、どうしてなんだろう、どこが良いんだろうと言う意識を持って見ておくと良いと思います。
電車でも街を歩いている時でも広告、看板など意識して見る癖をつけると良いと思います。
背景画像と重なって文字が見にくくなっているので、次は文字の周りに白い線をつけるよ。
STEP02.文字に枠線をつけましょう
(1)「2022年 12⺼1日(木)OPEN!」の文字レイヤーを選択後。
「fx(レイヤースタイルを追加)」ボタンを押して境界線を選択してください。
![](https://assets.st-note.com/img/1665993301067-LVL0JFMz7X.png?width=800)
(2)サイズを2px 位置を外側 カラーを#ffffffに設定してOK
![](https://assets.st-note.com/img/1665993249829-6aDZTq15jl.png?width=800)
(3)周りに線がつきました
![](https://assets.st-note.com/img/1665994175093-XWHNhXDwL2.png?width=800)
STEP03.文字の大きさと位置を調整しましょう
文字を選択し、バウンディングボックスをクリック
四角を持つと拡大、縮小が出来ますのでガイド内にピッタリ収まるくらいに調整しましょう
位置調整もしてみてください
![](https://assets.st-note.com/img/1665994340866-NV6uGCko1F.png?width=800)
大事なところは一文字ずつ調整が必要です!
とりあえず今はこのまま!
段々とレベルアップしましょう。
他の文字も同様に下記を参考にやってみてください
![](https://assets.st-note.com/img/1665995193763-5VrAeJaDEx.png)
次回は背景画像を調整するよ
この記事が気に入ったらサポートをしてみませんか?