ウェブページのカラーマッチングにおけるオーバーラップとソフトカラーマッチングの手法を詳しく説明

ウェブページのカラーマッチングにおけるオーバーラップとソフトカラーマッチングの手法を詳しく説明
この記事には、細かい点は一切なく、カラーマッチングのテクニックをシェアするだけです。とてもシンプルで、シンプルすぎて思わず涙が出そうになりますが、あなたにとってはとても実用的で、言葉を失うほど実用的かもしれません。それはもともと自然からの贈り物だったのに、あなたと私がそれを拾い集めただけなのです...
ウェブページの視覚的な側面は、主にフォーム(またはレイアウト)、色、画像、テキスト情報で構成されています。デザイナーは通常、フォームの感覚を重視します。視覚的なインパクト、デザインの違いや革新性は主にフォームのプレゼンテーションに依存し、色は主に全体的な認識、デザインの品質、視聴者の感情に影響を与えるためです。多くの場合、私たちは良いフォームをデザインしても、この原稿が持つべき品質を達成できません。残念ではありませんか?
フォームは考えて作成する必要があり、画像素材は学習して処理する必要があり、テキストは分類して配置する必要がありますが、Webページの色を自由に使用できるようになるには、必ずしも自然な色彩感覚、豊富な理論、そして長年の経験が必要でしょうか?
もちろん違います!
インターネットにはWebページのカラーマッチングに関する記事がたくさんあり、中には氾濫しているものもあります。少し注意を払った学生なら、「カラーホイール」や「カラーカード」などの補助的なカラーマッチングツールを知っているはずですが、そのほとんどは印刷媒体のカラーシステムから拡張されたもので、Webページに完全には適用できず、大きな制限さえ生じます。たとえば、カラーホイールを使用してWebページの色を選択することを真剣に考えていますか?たとえば、以下に示す色の組み合わせで、同様のWebページデザインのニーズに次々と自由に対応できますか?
ウェブページのカラーマッチングにおけるソフトカラーマッチング Sanlian チュートリアル
CMYKとRGBのカラーモードの違いにより、Webページに表示される色の数ははるかに多く、選択の自由度は高くなります。しかし、色合わせに関しては、汚い、灰色、派手なデザインなどの大きな問題に遭遇することがよくあります。この問題を解決する必要があります。
Web ページのケース分析「Web ページの色の一致は 3 を超えてはいけません。」
確かにその通りですが、それは色相(赤、オレンジ、黄色、緑、藍、紫などのさまざまな色)に関するものです。
色相の違いが明らかなので、メインカラーの選択が簡単です。一般的な方法としては、対照的な色、隣接する色、寒色と暖色の補色などがあります。単純に設定することもできますし、成功した作品からメインカラーと補助カラーの比率を直接借りることもできます。たとえば、一般的な朱色に濃い青を飾ったり、明るい黄色に濃い緑を飾ったりします。
しかし、通常、私たちが直面する必要があるデザイン要件には、色の割り当てに関するより多くの問題があります。
(私はゲームウェブページのビジュアルデザインに携わっているため、事例はすべてゲームウェブページで説明されています。他の種類のウェブページについては、検討のため、または参考のために拡張できます)
上記のように、Web ページの情報量に応じて、色領域の階層的な分割やテキスト情報の階層的な区別が増えます。そのため、「Web ページ上の色 (段階) は 3 つ以下」という原則を守りながら、同じ色族内でより多くの色を探してデザインを改善すること、つまり「彩度」と「明度」に取り組むしかありません。
この問題を解決するためにこの記事で紹介したいのが、重なり合うソフトなカラーマッチング法という「自然な」カラーマッチング手法です。
重ね合わせやソフトな色合わせのテクニックの共有(これが本文です、上記はすべてデタラメです)
この方法はとても簡単です。三角関数や四則演算の知識は不要、カラーインデックスやヒストグラム、さらにはカラーグラデーションカーブや輝度レベルを理解する必要もありません。色についてまったく意識しなくても大丈夫です。
★オーバーレイ、ソフトライト、透明度(塗りつぶし)の3つのキーワードを理解するだけで十分です。
これら 3 つのキーワードがまだ不明な場合は、それらの場所を覚えておいてください (下の図を参照)。
注意: 透明度は塗りつぶしとは少し異なります。塗りつぶしは「ブレンド オプション」の効果に影響しませんが、透明度はレイヤー全体に影響します。
ちなみに、このカラーマッチング技術の原理を理解するには数分かかります。
つまり、「オーバーレイ」および「ソフト ライト」ブレンド モード (効果は彩度と明るさを調整するのと似ています) を通じて純粋な白 (#ffffff) と純粋な黒 (#000000) を使用して、任意の色に最も一致する色を取得します (その後、透明度を調整して最も適切な補助色を選択します)。
(上記の例では、オーバーレイ/ソフトモードで白黒ブロックの透明度を調整することで(例として10%から100%までの整数値をとります)、明らかな違いのある40色の組み合わせを得ることができます。このテクニックにより、理論上、各色は「間違いゼロ」で無限の「自然な色の組​​み合わせ」を簡単に得ることができます!)
★ オーバーレイ モードとソフト ライト モードでは、画像の最も明るい部分と最も暗い部分が調整されないため、このカラー マッチング方法は純粋な黒と純粋な白には機能しません。
設計実演:
上の写真のように複雑ですか?
いいえ、上記の方法を理解していれば、アイコンを忘れて、自由にデザイン作業を行うことができます。
3つの簡単なステップ:
① 黒または白、または白黒のグラデーション(点、線、面、フォントでも可)
② ブレンドモードにオーバーレイまたはソフトライトを選択します ③ 透明度を調整します(1%〜100%はオプションですが、最も簡単な方法は整数値を直接入力することです。たとえば、テクスチャが薄いページの場合は20%〜40%を選択し、テクスチャが濃いページの場合は60%以上を入力できます)
以下のように表示されます。
(メインカラーが何であっても、白黒オーバーレイであってもソフトライトであっても、完璧にマッチした配色を簡単に得ることができます。PSD ソース ファイルが添付されています)
これは、色域の分割やいくつかの二次色の抽出にのみ適用できるわけではありません。以下に示すように、フォントの色、詳細線、ボタンのグラデーション、コーナーのハイライト、ストロークの影などをすべて白黒で自由に適用できます。
メソッド拡張(詳細)
このメソッドをボタンに適用すると...
ブレンディングオプションの「シャドウ、外側の光彩、ストローク(ソフトオーバーレイ方式は使用しないでください)、内側のシャドウ、内側の光彩」により、5 層のピクセルレベルのディテールを自由に表現できます(もちろん、実際の使用では通常 1 ~ 3 層で十分です)。
そして、形や色がどのように変化しても、これらの詳細は形に従い、それに応じて色が変化します。詳細を再調整したり、盲目的に色のマッチングを選択したりするのにかかる時間を大幅に節約できます。
詳細、品質、効率、一石三鳥!
(最近、デザイン界隈で「Web ページのカービングはお勧めできない」という議論を目にしました。ディテールが習慣になり、美しさが直感になるのであれば、カービングは単なる普通のデザイン行為です。)
事例経験:
追記:
重なり合う柔らかな配色法:トリックに勝るトリックはない~捉えどころのない感覚は洗練されたコンピューターに任せて、科学的にデザインを実行します。
より短い時間、より高品質、あなたにふさわしいものですね〜......
もう一つのことは、方法は死んでいるが、人は生きているということです。カラー レベル、カーブ、カラー バランスなどを利用して、より多くのトリックを作成できます...

<<:  CSSスタイルの記述順序と命名規則と注意事項

>>:  LeetCode の SQL 実装 (183. 注文をしたことがない顧客)

推薦する

WeChatアプレットはウォーターフォールフローのページングスクロール読み込みを実装します

この記事では、WeChatアプレットのウォーターフォールフローページングスクロールロードを実装するた...

MySQL インジェクションにおける outfile、dumpfile、load_file 関数の詳細な説明

SQL インジェクション脆弱性を悪用する後期段階では、MySQL のファイル シリーズ関数を使用して...

JavaScript によるデータ視覚化: ECharts マップの作成

目次概要予防1. 使用方法2. 実装手順予備実装コード効果: Geo共通設定上記の構成を追加した後の...

win10 での mysql 8.0.16 winx64 インストールの最新グラフィック チュートリアル

このデータベースをダウンロードするには、多くの時間とトラフィックがかかります。踏み込んだ落とし穴で時...

HTML は CSS スタイルと JS スクリプトを動的に読み込みます。例

1. スクリプトを動的に読み込むウェブサイトの需要が高まるにつれて、スクリプトの需要も徐々に増加しま...

JavaScript 関数呼び出しの典型的なサンプルコード

目次JavaScript 関数呼び出しの典型的な例JS関数の定義と呼び出し方法要約するJavaScr...

Vue3 を使用してアップロード コンポーネントを実装するためのサンプル コード

目次一般的なアップロードコンポーネントの開発以下の機能を実装する必要がありますカスタムテンプレートサ...

Docker を使用した MySQL のデプロイの詳細説明 (データ永続化)

この記事では、Docker を使用して MySQL をデプロイし、データを保持する方法について簡単に...

MySQL の全体的なアーキテクチャの紹介

MySQL の全体的なアーキテクチャは、サーバー層とストレージ エンジン層に分かれています。サーバー...

CSS 背景画像を設定するための 6 つの興味深いヒント

background-image は、おそらくすべてのフロントエンド開発者がキャリアの中で少なくとも...

MySQL 面接の質問: ハッシュ インデックスの設定方法

B-Tree インデックスに加えて、MySQL は次のインデックスも提供します。ハッシュインデックス...

Tomcatを自動的に開始するサービスとして設定するにはどうすればいいでしょうか?最も簡単な方法

Tomcat が自動的にサービスを開始するように設定します。最近、問題が発生しました。サーバー上のプ...

Vueユーザーが長時間操作せずにログインページからログアウトするように実装する2つの方法

目次問題の説明フロントエンド制御(方法1)アイデアコードバックエンド制御(方法2)アイデアコード要約...

js 基本構文と Maven プロジェクト構成チュートリアル ケース

目次1. jsステートメント2番目、js配列3. js関数4. メイヴンV. 結論1. jsステート...

Linux コマンドラインで電卓を使用する 5 つのコマンド

みなさんこんにちは。私は梁旭です。 Linux を使用するときに、計算を行う必要がある場合があり、そ...