距離で色を薄める。
中心と半径を決め、近くで強く、遠くで滑らかに弱めます。基調色、移行色、淡い中心の3つを重ね、楕円の減衰で幅広い帯にもできます。
影響 = exp(−距離² / 半径²)
色 = 暗い土台 + Σ 光 × 影響
色 = 暗い土台 + Σ 光 × 影響
試してみよう： 「光」で＋を動かし、柔らかさ20%と80%を比べます。光の範囲だけが広がり、ページや文字はぼけません。
暗い四角から始め、
色に余白を与え、
ひとつの細部に光を受けさせる。
6つの気分、ひとつの画面。
光を置いて、バランスを探そう。
光の実験 / 小さな画面ガラス
＋をドラッグして光を配置 · 矢印キーで微調整
04 / 個性のあるカード
表現を選び、光を置こう。
光 + 形 + 控えめさ + 文字出発点を選び、自分の作品へ
考え方 / 色に余白を
暗い土台。
柔らかな、 光の到着。
四角の大部分を静かに保つと光が映えます。淡い中心から鮮やかな色を通って暗い土台へ消え、縁や折れ目、小さな印が視線を止めます。
色の場と形のマスクから6種類をつくります。ガラスと立方体は2Dの陰影で奥行きを表現。準備なしで試せ、サンプルにはシェーダー、文字、操作を収録しています。
点を流れに変える。
色を計算する前に2つの緩い波で座標を曲げます。同じ光が流れに見えます。ずれを控えめにし、広い静かな場所を保ちます。
サンプル位置 = 位置 + 流れ × 波のずれ
地平線は画面の下に光、折れた光は細い明るい線と広がる筋、色の流れは暖色と寒色を曲げて重ねます。同じ設定でも光の役割が変わります。
試してみよう： 色の流れと「流れ」を選び、0から100%へ変えます。折れた光と比べ、細い線が構図を変える様子を見ましょう。
ガラスは境界から。
角丸のマスクの境界への符号付き距離を求め、ゼロ付近に細い反射、内側に幅広く暗い帯を置きます。周囲で強さを変え、均一な線ではなく照らされた縁にします。
縁 = exp(−|境界までの距離| × 鋭さ)
角丸ガラスは淡い横の中心と濃い青を使います。立方体は3枚の投影面を異なる色の強さで描き、9本の辺をつなぎます。3Dの屈折ではなく描画した奥行きです。
試してみよう： 角丸ガラスと「ガラス」で縁0%と100%を比べ、立方体の前、上、横の面も見ましょう。
少しの粒子、十分な暗さ。
固定した画面座標のノイズをゼロ中心にして少し加えます。光が漂っても粒子は止まり、きらつかず構図を支えます。
質感の色 = 色 + (ノイズ − 0.5) × 量
広い暗部を残します。全面が明るいと光の主従が消えます。効果を増やす前に強さを調整し、小さなサイズでも確認しましょう。
試してみよう： 粒子0%と100%を比べ、光の強さを下げて余白をつくります。ギャラリーの小さな画像で6種類を見比べましょう。
レイヤーを編集できるままに。
編集ソフトでは暗い600 × 600の角丸画面に放射状グラデーションの楕円を置きます。寒色、暖かな移行色、淡い中心を重ね、光だけぼかし、文字と印は別の鮮明な層にします。
下からの光、中央の帯、すれ違う2色の3種類を試します。ガラスは細い縁と内側の反射、立方体は前・上・横の四角形と細い辺でつくります。
土台、色のたまり、反射、質感、印、文字と名付け、色だけを柔らかくできる構成にします。ブラウザーは場を計算し、編集ソフトは形とグラデーションで同じ原則を表します。
試してみよう： 異なる2種類を保存し、編集可能なグラデーションで光の主従を再構成しましょう。
短い言葉で十分。
最後に文字、キャプション、印を加えます。長いタイトルは縮めて四角に収めます。光に余白を残し、魅力的な場所を文字で覆いすぎないようにします。
「カード」で文字を編集し、印なしにもできます。光の漂いは任意の14秒ループで、ドラッグすると止まります。非表示や画面外で停止し、最初は静止です。
1600 × 1600のPNGに現在の色、表現、段階、文字を保存します。角丸の外の暗い部分を含み、＋や操作のラベルは書き出しません。
試してみよう： 短い言葉の表紙と、文字なしの抽象アイコンをつくり、バランスを比べます。
実践 / 同じ言葉、ふたつの気分
言葉はそのまま。
変えるのは 空気感。
短いタイトルを2枚で共有します。1枚目は紫の夕暮れ、柔らかな地平線、小さな星。2枚目は冷たいガラスの縁と強い中心の光。
保存して静かさと即時性を比べます。飾りを増やす前に光の位置を調整しましょう。
カードに戻る ↑自分でつくる：動くサンプル +
単独HTMLに6種類、WebGLシェーダー、Canvasの文字、操作、プレビューを内蔵しています。ブラウザーで開いて編集でき、サーバー、インストール、外部画像は不要です。
// A soft elliptical field.
float lightPool(vec2 position, vec2 centre, vec2 radius) {
vec2 delta = (position - centre) / radius;
return exp(-dot(delta, delta));
}
// Bend coordinates, sample colour, then add a rim.
vec2 samplePosition = position + flow * waveOffset;
vec3 colour = base + lightColour * lightPool(samplePosition, centre, radius);個別のソース： 光とプリセットのモデル · シェーダー、文字、操作.
もっと試してみよう次の発見：小さな液体世界 ↗