webデザイン

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

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

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

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

スッキリしすぎ

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

⑤ 細部の作り込み

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

スッキリしすぎ

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

色彩を微調整

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

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

色彩を微調整

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

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

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

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

ピックアップ記事

  1. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  2. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  4. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  5. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…

関連記事

  1. フォトショップ

    photoshopでしわ取りするのは案外簡単だよ。

    しわ取りするのは案外簡単、というより最近のphotoshopはすごい!…

  2. webデザイン

    ブクマ必須!見ているだけでPhotoshopスキルが磨かれる感性豊かなテクニック動画のまとめ

    テクニックとは、単なる技術のことを指すのではありません。頭の中…

  3. 3分の話

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

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

  4. webデザイン

    素人っぽいWEBサイトに見えてしまう4つのロゴデザインの特徴と誰でも簡単にできるPhotoshopと…

    ウェブサイトやブログなどでデザインクオリティの高いテンプレートを使用し…

  5. フォトショップ

    3分でわかる画像をフォトショップで切り取りする方法

    フォトショップで画像を切り取る方法はたくさんあります、バージョンが上が…

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

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

最近の記事

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

思考系のおもろい記事

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

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

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  3. 3分の話

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

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

    「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
PAGE TOP