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. Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    WEBデザイン

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

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

  2. WEBデザイン

    よく見る方眼紙のようなパターンの作り方

    おはようございます、ふきちゃんですふきちゃんです、と書いている時高確率で安田大サーカスのクロちゃんで再生されております、小春日和のうららかな季節で…

  3. WEBデザイン

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

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

  4. WEBデザイン

    邦楽バンドのオシャレなWEBサイト10選(+α)

    おはようございます、私です。8月半ばから胃の不調に悩まされ続け、一時は胃潰瘍かとも思われておりましたが、先日とうとうお茶漬けを前にして一口…

  5. 【Photoshop】レイヤーを上手く使い回そう Vol.1スマートオブジェクト編

    WEBデザイン

    【Photoshop】レイヤーを上手く使い回そう Vo.1スマートオブジェクト編

    どうも僕です、テイクフォー谷口です。季節もいよいよ秋到来ですね。ただこの時期はまだ昼と夜の寒暖差があるので、体調管理には注意したいものですね。…

  6. WEBデザイン

    【illustrator】簡単トレース方法

    こんにちは!ゆかちんです(^^)/あっという間に寒くなってきましたね。コーヒーが美味しい季節です。グランフロントの中にあるDOWNSTAIRS…

コメント

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

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

CAPTCHA


最近の記事

  1. コピーライティング

    この秋オススメお菓子のキャッチコピー
  2. レポート

    さくさく進める勉強会準備
  3. レポート

    グリコードを使ってプログラミングを学んでみた!
  4. WEB集客

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

    【illustrator】簡単トレース方法
PAGE TOP