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. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  4. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  5. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ

関連記事

  1. webデザイン

    photoshopで写真をセピア調にする一番簡単な方法!

    写真をセピア調にしたい場合photoshopを使えば超簡単!ものの30…

  2. webデザイン

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

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

  3. webデザイン

    フォトショップで金色(ゴールド)の文字を表現してクオリティの高いロゴを作る方法

    金色(ゴールド)ってどーやって描けばいいんだろう?そう思うひとは少なく…

  4. webデザイン

    photoshopで普通のノイズを加えるだけじゃ満足できない人にはNoise Texture Gen…

    通常、画像にザラっとしたノイズを加える場合には ↓ のようにフィルター…

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

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

最近の記事

  1. Photoshop CCのメニュー文字やツールバーが異常に小…
  2. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単な…
  3. 「コレがやりたかった!」GIFアニメ(動く画像)のPCモック…

思考系のおもろい記事

ブログラ
  1. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  2. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. キュレーション

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  4. コピーライティング

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

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