webデザイン

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

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

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

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

スッキリしすぎ

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

⑤ 細部の作り込み

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

スッキリしすぎ

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

色彩を微調整

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

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

色彩を微調整

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

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

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

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

ピックアップ記事

  1. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  2. 「特訓Photoshopプロのテクニック教えます!」のWEB版を『無料』で一般公…
  3. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  4. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  5. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…

関連記事

  1. webデザイン

    123RFの格安素材を活用して素人っぽいWEBサイトから卒業しよう!

    ここでは123RFの格安素材を活用して素人っぽいWEBサイトから卒業す…

  2. webデザイン

    photoshopでまるで手書きの水彩画のように仕上げるためのフィルター活用講座。

    photoshopで水彩画風に仕上げるために、まず ↓ のように風景写…

  3. webデザイン

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

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

  4. webデザイン

    画像の上をカーソルでなぞってビフォアーアフターイメージを実装させるワードプレスプラグインBefore…

    当スリームデザインのブログではフォトショップ技術などを紹介しており、加…

  5. webデザイン

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

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

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

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

最近の記事

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

思考系のおもろい記事

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

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

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

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. フォトショップ

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

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