owned mediaウェブ制作に役立つコンテンツを発信中!

【デザインワークショップ】vol.1 金属の質感をグラデーションで表現する

最終更新日: Update!!
今回はデザインワークショップと題しまして、あるテーマに沿ってデザインワークを行っていきます。第1回目である今回のテーマは「金属の質感をグラデーションで表現」です。 こちらのブログでも前回グラデーションに関する記事を紹介しましたが、今回は金属の質感を表現するといった内容に焦点をあてて紹介していきます。   ゴールド(金)、シルバー(銀)、カッパー(銅)など金属にはたくさんの種類があり、それぞれ色も異なります。そして金属は光の当たり具合で明るい部分や暗い部分の色が変化し特徴的なグラデーションが出来上がります。そのグラデーションを細かく作り込むことで、よりリアルな金属の質感を表現することができます。  
グラデーションの作り方
まずはじめに今回のようなリアルな質感を表現する際の、グラデーションの作り方を説明していきます。また、こちらのテーマではAdobeのIllustratorやPhotoshop、Fireworksなどの画像制作ソフトを使って進めていきます。   【 1. 素材となる写真を用意する 】   【デザインワークショップ】vol.1 金属の質感をグラデーションで表現する   より本物っぽく、リアルな質感を表現するために色見本となる写真を用意します。選び方のコツとしては色がはっきりと表現されていて、コントラストが強いものが良いです。 ちなみに、アクセサリーや金属片、スクラップなど写っている素材自体はなんでも構いません。   【 2. スポイトツールで色をピックアップする 】   【デザインワークショップ】vol.1 金属の質感をグラデーションで表現する   そして先ほど用意した写真を参考にグラデーションのカラーを選定していくのですが、ここでスポイトツールを使って色をピックアップすることがポイントとなります。 スポイトツールを使うことにより、実際のカラーに近づけることができますし、色の選定も迷うことなく素早く行うことができます。   では、上記の方法を踏まえて実際に作っていきたいと思います。  
ゴールド(金)
【デザインワークショップ】vol.1 金属の質感をグラデーションで表現する デザインをする上でも使用する場面が多いおなじみのカラーですね。派手さや高級感などを演出したい時には有効なカラーでもあります。  
シルバー(銀)
【デザインワークショップ】vol.1 金属の質感をグラデーションで表現する こちらもゴールド(金)と並んでよく使われるカラーです。シックで洗練された印象によく用いられます。  
カッパー(銅・赤銅)
【デザインワークショップ】vol.1 金属の質感をグラデーションで表現する 深いグラデーションの色合いがキレイなカラーです。明るめ〜暗めまで色合いの幅が広く、いろんな表現が可能です。  
ブロンズ(青銅)
【デザインワークショップ】vol.1 金属の質感をグラデーションで表現する 同じ銅でもカッパーと違い、ブロンズ特有の錆色を表現しています。グリーンよりのくすんだカラーが特徴的ですね。  
ブラス(黄銅・真鍮)
【デザインワークショップ】vol.1 金属の質感をグラデーションで表現する くすんだ彩度の低いゴールドのようなカラーです。ゴールドでは表現できない、アンティークな雰囲気にマッチしそうなカラーですね。  
スチール(鉄・鋼)
【デザインワークショップ】vol.1 金属の質感をグラデーションで表現する シルバーと同じく銀白色ですが、黒っぽいくすんだグラデーションになります。デザインでは重厚感や男性的なイメージに使えそうですね。  
プラチナ(白金)
【デザインワークショップ】vol.1 金属の質感をグラデーションで表現する シルバーに似ていますが、より明るくハイライトが多くなったのが特徴的です。女性らしさや清廉な印象を与えますね。  
番外編:パール(真珠)
【デザインワークショップ】vol.1 金属の質感をグラデーションで表現する 金属ではありませんが、グラデーションが特徴的なこちらのカラーも表現することができます。乳白色の濃淡がとてもキレイなカラーです。     いかがでしょうか、今回は代表的な金属カラーを中心にグラデーションで表現しました。ウェブや印刷物のデザインをする上でもこのようなカラーは登場する場面も多いかと思いますので是非参考にしていただければ嬉しいです。   次回もデザインワークショップとしてテーマに沿った形でデザインを考えていきたいと思います。テーマも募集しておりますのでこちらのメールフォームよりお気軽にメッセージください。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram