配色パターンからWebデザインを考える | Webクリエイターボックス

2010/03/23 2556 users 配色パターン Webクリエイターボックス webデザイン

ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 まずは色彩の三属性について 色は彩度・明度・色相の三属性（三要素とも呼ぶ）から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・... 続きを読む

デザイナーなら読んでおきたい！デザインに関する6つのスライド・企画書

2013/03/06 1181 users スライド 企画書 デザイン ノンデザイナー 6つ

こんにちは。 今日はデザインをする上で、1度は読んでおきたいスライドや企画書を6つ選んでみました。 色彩センスのいらない配色講座 「色の比率」や「色相の距離」、「トーン」などを意識してデザインを見てみると、いろんなが配色方法が発見できるかもしれません。 ノンデザイナーのための配色理論 人間の知覚に合った考え方、配色理論の紹介が記載されていて、配色理論を使った配色法が学べます。 Webデザインのセオ... 続きを読む

かおりゅ on Twitter: "とんでもないサイトを知ってしまった。絵描きやデザイナー大歓喜のカラーチャート『Colorbase』https://t.co/CLWprkukt6 色を選ぶと、その色の補色・類似色・同じ明るさを持つ

2021/09/04 1025 users 補色 絵描き https カラーチャート 類似色

とんでもないサイトを知ってしまった。絵描きやデザイナー大歓喜のカラーチャート『Colorbase』https://t.co/CLWprkukt6 色を選ぶと、その色の補色・類似色・同じ明るさを持つ色・白と合わせた時の見やすさ・色相… https://t.co/rOgsnechfT 続きを読む

Photoshop Tips - 風景写真をミニチュア写真に加工するには　- by StudioGraphics

2006/06/21 740 users ミニチュア写真 風景写真 彩度 レタッチ トーンカーブ

●ポイント１　−　 [ 調整レイヤー ] 風景写真独特の霞を取り除くために、 [ 調整レイヤー ] の [ トーンカーブ ] と [ 色相・彩度 ] を使って、写真のコントラストを上げて、彩度を強くし、色鮮やかな写真に仕上げます。いつものレタッチよりも、ちょっと大げさに調整してもよいと思います。このレタッチの目的からして、不自然な感じにするくらいの方が、かえってリアルになるわけです。 [ 調整レイ... 続きを読む

覚えておきたい配色のワザと便利なツール :: Love & Design ::

2007/05/17 689 users DESIGN 配色 LOVE ワザ Hue

色の3つの要素 配色を行う前に、色に関する基礎知識をおさらい。色は「色相・彩度・明度」の3つの要素によって成り立っています。明度だけの性質を持つ無彩色に対し、有彩色は色相、彩度、明度の3つの性質を持っています。これを「色の3属性」と呼びます。 色相（しきそう：Hue） 色相とは、赤・橙・黄・緑・青・紫などの色みのこと。 （色相はつながりあって色相環という輪になります。） 彩度（さいど：Satura... 続きを読む

[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル | コリス

2010/11/03 601 users コリス class チュートリアル CSS 階層

階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><... 続きを読む

Paletta - HSV Color palette for every Programmer

2013/08/20 585 users Paletta 彩度 明度 調和 カラーパレット

Palettaは顕色系(色相, 明度, 彩度)をベースに「調和のとれた色」だけを集めたカラーパレットです. 色を選択すると, 周囲の色が同系統の色に変わります. 画面上部のResetボタンを押すと, 色の選択が解除されます. PCから閲覧している場合は, カラーコードをクリックするだけでコードをクリップボードへ簡単にコピーできます.　詳しく 続きを読む

"絵を描く時に影の境目に別の色相を入れるとリアルになる"けど色の法則はあるの？→考察や解説が続々集まる - Togetter

2019/05/11 508 users Togetter リファレンス リアリティ 境目 手法

この影の境目に別の色相を入れる手法。なぜか最近までやってなくて、最近やってみたらリアリティにものすごい差があってびっくりしてるのですが、どの色を選んだらいいのか。という法則ってあるんですかね。写真のリファレンスがあれば一番でしょうけど、、 pic.twitter.com/U6a0N6w42b 続きを読む

コードがはっきりと見やすく使いやすい！Sublime TextとAtomとVim対応のテーマ -DuoTone Themes | コリス

2016/01/15 486 users コリス Atom sublime text インストール 部分

DuoTone Themes DuoTone Dark -GitHub コードがはっきりと見やすいカラー DuoTone Themesの5つのテーマ DuoTone Themesのダウンロードとインストール コードがはっきりと見やすいカラー DuoToneは2つの色相をベースに色調を変化させた7つのカラーで構成されています。 コードで重要な部分には強調したカラー、それほど重要ではない部分には和らい... 続きを読む

リリースされたばかりのカラースキームツールが簡単・便利で使いやすい！ -Colour Code | コリス

2013/03/18 300 users コリス 光度 彩度 colourco.de スクロール

画面は非常にシンプルですが、カラーに関して豊富な機能が備わったオンラインツールを紹介します。 Colour Code http://colourco.de/ 、いいドメインだ！ 使い方は簡単です。 カラーの変更 マウスの左右で、色相を変更 マウスの上下で、光度を変更 スクロールで、彩度を変更 ※スクロールはMagic Mouseじゃないとできないかも 基本操作 クリックで、カラーをロック ロックさ... 続きを読む

様々な場面で参考になるオススメUIデザインキット45選 - バンクーバーのWEB屋

2011/09/12 176 users バンクーバー iPhone UIキット Ｗｅｂ屋 参考

様々な場面で参考になるUIキットが世の中には本当に沢山ありますが、UIキットと言っても、その種類はPCからiPhoneやiPadなどのキャリア別、質感、色相や目的、本当に様々なUIがありますよね。 そこで今回は僕がこれまでのWEB屋歴の中で見つけたUIキットを僕なりにタイプ別に分けてご紹介。 どういう時に使うのかは人それぞれですが、沢山の人が考えに考えぬいたUIキットであれば、そこから得られる物も... 続きを読む

さくっとイメージで学ぶ『色彩の心理学』と『配色の基礎知識』 - Literally

2016/10/29 169 users 彩度 パラメーター Literally 明度 配色

2016 - 10 - 29 さくっとイメージで学ぶ『色彩の心理学』と『配色の基礎知識』 デザイン 今回は知っておくと何かと役立つ『配色の基礎知識』と『色の心理学』についてまとめます。 1. 色を決める3つのパラメーターをおさえよう まず、基本的なところを簡単に説明します。色を決めるのは、①色相 ②明度 ③彩度の3つのパラメーターです。 色相 赤、青、黄などの色みの違いを表します。これは分かりやす... 続きを読む

Photoshopで理論的に配色はできないものか検証してみた │ Design Spice

2012/07/09 126 users Photoshop 配色 Design Spice 動機 結論

最近は配色を作れるジェネレータや配色をシェアするサイトが多数あり、簡単に配色を作ることができます。ただ、そういうのに頼らずにもっとPhotoshopだけで理論的にできないものかと思い検証してみました。 動機 配色を作れるツールっていまいち使いこなせてないし、自分がイメージしてる配色をPhotoshopで理論的に作れたら楽だなと思って。 結論 最初に結論を述べます。 Photoshopで色相を使った... 続きを読む

知っておくと便利な「無彩色」の使い方 | *LOVE IS DESIGN*

2007/05/02 98 users LOVE IS DESIGN 無彩色 使い方 彩度 明度

白、黒、グレーのように色みを持たない色のことを「無彩色」と言います。 （むさい色じゃないよ！） 「無彩色」はどんな色ともマッチする反面、使い方によっては地味で無機質な印象になりがちですが、上手に使うとシックでスタイリッシュな雰囲気になります。今回は、色使いの基本として「無彩色」の使い方を紹介したいと思います。 色には大きく分けて「有彩色」と「無彩色」の2種類あります。有彩色は「色相、明度、彩度」の... 続きを読む

[CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説 | コリス

2018/06/08 92 users コリス CSS 一行 美しいエフェクト コントラスト

ボックスの内部に配置したテキストなどの子要素はそのままで、背景の色相やコントラストやぼかしを変更して、ガラス板のような美しいエフェクトを与えるCSSの新しいプロパティ「backdrop-filter」を紹介します。 今までは非常に長いスタイルシートが必要でしたが、たった一行で簡単に実装できます。 The backdrop-filter CSS property 下記は各ポイントを意訳したものです。... 続きを読む

最近のデザインでよく見かける色相を変化させた美しいグラデーションがまとめられた無料素材 -coolHue | コリス

2017/06/30 69 users Sketch コリス Photoshop グラデーション素材

最近のWebサイトやスマホアプリのデザインで人気が高い、色相を変化させた美しいグラデーション素材を紹介します。 Photoshop, Sketchのグラデーション素材として、またコードベースで利用することもできます。 c ...記事の続きを読む 続きを読む

フォトショップで色の置き換えをマスターする5つの鉄板テクニック【保存版】 - PhotoshopVIP

2017/09/25 64 users 彩度 PhotoshopVIP フォトショップ 右下 ひと

写真の背景から一部を切り抜く作業は、デザイン制作において重要なテクニックです。しかし、用途に応じてツールを使い分け、切り抜きを行っているというひとは、どれだ 01. 「モデルが着用しているドレスの色を変更したい。」 まずは色の置き換えを行いたいドレス部分のみを、お好みのツールを使って選択しましょう。続けてレイヤーパネルの右下より「新規調整レイヤー」の「色相・彩度」を選択しましょう。「色相」を調整す... 続きを読む

CSSでグラデーションを使うときにhsl()が便利すぎる。（CSS おれおれ Advent Calendar 2012 – 19日目） | Ginpen.com

2013/06/02 61 users hsl Ginpen.com Saturation CSS

CSS おれおれ Advent Calendar 2012 – 19日目 CSS 3では色の指定にhsl()を使う事が出来ます。すなわち色相 (Hue; 0-359)、彩度 (Saturation; 0%-100%)、輝度 (Lightness; 0%-100%) による色の指定です。さらに不透明度を加えたhsla()もあります。 グラデーションをlinear-gradient()で実現するとき、... 続きを読む

制作者はなんと15歳のイケメン！今風の美しいCSSグラデーションがコピペで簡単に利用できる -Gradient Hunt | コリス

2018/07/23 60 users コリス コピペ CSS 美しいCSSグラデーション イケメン

Webサイトやスマホアプリで人気が高い、色相を変化させた美しいグラデーションがCSSのコード・デザイン素材で利用できるオープンソースの無料サイトを紹介します。 制作者（@fmaldonadoy）は15歳のデザイナー兼We...記事の続きを読む 続きを読む

画像編集する際に、RGBばかりでなく色相・彩度・明度（H/S/L）も意識していますか？ : ライフハッカー［日本版］

2011/10/01 60 users 彩度 明度 RGB Tweet ライフハッカー

ソフトウェア , 写真 , 画像 , 趣味 画像編集する際に、RGBばかりでなく色相・彩度・明度（H/S/L）も意識していますか？ 2011.10.01 11:00 コメント数：[ 0 ] Tweet かれこれ10年以上画像編集ソフトを使っている人でも、色相（H）・彩度（S）・明度（L）が何なのかよく分かっていない人は多いのではないでしょうか？　RGBスライダは動かしても、このH/S/Lについて知... 続きを読む

カラーデザインの基本。色の三属性とは？

2012/04/27 55 users 三属性 カラーデザイン 基本 コミュニケーショ 彩度

色の三属性とは色相・明度・彩度を言います。この3つの属性を正しく理解することが、カラーデザインを極める第一歩となります。また、この3つを正しく理解していないと、多くの人たちと正しくコミュニケーションをとることができません。 たとえば、「もっと暗いブルーで全体を落ち着いた印象にしてくれ」と、ディレクターの上司に頼まれても、上司のイメージする色と、あなたのイメージする色が違えば、正しくコミュニケーショ... 続きを読む

電々伝記: ゲームモデルやローポリにおけるテクスチャの作り方メモ

2014/06/14 50 users ローポリ 彩度 明度 テクスチャ 後々

ゲームモデルやローポリにおけるテクスチャの作り方メモ ローポリのテクスチャ表現は作品のクオリティを決める重要な要素 テクスチャのレイヤーにもある程度のお約束事が存在する、それは 「色相、彩度、明度が個別に調整でき、尚且つ、レイヤー数が一定に保たれるようにする」 これは、テクスチャを作る際、その質も重要だが、後々の調整作業の時の管理のしやすさも求められるから なぜかというと、チームで制作する前提があ... 続きを読む

カラーコードより色を推測するメソッド(カラーコードの仕組みについて)

2015/06/11 47 users メソッド カラーコード 井畑 Photoshoptips 彩度

16進数のカラーコードの仕組みや法則を解説しつつ、カラーコードより「色相」「明度」「彩度」を推測する方法をご紹介します。creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 about contact こんにちは、井畑です。最近、暇つぶしの時にハマっているサイトにGuess the Hexというのがあります。これ... 続きを読む

任意の色からカラートーンのCSS指定をSassの変数で自動的に生成する - WEBCRE8.jp

2015/03/09 43 users Sass ピッカー 変数 ドーン CSS指定

使っている色の同色相でトーン違いの色を使うときわざわざ色を作るの面倒だなと思ったので、それを好きな色から作るSassの変数を作ってみました★ 色を選ぶときって皆さんはどうしているでしょうか。カラーチャートから選んだり、ピッカーで都度作る人もいると思います。 私はイメージにあったメインの色を選んだあとでそのトーン違いの色、色相違いの色という風に色の数値をずらすような感じで色を作ります。ですがそれをカ... 続きを読む

Canvasできれいな色相環を描画する : document

2013/08/14 41 users ＨＳＶ document canvas function 変換

8月14 Canvasできれいな色相環を描画する はじめに JavaScript で Canvas を使っていると、HSV の Color Picker とか作りたくなって色相環を描画したくなることがよくあるとおもいます。 ここでは、自分の行っている色相環の描画方法を説明します。 準備 色相を扱うのために HSV 色空間を使います。HSV から RGB への変換は以下の function を用いま... 続きを読む