webデザイン

これでもうレイアウトや配色が苦手なんて言い訳ができないっ!魅せる伝えるヘッダーデザインを作成する5つの工程。Photoshop編

ヘッダーにかかわらずポスターやDTP、WEBサイト全体のデザインなどを作成する際、構成要素の配置や個々の配色にはとかく頭を悩ませます

もともとセンスがあったり、デザイン業務が豊富な人でない限りそれらを感覚だけでバッチリ納めることは難しく、こっちを立てればあっちが立たなくなりいくら場所を移動して色味を調整してもチグハグでまとまらない、、そんな経験があったりしませんか?

そんな悩みがあるのなら5つの工程を参考にしてみてください。

  • ① 基調と概念
  • ② 構成要素の配置
  • ③ 色彩の統一
  • ④ 文章の表現
  • ⑤ 細部の作り込み
Photoshop CS6使用写真素材
全5つの工程約1時間リムジンに乗ったカップル
画面900×460:解像度72pixel/inch 123RF 》

① 基調と概念

ヘッダーデザインをする際には大前提として① 基調と概念を明確にする必要があります、逆にそれさえ明確になっていれば使用すべき素材画像や全体的な配色などもイメージつきやすくなります。

ただ見た目がキレイなサイトを作れるだけではなく、ウェブサイトにおけるヘッダーの役割が目的・用途によって全く異なることを知り、マーケティング要素 を理解したうえでデザインに起こせるようになると、多方面で重宝されるデザイナーになることができます。

基調と概念
ブランド名mischievous Dressy
ターゲット20代後半~30代前半の元ギャル系世代
キャッチコピーおとなしい大人になれない、おとなげない大人達へ。

ここでは、20代後半~30代前半の元ギャル系世代をターゲットに絞り【大人セクシーで高級感があり、それでいて落ち着きすぎないドレス・スーツ・ウェア・アイテムなどを扱うドレッシーなECサイト】のブランディングイメージを構築するヘッダーデザイン。

と想定してヘッダーデザインを作成していきます。

素材選び

まずは使用する素材選びです。

実際にアパレルブランドを構築するようなサイトの場合であれば、自社ブランドの洋服を着用したモデルを撮影した写真を使用することは説明するまでもありませんね

123rf

今回はスリームデザイン愛用の123RFから探してみます、安くてクオリティの高い素材が多く、担当の方のサポートがいいのですごく安心。 ⇒ 123RFについて

検索窓に大人セクシーなイメージを連想した【リムジン カップル】といったワードを打ち込んでみると、カッチョよい素材がいっぱい出てきました。

123rfサーチ

今回はこの素材を使用してみようと思います ↓

リムジンに乗ったカップル

基調と概念に添った画像が決まったら ② 構成要素の配置ヘッダーデザインのレイアウト(構成要素の配置)が苦手なら黄金比・白銀比ツールを活用しよう。Photoshop編】に進んでいきます。

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

ピックアップ記事

  1. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  2. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  3. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  4. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  5. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…

関連記事

  1. webデザイン

    fotoliaの有料素材を活用して個性的なWEBサイトに生まれ変わらせよう!

    ここではfotoliaの有料素材を活用して素人っぽいサイトから脱却して…

  2. webデザイン

    Photoshopで文字に影を付ける”3つの方法”を知っておくだけで表現の幅…

    Photoshopで文字に影を付けるには、レイヤースタイルのドロップシ…

  3. webデザイン

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

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

  4. webデザイン

    photoshopで立体を回転させるのはめちゃめちゃ簡単だった、、垂直方向が1分で完成!

    以前、こちらの記事で ⇒ これで解決っ!photoshopで壁から浮き…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. webデザイン

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

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  3. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. 3分の話

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

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