【後編】photoshopで作る金色のツボとコツ!未経験でもワンランク上のWebデザイナーなろう!




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

この記事にご訪問したということは、photoshop(フォトショップ)で「金色の装飾にいつも苦労している」と悩んでいるのではないでしょうか?

デザイン制作でリボン風の帯や◯◯1位みたいなメダルを作っても、「あれ?雰囲気に合ってないよね?また作り直しだ!」と先輩デザイナーさんのリテイクが終わらないのでは?

私も、かなり悩みましたよ。何度も何度も直してやっとできたと思っても合格点にはまだ足りない・・・

同期デザイナーと比べてもちょっと見劣りする・・・

何が足りないのだろう?

とずっと悩み続けます。

デザインは突き詰めて行くと終わりがないものですが、ある程度の範囲はコツとかツボを掴む事で金色作りの工数は格段に減っていきます。

私の記事を読めば、ちょっとコツを掴むだけでphotoshop(フォトショップ)である程度は金色が作れるようになるのでがんばってやってみましょう!

記事の最後に金色に編集済みのPSDファイルをダウンロードできるようにしました!ぜひ記事のやり方をパクって金色グラデーションをマスターしてください!

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

金色は単色ではない

まずカラーパレットで色を1つ抽出してみてください。もちろん何かの色が抽出されて何色か把握できると思います。
では、カラーパレットの中から金色を1つ抽出てみましょう。黄色にもベージュにも黄土色にも金色は見当たらないですよね。

お気づきかと思いますが、

金色は存在してるけど存在しません

「じゃあ、ガンダムの百式はどうなるんだ!」
※百式:昔のTVアニメのガンダムで登場する仲間。内容は割愛するが金ピカで目立つモビルスーツ。

よく見ると、百式は黄色を中心に複数の色を活用して描かれていますね。
つまり、金色は単色では描けなくて、ある程度近しい色を複数使って描くのです。

photoshop(フォトショップ)のグラデーションに、百式のような複数の色で構成すれば金色の表現が可能になります。

中の人
まず、金色に近い色を複数抽出してみるのが最初のコツだよ。

金色の種類

私は金色の表現を2種類に分けられると考えています。

  • 色幅をおさえて作る方法
  • 白色を活かして作る方法

前回の記事でグラデーションのコツは色幅をおさえる事と書きましたが、金色の表現では百式のようにカチッとした色使いで金色を表現する場合があります。

例えば、スポット的に強い光をあてたキャンペーンサイトとかポイントが付きを説明するお得バナーデザインに適している表現ですね。
※ポイント付与の参考バナー。カチッと白をいかした金色の表現でデザインしています。
中の人
この2つの表現方法をマスターすればある程度作れるよ。

サイトデザインの色味やジャンルに合わせて金色の表現は変化させる

  • 濃淡が変わる
  • エンボスが変わる
サイトデザインの背景が明るい場合と暗い場合で金色の目立ち具合は変わっていくので、必要に応じてグラデーションの色味を調整していきます。
※金色の濃淡が変わるだけでサイトデザインも大きく変わってくる。

さらにもっと高級感を求めたり、ギラギラしたとにかく目立ちたいデザインの場合は、エンボス加工をどんどん活用していきます。

金色の作り方

それでは、実際に作っていきましょう。

デモ画像を用意しました。金色グラデーションの角度を90度、0度、-90度にした場合と背景の色違いでどの表現がマッチするのかが分かります。

色幅をおさえた金色

実際の仕上がりはこれ。

グラデーション設定はこれ。

コピペはここから
#c08d1a, #ebd17c

中の人
色幅をおさえた一番ベーシックな金色だね。

白色を活かした金色

実際の仕上がりはこれ。

グラデーション設定はこれ。

コピペはここから
#fec835, #e0b265, #f6f5d9, #fedb35

中の人
白から黄色に変わる幅が極端に短いのがポイントだね。でも背景が白だと文字が見えなくなるのがマイナスなんだ。

濃淡を加えた金色

実際の仕上がりはこれ。

それぞれのグラデーション設定はこれ。

コピペはここから
#906112, #d69918, #f6e395, #85600f, #9e7303, #cf941b

中の人
グラデの濃淡が濃いとお互いがケンカするデザインになるんだ。お互いを合わせた工夫を施すのがポイントだね。

エンボスを加えた金色

実際の仕上がりはこれ。

グラデーション設定はこれ。

コピペはここから
#906112, #d69918, #f6e395, #85600f, #9e7303, #cf941b

中の人
グラデの濃淡が濃いけど、軽くエンボスを入れるだけで文字が少し読みやすくなるよ。
他にもエンボス加工は、ノイズやソフト調整で印象ががらっと変わるから試してみてね。

素材サイトを金色素材を活用するのもアリ!

素材サイトにアップしている金色デザインは、プロの職人たちが作った業物ばかりです!
容赦なく活用してみましょう!でも、このデザインがいい!で選ぶのではなく、デザインの色味を意識して複数選んでください。サイトデザインにマッチした金色じゃないと
「何か違う!」
が再び発生します!

私がおすすめするのはイラストACです。
イラストレータのファイルは、細部まで細かく作り込んでいる物が多いので、金色の色使いの勉強にもなるし、そもそもデザインの勉強にもなります。

中の人
他にはSNSでイラストを配信している人とかは、イラストACにアップしている人もいるので、仲良くなっておすすめを教えてもらう方法もあるよ。

後編は以上です。
最後に金色のツボとコツをまとめておきました。

  • 一番ベーシックな金色は色幅をおさえて作る
  • キャンペーン的に訴求するデザインは白色を活かして作ってみる
  • デザインの色味が変わると雰囲気が変わるので金色の濃淡も変化させる
  • とにかくギラギラさせるにはエンボスを加える
中の人
私の記事はヘタクソなので上手くノウハウを受け取ってもらえないかもですが、最後まで読んでいただいて感謝いたします。
ささやかながらPSDを用意したよ。DLはこちら

グラデーションについて前編も読んでおさらいしませんか?
【関連記事】
前編【グラデーション効果】photoshopのツボとコツ!未経験でもワンランク上のWebデザイナーになろう!

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

【簡単!】気持ちのよい文字組み(カーニング)をマスターしてWebデザインスキルを磨こう!

2018.11.24

化粧品・コスメで訴求がしっかりしているランディングページ(LP)のデザイン6選

2018.01.28

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

2018.10.15

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

2018.11.13

【Webデザイン上達のコツ5選】普段の生活の中で、デザイン力を身につける方法!

2018.11.23


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

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



スポンサード広告 by google