前編【グラデーション効果】photoshopのツボとコツ!未経験でもワンランク上のWebデザイナーになろう!




こんにちは。
coffeebreakの中の人です。

この記事にご訪問したということは、photoshopで「グラデーション効果が上手く仕上がらない」と悩んでいるのではないでしょうか?
面接先でポートフォリオを提出した時、細かいグラデーション処理をやたら突っ込まれたりして何も言えないといったご経験はないですか?

実は私も同じ経験がありますし、Webデザイナーで仕事をしている人なら誰でも突っ込まれてきた事なのです。デザインの悩みはひとつずつちゃんと対策をしていけば大丈夫ですよ。

ということでちょっとコツを掴むだけで見違えるphotoshopの処理方法をお伝えしていくのでがんばっていきましょう!
変な言い方ですが、ぜひ記事のやり方をパクってグラデーションをマスターしてください!

ご注意
独学出身という事もあり私のデザインノウハウはセオリーと違う場合が多々あります。
そんな時は、変な人だなと思いながら記事を読んでいただければ幸いです。

グラデーションの色幅は大きく程変化させない

グラデーションの色幅を大きく設定しがちですが、プロのWebデザイナーはまったく逆の処理を施してます。
基本の色から10%〜15%程明るくするか暗くするかにとどめいるので確認していきましょう。

中の人
なぜ、色幅をおさえているのでしょうか?
それを意識して記事を見ていくと・・・

大手食品メーカーのWebデザイン例


明治のスマホページ。左側のナビゲーションボタンに注目してみましょう。色幅がおさえているのが分かります。
実際に色幅を広げたれのを右側に作ってみましたがいかがでしょうか。
ボタンが目立つのは良い事ですが、なんだか下品ですよね。
このようにデザインの品をおさえながらも目立つ処理をする事で周りとケンカしないデザインになるのです。


ヤクルトのスマホページ。左側のボタンに注目してみましょう。商品が見やすいように薄いグラデーションを施して色幅も少ないですよね。
逆に色濃くした背景を施してみたのが右側です。オリジナルサイトを紹介する見出しとケンカして大きな色の固まりができてしまいました。

中の人
色幅をおさえることで
周りの要素とバランスがとれるよ

Webデザインには色幅が大きいグラデーションはNGなのか?

NGというより向いていません。photoshopのグラデーションは直線や円周といった人工的なパターンで色を変化させる事しかできません。※がんばれば複雑にはできます
どういう事かと言うと、写真撮影のようなリアルな光沢や光彩とった表現には適していないので、デザイナーの手で作ったボタンや背景のちょっとしたグラデーション処理に向いているという事なのです。

中の人
光沢は自然でリアルな表現が必要だからphotoshopのグラデーション効果だけでは難しいんだね

まずは色幅をおさえる事からはじめよう!

グラデーションは、質を加える為にphotoshopが得意とする領域とそうでない領域を知っておいて、強みがだせる色幅の少ないデザインの処理(ボタンや背景)からグラデーション効果を身につけてみましょう。

さて次回は後編です。
テーマは金色の「グラデーション処理の方法について」です。
金色って目立ったり目立たなかったり野暮ったくなったりしてませんか?
その原因はRGB単色で表現できないからなのです。次回はこの辺りをおさえながら
グラデーションノウハウ
をお伝え致します。

中の人
私の記事はヘタクソなので上手くノウハウを受け取ってもらえないかもですが、最後まで読んでいただいて感謝いたします。次回もがんばって書きます!

この記事はここまで!
ここからはよく読まれる記事をまとめてご紹介します。ひとあじ違うデザインに出会えるかもしれません。

【化粧品・コスメ】乾燥肌訴求のランディングページ(LP)デザイン5選

2018.09.23

【年齢訴求別・5選】健康食品(ダイエット)のランディングページ(LP)ファーストビューとCVエリアデザイン

2018.06.17

前編【Webデザイナーを目指す人へ!】何故バナートレースがデザインスキル上達に最適なのか?

2018.10.21

【第3回】未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをアウトプットします!

2018.10.30

動画ランディングページ(LP)効果改善への道は映像業界を理解する事からはじまる

2018.01.14

ランディングページ(LP)にエディトリアルデザインを取り入れる。マーカー編

2018.05.04

【年齢層別・乾燥肌】化粧品・コスメのランディングページ(LP)デザイン5選

2018.09.29

【5選】ダイエット訴求のランディングページ(LP)を調査してデザインを研究してみた

2018.10.07

【第2回】未経験でも大丈夫!Webデザイナー志望の方へデザインノウハウをアウトプットします!

2018.10.23

前編【グラデーション効果】photoshopのツボとコツ!未経験でもワンランク上のWebデザイナーになろう!

2018.11.03


お気に入りの情報
が無かったでしょうか?
この記事の最後にデザイン情報やノウハウをレコメンド形式でご紹介しています。

お求めの記事に出会えますように。



スポンサード広告 by google