webデザイン

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

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

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

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

スッキリしすぎ

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

⑤ 細部の作り込み

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

スッキリしすぎ

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

色彩を微調整

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

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

色彩を微調整

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

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

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

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

ピックアップ記事

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

関連記事

  1. webデザイン

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

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

  2. フォトショップ

    photoshopでアンディ・ウォーホル風なイラストを作ってみよう。

    ポップアートの旗手と呼ばれるアンディ・ウォーホル風なイラストをphot…

  3. webデザイン

    photoshopで普通のノイズを加えるだけじゃ満足できない人にはNoise Texture Gen…

    通常、画像にザラっとしたノイズを加える場合には ↓ のようにフィルター…

  4. webデザイン

    意外と知らないっ、、Photoshopで文字の輪郭(境界線)だけに影を付ける方法

    Photoshopで文字の輪郭(境界線)に影を付けようと思っても、「外…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  2. 3分の話

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

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  4. フォトショップ

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

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