写真から濃淡を作る
feColorMatrixでRGBの重み付き平均を作り、コントラスト・明るさ・中間調を調整します。透明度は変更しません。
SVG FILTER / COLOR MAPPING
SVG Duotone Poster Studio.
写真を2色・多段階の配色に変換。色とレイアウトを調整して、SVG・PNGで保存。
DUOTONE WORKSPACE
写真の色を変え、ポスターにする
画像を準備しています…
比較表示・ハンドルは保存されません
EXPORT ARTWORK
同じ変換結果を、SVG・PNGで保存
SVGは画像データを埋め込み、SVGフィルターで色を変えています。写真をパスに変換するツールではありません。ポスターの文字も保存されます。
透明な入力画像の透明度は維持します。「画像のみ」には用紙色を付けません。文字はテキスト要素のため、SVGを開く環境によって書体が変わる場合があります。
SVGフィルターのコードを見る
フィルターをSVGのdefsに置き、対象のimage要素にfilter="url(#duotone)"を指定します。同じページに複数置く場合はIDを分けてください。
24 COLOR RECIPES
写真に合う配色を選ぶ
現在の写真で24種類を比較。選ぶと配色と濃淡の初期値を適用します。
該当する配色がありません。
HOW IT WORKS
明るさを取り出し、指定した色に置き換える
明暗へ配色を割り当てる
feComponentTransferのtableで色をなめらかにつなぎます。discreteでは、明るさを等間隔に区切って指定色へ置き換えます。
フィルター付きSVGを保存
画像と文字、フィルターを1つのSVGにまとめます。PNGもそのSVGを描画して保存するため、別の変換式は使いません。
デュオトーン風の画面表現です。印刷用の2版分版・CMYK変換・特色指定ではありません。写真は長辺最大1600pxに正規化し、アートボードは長辺1200pxで作成します。PNGの2倍保存は描画サイズを増やすもので、元写真の細部を増やすものではありません。
サンプル写真は既存デモで制作した架空の人物・風景です。配色名は見た目のイメージであり、特定の印刷方式を再現する保証ではありません。
参考：feColorMatrix ↗feComponentTransfer ↗color-interpolation-filters ↗