WEBデザイン

色相環でグラデーションを描いてみよう

最近めっきり寒くなりまして熱燗のおいしい季節になってきました、こんにちはともさんです。
今回は色相環を使ってグラデーションを描いてみましょう、というお話です。

色相環とは?

web制作という職業についているなら、一度は聞いたことがあると思います。
というか、お世話になっているはず。
色相環です。
あの、円のやつです。

色相環

正式名称は「マンセル・カラー・システム(Munsell color system)」と言いますが、覚えてなくても良いと思います。
「あー、そんな名前やったなあ」くらいで。

最近流行りの2色グラデーションを描いてみましょう

というわけで実践です。

※当社ではグラデーションは一発で設定せずに、まず背景色1色を決め、次にグラデーションオーバーレイ設定でグラデーション色(描画色→透過色)を乗せていくスタイルをとっています。
以下の説明はそれに倣っていますのでご注意ください。

なんでも良いのでまずは色を1色、のせます。
カラー選択
こんな感じ。

ちなみに、数値は以下のようになっています。
赤枠部分をよく覚えておいてください。

次に、上に乗せていくグラデーションを設定します。
ここからがキモ。
グラデーション設定
まずはレイヤースタイルのグラデーションオーバーレイの設定画面を開きます。
おおむね、画像のようになっていればOKです。

グラデーションの設定時の注意ですが、透過色になる色は背景色と同じカラーを選択しておいてください。
この設定をしておくことで、グラデーションの色がなじみます。
グラデーション設定

グラデーションの描画色は以下の設定になりました。
グラデーション設定

さて、赤枠部分に注目してみます。
今回のグラデーションカラーは、HSBで設定します。
背景色を決めた後は、HSBのHのみを動かして描画色を決定しました。

いじる数値は人それぞれなんですけど「気持ちずらす」くらいがちょうどよく、今流行りの綺麗なグラデーションになりやすいと思います。
色相環でいうなら「隣の色」くらいですね。

これはテキストにも有効です。
あまり細いフォントだと綺麗に出にくいところですけど、やってみても良いかなと思います。
テキストのグラデーション設定

ついでに3色グラデーションもいってみます

3色グラデーションにも挑戦しました。

3色グラデーション設定
はい、ごめんなさい。
ほんと色とか苦手なんです。
すみませんセンスなくて。
もう許してください。
これでもがんばったんです。

ちなみに、ちゃんと3色です。
3色グラデーション設定

まとめ

私はほんとにカラー設定とか色選択が苦手で、「それでもイラスト描きか?」とか「それでデザインとかありえない」とか言われてきたクチです。
私のような人間がカラー選択する際には、以下のようなカラースキームサイトを酷使します。

Adobe Color CC
アドビの公式な提供サイトですが、カラー選択だけならAdobeCC契約してなくても全然使えます。

shade
さきほどphotoshopでしたような作業をブラウザでできます。コーディング時にとてつもなく便利。

paletton
パレット上で色サンプルを確認できます。実際のカラーのつながり等がわかりやすいのでwebサイトの配色ツールとしてよく使ってます。
あまり使ったことはないんですけど、指定した色の仮想ページの表示やHTML、CSS、LESS、XML、TEXTなどでも出力できたりするようです。

他にもいろいろとありますけど、今回はここまで。
グラデーションはCSSで直接指定ができるようになっているので画像として使用することはあまりないかもしれませんが、配色知識として知っておくことは重要かなと思います。

「CSSでグラデーションを描いてみよう」はまた別の機会に記事にしたいと思います。
お疲れ様でした。

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. WEBデザイン

    【Photoshop】ボタントレース方法

    こんにちは。ゆかちんです!すっかり寒くなってきましたね。ローソンのMACHIcafeで買ったココアがカップかわいくってほっこりします。入社…

  2. Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法

    WEBデザイン

    Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法

    どうも、テイクフォー谷口です。先日の3連休は地元の地車祭を観に行ったり、心斎橋一帯のライブハウスを巡るイベントに行ってきました^^さて…

  3. WEBデザイン

    Photoshopで付箋風のデザインを作る方法!!

    おはようございます、ふきちゃんです。私は未経験での入社でして、前職ではイラストレーターを使っていたのですが、Photoshopに未だに慣れず、…

  4. WEBデザイン

    ブログ内のリンク切れをチェックしよう!Broken Link Checkerの使い方!

    おはようございます、最近のお気に入りはYogi TeaのSkin DeToxです。ハーブティーですが、効果のほどは不明なので気休めに飲んでます。…

  5. WEBデザイン

    SNS共有ボタンを設置しよう!WP Social Bookmarking Lightの使い方!

    おはようございます、これを書いている間5回はchromeのブラウザが落ちたふきちゃんです。WordPressで記事を書いていると勝手に記事を下書き…

  6. Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    WEBデザイン

    Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    どうも僕です、テイクフォー谷口です。先週末は佳境を迎えたプロ野球日本シリーズやサッカーJリーグとスポーツネタで盛り上がってました^^(大阪…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. WEB集客

    誰でもわかるFacebook広告の仕組みについて
  2. WEBデザイン

    問い合わせフォームを追加しよう!Contact Form 7の使い方!
  3. お客様の声

    【お客様インタビュー】セブンオーセブンモーターサイクル小野様
  4. WEBデザイン

    ブログ内のリンク切れをチェックしよう!Broken Link Checkerの使…
  5. WEBデザイン

    SNS共有ボタンを設置しよう!WP Social Bookmarking Lig…
PAGE TOP