今日は具体的なデザインを０から作っていく方法をご紹介しますね。
今回のお題はWEBサイトのトップ画像。
ざっくりな流れは
❶文字入れ
❷文字デザイン
❸レイアウト
❹画像挿入
❺最終仕上げ
です。
それではやっていきますね。
❶文字入れ
内容をPhotoshopでただ入れます。
❷文字デザイン
ポイントで色入れていきますね。
太字調整
大きさも大事なところは大きくしましょう。
内容がブロックになっていて、情報を塊ごとにわけましょう。
こんな感じです。
❸レイアウト
右側にスマホのイメージ画像を入れたいので、
文字を左にずらしましょう。
文字も少し装飾しつつ。
１つ目の塊をグループとして視覚化するべく色四角で囲みます。
❹画像挿入
イメージ画像と一番メインのキャッチコピーの箇所に背景画像を置きます。
一番下のフレーズも色付け、強調を入れデザインしていきます。
細かいんですけど、
デザイン豆知識として。
レイヤー効果として白の光彩とドロップシャドウを付けます。
そうするとこんな感じに変化しました。
ぐっと視認性が上がりましたね！
もう一息。
❺最終仕上げ
このままだと余白がないので、効果的に余白を作り、全体的に整えていきます。
まず全体的に小さくして。
私はベクターイメージを使ってこんな風に整えてます。
レイヤーモードを乗算にすると余白が足りてない場合下のレイヤーと重なるるのでわかりやすくなります。
横余白
縦余白
その調子で全体調整
ああ、しかしここの背景画像の横幅が揃ってませんね。
これは美しくない。。
レイヤーを統合させて、マスクでクリッピングさせます。
揃った！
最後に気になるところをチャチャッとやって
完成です。
コメントを残す