【Design 04】セールデザインバナー

Photoshopの学びの覚書として作成しています。

作成の流れ

1. 背景をつくる
2. タイトルの文字組（10%OFF）
3. タイトル周りの整列
4. タイトル上下のテキストを入れる
5. すべてのテキストをグループ化して中央揃え
6. 枠線を作る
7. ギザギザ円を作る
8. PDFファイルの保存とJPG書き出し

ポイント

背景をつくる

1. 新規レイヤーを作成
2. 塗りつぶしツール
3. レイヤースタイル→境界線（内側）で、緑の枠を作る→ロック

タイトルの文字組（10%OFF）

1. 「10」をベージュ色で入力
2. 「10」をコピペ→レイヤースタイル→境界線（外側）で緑の枠を作る→「塗り」を「0%」にして透明にする→①の「10」と重ねる
3. ②で作った「10」をコピペして「%」「OFF」をそれぞれ作る

タイトル周りを整列

ガイドラインを引きながら「10」「%」「OFF」を整える

タイトル上下のテキストを入れる

1. 上部テキスト下のアンダーラインはペンツールを使用
2. 左右のガイドラインに合わせて整列させる

すべてのテキストをグループ化して中央揃え

1. 上で作った背景以外をすべて選択してグループ化（title）
2. ロックを外した背景とグループ化したtitleを選択して中央揃え

枠線を作る

1. 枠線外のマージンを決める（60px）
2. 枠線（長方形）の大きさを割り出し（1,080×730px）、長方形を描く（塗り：なし/線：あり）

ギザギザ円を作る

多角形ツール（角数25～30、星の比率90％）で作成

なばな

Webデザインを勉強中の主婦です。シンプルで快適な暮らしを日々模索中。デザインの学びの記録と暮らしのヒントを綴ります。