webデザイン

ヘッダーデザインの配色がチグハグになってしまうなら色彩を統一しよう。Photoshop編

魅せる伝えるヘッダーデザインを作成する5つの工程の3番目、ここでは③ 色彩の統一について解説します。配色が苦手でどうもチグハグしてしまう、、そんな悩みは無用!配色バランス概念を知ってカラースキームに当てはめちゃえばいいじゃない。

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

チグハグな配色

↑ 感覚だけで色を決めようとすると浮いてしまうよね・・

配色の基本

配色バランスのベースカラー、メインカラー、アクセントカラーという基本概念を知ろう。

配色バランス

だいたい60:30:10ですが、70:25:5とかでもいけます。

ベース画像

今回ヘッダーで使用する画像ではベースカラーがダークブルー、メインカラーがワインレッドになりますが、アクセントカラーに迷ったらメインカラーの補色をもってこよう

アクセントカラー?

補色

画像レイヤーを複製してイメージ 》色調補正 》諧調の反転をしてテキストにメインの補色にあたるカラーを適用させる。

諧調を反転

諧調を反転させたレイヤーを削除し、【mischievousDressy】のロゴをメインカラーのワインレッドに変更すれば若干スモーキーなグリーンがアクセントとして効いたヘッダーデザインが完成しました!

アクセントに効いたヘッダー

しかし・・、完成したと思ったヘッダーをテンプレートにはめた途端グリーンがハンパない違和感を訴えてきます

テンプレ

この理由についてはもうお分かりのとおりですが、ヘッダーはウェブサイトにおける構成要素のひとつなのでサイト全体でブランドイメージを構築する場合には、その全体で配色バランスをとる必要があるわけですね。(ってことで、ここでは補色無しの方向で進みます。)

テンプレ配色

左の場合、サイト全体のベースカラーをダークブルーにすればメインカラーがワインレッドとなり背景に映る街灯の白色がアクセントカラー右のように白色をベースカラーにすればダークブルーがメインカラー、ワインレッドが必然的にアクセントカラーになります

現状、左はメインカラーの割合が少ないので背景にワインレッドのラメを散りばめたり、右はベースカラーの白色でボディの面積を広げバランスをとりながら調整するともっとしっくりくるのがイメージできるかと思います。

それではここから、サイト全体の構成要素を踏まえたうえで配色バランスを整えていこう!

③ 色彩の統一

テキストを入れる前のヘッダーのベース画像を保存。

ベース画像

Adobe Kulerにアクセスし、右上のカメラマークのところから画像をアップロード。

画像をアップロード

ColorfulBrightDeepなどに適したカラーを抽出してくれます(今回はColorful)。

Bright

Adobeのアカウントでログインすると抽出したカラーをSAVEすることができダウンロードも可能になります。(ログインしなくてもキャプチャーを取れば色を使用できますね)

カラーをSAVE

ダウンロードファイルをフォトショップで開けばスウォッチに追加されます。

スウォッチ

ここに追加されたカラーを使用すればまずハズレることはないでしょう

今回はベースカラーを街灯の白色、メインカラーをダークブルー(スウォッチの右から2番目)、アクセントカラーをワインレッド(スウォッチの右から5番目)で適用して ↓ このような感じで構成していこうと思います。

サイト全体の配色バランス

配色バランス概念を知って色彩を統一すればもう配色に迷うことはなくなりますね、Adobe Kulerの機能が素晴らしいので有効的に使えるようにしよう!

続いて、④ 文章の表現の工程ヘッダーデザインの役割に応じた文章表現の考え方と構成方法。】に進んでいきます。

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

ピックアップ記事

  1. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  2. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  3. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  4. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  5. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…

関連記事

  1. webデザイン

    ブクマ必須!見ているだけでPhotoshopスキルが磨かれる感性豊かなテクニック動画のまとめ

    テクニックとは、単なる技術のことを指すのではありません。頭の中…

  2. webデザイン

    photoshopで映画タイトルロゴのようなメタリックでカッコ良い文字を作るチュートリアル!

    スパイダーマンやアイアンマンなどいかにもMARVELの映画で出てきそう…

  3. webデザイン

    デザインのレイアウトが苦手なひとが今日から得意になってしまう、たった3つの方程式!

    ポスターやホームページのバナー、アイキャッチ画像など人目を引き付けるデ…

  4. webデザイン

    ひと味違うHDR風のディティールを表現する所要時間3分のフォトショップ技術

    HDRとはハイダイナミックレンジの略で最近ではiphoneカメラにも搭…

  5. webデザイン

    「コレがやりたかった!」GIFアニメ(動く画像)のPCモックアップ画像の作り方【Photoshop編…

    JPGなどの画像をパソコン画面にはめ込んだモックアップを作りたい場合に…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  2. SNS

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

    「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  4. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  5. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
PAGE TOP