webデザイン

細部(ディティール)へのこだわりがWEBデザインに差をつける。Photoshop編

魅せる伝えるヘッダーデザインを作成する5つの工程の5番目、ここでは⑤ 細部の作り込みについて解説します。

①~④までの工程を経由することで、魅せ方や伝え方を踏まえたうえでブランディングイメージができたと思います。完成まではあと一歩!細部までこだわりクオリティの高いヘッダーデザインを完成させよう。

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

スッキリしすぎ

↑ 全体の構成はできてますが、スッキリしすぎてどこか高級感を感じられない・・

⑤ 細部の作り込み

[大人達]の枠に光沢をつけ高級感を演出し、画像下1/3に少しワインレッドを重ねヘッダー単体で配色バランス60:30:10に近づけました

スッキリしすぎ

枠同様の光沢をボディの上部にも追加し、ヘッダーにワインレッドが増えた分メインカラーやベースカラーの色彩を微調整

色彩を微調整

さらに② 構成要素の配置の工程で使用した黄金比や③ 色彩の統一の工程の配色バランスなどで全体で整え、必要に応じて装飾して完成しました

魅せる伝えるヘッダーデザイン完成

色彩を微調整

今回は【これでもうレイアウトや配色が苦手なんて言い訳ができないっ!魅せる伝えるヘッダーデザインを作成する5つの工程。Photoshop編】というタイトルで誰がやっても再現性を高くするために、できる限り分かりやすく解説したつもりですがいかがでしたか

途中でキャッチコピーを変えたり、色彩や配置を調整したりしてますが実際のデザイン業務において修正や調整も必要なのでそのままの流れを組んでみました。

基本を身につけたらあとは個々のセンスで勝負ですねっ!お互い素晴らしい作品を生み出せるように精進していきましょう。

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

ピックアップ記事

  1. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  2. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  4. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  5. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…

関連記事

  1. webデザイン

    【※保存版】WEBデザイナーご用達の本当に使える商用フリーの素材サイトをまとめました。

    WEBデザイナーは技術はもちろん、手持ちのリソース(情報など)が多いほ…

  2. webデザイン

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

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

  3. webデザイン

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

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

  4. webデザイン

    photoshopで結露のしたたる曇りガラスに指で文字を書いたような表現をするチュートリアル

    雨上がり、車の窓から外を眺めているような表現をするために、photos…

  5. webデザイン

    フォトショップでアメコミ風に加工する所要時間たった3分のフィルター活用テクニック。

    フォトショップのフィルターを活用すると、画像を印象をガラっと変えること…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. SEO

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

    「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  3. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  4. キュレーション

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

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