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. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  2. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  3. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  4. 「特訓Photoshopプロのテクニック教えます!」のWEB版を『無料』で一般公…
  5. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…

関連記事

  1. webデザイン

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

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

  2. webデザイン

    photoshopで背景を透明なままPNGで保存するのは簡単だよ!

    WEBサイトでアイコンやイラストなどを使用する場合、背景を透明なままで…

  3. 3分の話

    PhotoshopでGIFアニメーションをトゥイーンで作って保存する方法。

    Photoshopではタイムラインを使うことで動的なGIFアニメーショ…

  4. フォトショップ

    photoshopで上手なカラーハーフトーン設定をすると面白い印象になりますよ。

    ポップ調、アニメ、サイケデリックなどでよく用いられるドット柄はphot…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. SEO

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  2. webデザイン

    「特訓Photoshopプロのテクニック教えます!」のWEB版を『無料』で一般公…
  3. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  4. コピーライティング

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

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