フリーランスデザイナーが自由なライフスタイルを実現するための新しいブログの活用法や個性的がほとばしるブログにするためのPhotoshopを使ったデザインのチュートリアルなどを公開中~。

ヘッダーデザインのレイアウト(構成要素の配置)が苦手なら黄金比・白銀比ツールを活用しよう。Photoshop編

ヘッダーデザインレイアウト

魅せる伝えるヘッダーデザインを作成する5つの工程の2番目、ここでは② 構成要素の配置について解説します。レイアウトが苦手でどうしてもしっくりこないという悩みも黄金比ツールを活用して解決しちゃおう!

  • ① 基調と概念
  • ② 構成要素の配置
  • ③ 色彩の統一
  • ④ 文章の表現
  • ⑤ 細部の作り込み

カッコ悪い構成要素の配置

↑ これじゃーちょっとカッコ悪いですよね・・

② 構成要素の配置

基調と概念に沿った画像をphotoshopで開く。

photoshopで開く

電脳狂想曲さんのWEBデザインの小技へアクセスし、ヘッダーサイズの横幅・縦幅を入力、黄金比(A4ポスターなどのJIS規格の場合白銀比のが相性が良いかも)にチェックしサクサクラインを引いていく。うまくいかなかったらリセットできます。

WEBデザインの小技

黄金比

ある程度ラインができたら、パソコンで画面キャプチャーを取ってフォトショップの新規レイヤーに張り付け、不透明度40%程度にする。

キャプチャー張り付け

黄金比で作成したラインを目安にカップル画像のサイズと場所を調整して、キャッチコピーとロゴを配置(今回は女性の鼻を縦に割るラインを強く意識してます)。

サイズ配置調整

テキストを明朝に変更しキャプチャー画像をはずせば、構成要素がすっきりと配置されたヘッダーデザインができてきました

構成要素の配置が完成

黄金比ツールを使いこなせるようになってくると、1枚の画像だけではなくウェブサイト全体の構成などでも応用がきくようになります。

続いて、③ 色彩の統一ヘッダーデザインの配色がチグハグになってしまうなら色彩を統一しよう。】に進んでいきます。

① 基調と概念 構成要素の配置 色彩の統一 文章の表現 細部の作り込み
スリームデザイン無料の公式メールマガジン スリームデザインのメールマガジン

関連記事

Wordpress日本語テーマのまとめ
個別ブログ相談会
photoshop日本語チュートリアル
ブログラ

スリームデザインの出版書籍情報

photoshopの本

fotoliaデザインコンテスト大賞受賞作品の解説

tenコレクションデザインコンテスト

スリームデザインおすすめの書籍

本 本本 本

スリームデザインとソーシャルで繋がろう!

 
 
 

カテゴリー