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デザイン

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

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

  2. WEBデザイン

    Photoshopでオシャレなネオンサインのような文字を作る方法

    おはようございます、新入社員のふきちゃんです!私はライブハウスに行くのが好きなのですが、バーカウンターに飾られてるレッドブルやハイネケンのネオ…

  3. WEBデザイン

    問い合わせフォームを追加しよう!Contact Form 7の使い方!

    おはようございます、最近はインスタグラムのおすすめ動画でひたすらポメラニアンの子犬の動画を見てひたすら癒されているふきちゃんです。韓国だけかはわか…

  4. WEBデザイン

    Photoshopで空模様の画像を作る方法

    はじめまして、テイクフォーの谷口です。今回初めて記事を書きます。さてその初回は、Photoshopで空模様の画像を作る方法をご紹介しま…

  5. WEBデザイン

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

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

  6. WEBデザイン

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

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

コメント

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

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

CAPTCHA


最近の記事

  1. レポート

    通勤でおすすめできるロードバイクの選び方
  2. HTMLコーディング

    最近流行りの静的サイトジェネレータについて掘り下げてみる【Movable Typ…
  3. お知らせ

    中崎町に移転しました。
  4. WEBデザイン

    WordPressを日本語化させよう!WP Multibyte Patchって?…
  5. WEBデザイン

    投稿記事を複製しよう!Duplicate Postの使い方
PAGE TOP