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. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  4. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. webデザイン

    photoshopでまるで本物の油絵タッチに仕上げるためのフィルター&塗り方講座。

    photoshopで油絵タッチに仕上げるために、まず ↓ のように風景…

  2. webデザイン

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

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

  3. webデザイン

    TENコレクションシーズン3:デザインコンテスト第3弾 Surf in the Cityで受賞を頂い…

    私は現在、企業や組織に属することなく個人が創造性を発揮することで社会的…

  4. webデザイン

    ヘッダーデザインの役割に応じた文章表現の考え方と構成方法。Photoshop編

    魅せる伝えるヘッダーデザインを作成する5つの工程の4番目、ここでは④ …

  5. webデザイン

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

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

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. webデザイン

    「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  2. webデザイン

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

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

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

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
PAGE TOP