webデザイン

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

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

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

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

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

② 構成要素の配置

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

photoshopで開く

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

WEBデザインの小技

黄金比

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

キャプチャー張り付け

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

サイズ配置調整

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

構成要素の配置が完成

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

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

 

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

ピックアップ記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  2. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  3. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  4. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  5. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…

関連記事

  1. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本語のチュートリアルで…

    ここではスリームデザインが実際に仕事をする際に使っているほぼ全ての技術…

  2. webデザイン

    【保存版】Photoshopの技術を一気に飛躍させるための日本語で学べる実践テクニック7連発

    Photoshopの基本的な使い方の解説はたくさんありますが、デザイン…

  3. webデザイン

    知っといて損はない、魅力的なヘッダーデザインを作成するための目的・用途別の指南書。(photosho…

    ホームページやブログ・コンテンツサイトに欠かすことのできないヘッダー(…

  4. webデザイン

    わずか3秒っ!Photoshopで文字を中央に配置する方法

    Photoshopで文字や図形などを画像の中央(上下左右バッチリ均等)…

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  2. SNS

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  3. webデザイン

    「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  4. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  5. 3分の話

    フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
PAGE TOP