レッスンへ移動
ae↗独立系
デザインスタジオ
← レッスン一覧へ

ピクセル・模様・動き / 色の実験

柔らかな形。
広がる色。

輪郭から始め、
色を漂わせ、
少しの質感を残す。

色を広げる ↓読了約8分 · 編集できる拡散の実験

柔らかく記憶された形。

形 → 柔らかさ → 色 → 質感
淡い紙の上の、細かな粒子と鮮明な文字を持つ柔らかな青い犬
04 / 少しの質感を残す

固定した細かな粒子が印刷の感触をつくります。文字は鮮明に保ち、目の休む場所にします。

輪郭 + 中心 + 光の輪 + 粒子

考え方 / 縁を空気感へ

少し曖昧に。
少し感じやすく。

色が形の縁を越えると、対象を残しながら境界が移行に変わります。静かな背景と細かな粒子が、その移行を物質的にします。

レイヤーを別々に観察し、組み合わせます。生成したマスク、Canvasのぼかし、色の場、ノイズを使い、各設定が完成したポスターを変えます。

01 / 分かる形から

輪郭が柔らかさの対象になる。

淡い背景に単純な形を置きます。犬なら垂れた耳、目の穴、三角の鼻、花なら花びらのリズム。細部が失われても全体の輪郭で意味を保ちます。

画面外の小さなマスクで塗りの場所を決め、空白は紙を見せます。元のベクター形状なので画像のアップロードなしで試せます。

硬いマスク中心 + 光の輪
マスクの濃さ → 色を置く場所

試してみよう: 「形」で犬、花、球を比べ、「輪郭」で何が特徴を伝えるか観察します。

02 / 縁を越えて色を

柔らかな中心、広い光の輪。

強いぼかしだけでは曖昧な塊になります。狭いぼかしの中心と広いぼかしの輪を使い、中心で対象を、輪で紙への広がりを保ちます。

拡散を徐々に増やすと、小さな穴が大きな輪郭より先に柔らかくなります。中心の強さで暗い層の不透明度を変え、縁を硬くせず特徴を保てます。

細部がある柔らかく、まだ読める特徴が薄れる
拡散画像 = 柔らかな中心 + 広い色の輪

試してみよう: 「拡散」をゼロから少しずつ上げ、目や花の中心がかすかに読める点を探します。

03 / 色に空間を

背景も参加させる。

輪郭の近くに広く静かな色の場を置き、ずらした輪で非対称にします。下や横へ遠く広がる色を、淡い紙が見せます。

パレットは紙、中心、輪、場を同時に変えます。青は冷たく濃く、珊瑚色は暖かく明るく、アイリスと苔色は別の空気感に。形と拡散は固定して比べます。

色の場 + ずらした輪 → 周囲の空気感

試してみよう: 「色」でパレットと広がりを比べ、色が消える場所が見える余白を残しましょう。

04 / 柔らかさのあとに質感

少しの粒子で表面を戻す。

拡散は縁、粒子は表面を変えます。別々に調整できるよう、完成した色に固定した単色ノイズを薄く混ぜます。

編集してもノイズの配置は変わりません。多すぎると微妙な移行を隠すので、少量から使用サイズで判断します。

柔らかな色 + 固定した細かなノイズ → 印刷の感触

試してみよう: 「仕上げ」で粒子0、30、80%を比べます。濃い中心と淡い紙を別々に見て、コントラストのある場所の質感を確かめます。

05 / 明確な休む場所を

形を動かし、文字は鮮明に。

周囲の余白が必要です。ハンドルか矢印で形を動かし、少し非対称な構図も試します。

タイトルとキャプションはぼかしの外に置きます。鮮明な縁で視線の休む場所をつくり、短いタイトルや文字なしを比較します。

柔らかな対象 + 鮮明な文字 + 余白

試してみよう: 「文字」でタイトルを書き、形を離します。Homeで位置、リセットで実験全体を戻します。

06 / レイヤーを組み直す

編集できる工程に。

画像編集では紙、輪郭、中心、輪、色の場、粒子、文字を別々にします。輪郭を複製して2つのぼかしをつくり、マスクで元の形を残します。

最終サイズにして粒子を判断します。サンプルは1600 × 2000で直接描き直し、描画、操作、形のマスクを内蔵。外部画像や準備は不要です。

紙 → 輪郭 → 拡散 → 色 → 粒子 → 鮮明な文字
紙 → 形 → 拡散の層 → 色 → 粒子 → 鮮明な文字

試してみよう: 同じ色と構図で、滑らかな版と粒子のある版を保存します。小さくしてどちらが保たれるか比べましょう。

実践 / 同じ形、ふたつの気分

輪郭はそのまま。
変えるのは 空気感。

寒色、控えめな拡散、少ない粒子の版と、暖色、広い輪、目立つ質感の版をつくります。

形、タイトル、位置を固定して保存し、対象が失われる前に気分がどれだけ変わるか見ましょう。

色に戻る ↑
自分でつくる:動くサンプル +

単独HTMLに3つの形、4つのパレット、ぼかし、固定した粒子、文字、スタイル、操作を内蔵。ブラウザーで開いて編集でき、サーバー、インストール、外部画像は不要です。

core = blur(colouredMask, smallRadius);
halo = blur(colouredMask, widerRadius);
poster = paper + colourField + halo + core;
poster = addStableGrain(poster);
drawSharpTypeAbove(poster);

動くサンプルをダウンロード ↓

個別のソース: パレットと拡散のモデル · ポスターの描画と操作.