AI生成の動作例用写真 / 編集前
DEVELOPMENT JOURNAL / 14
Photoshot
GITHUB × AI
無料Photoshop代替の開発記

色を階調にまとめる

量子化は既知の技術です。AIと既存の変換表およびバージョン処理につなぎ、境界の計算を改善しても古いプロジェクトが変わらない構造にしました。

PHOTOSHOT DEVELOPMENT JOURNAL / 14

AI生成の動作例用写真。編集画面と出力画像は実際のPhotoshotで作成しました。

Photoshot無料Photoshop代替の開発記 / 14FOUNDATION

ソースから始める。

既知の量子化を接続する

連続した成分値を限られた出力階調にまとめます。反転や明るさと同じ成分別変換表を再利用し、新しいレンダラーは作りませんでした。

階調数の入力、変換表、保存された調整のrevisionを接続しました。範囲は2〜256、初期値は6です。Adobe文書は成分ごとの階調数の意味を確認する参考です。

丸めと入力区間の違い

revision 1は正規化値をsteps−1に合わせて丸めます。revision 2は8ビット入力iからfloor(i×steps/256)で区間番号を作り、上限を制限してsteps−1で割ります。

新方式の4階調では0〜63が0、64〜127が85、128〜191が170、192〜255が255です。同じ設定でも境界が違う理由を具体的に説明できます。

src/adjustments.ts · v0.16.0
L190–200
Photoshotの実装コード ↗
  invert: { name: '반전', description: 'RGB 색상을 반전합니다.', controls: [] },
  posterize: {
    name: '포스터화',
    description: '각 채널의 명암 단계 수를 줄입니다.',
    controls: [control('steps', '단계', 2, 256, 6)],
  },
  threshold: {
    name: '한계값',
    description: '기준 밝기에 따라 검정과 흰색으로 나눕니다.',
    controls: [control('threshold', '한계값', 0, 255, 128)],
  },
Photoshot無料Photoshop代替の開発記 / 14IMPLEMENTATION

計算の
内側へ。

4階調は4色という意味ではない

R・G・Bそれぞれに適用するため、4階調の組合せは最大4³=64色です。実際の写真に現れる数は少ない場合があります。

2階調でも赤・緑・青は残せます。各成分を一つの明るさにして白黒に分けるしきい値とは違います。不透明度で元画像と混ぜると中間値も生じます。

古い文書には古い計算を残す

すべての文書の式を置き換えると、古い写真の境界が変わります。保存されたrevisionを読み、古い調整には以前の式を使います。

本日、旧16調整プロジェクトの画素保持と保存往復を含む既存検査を再実行しました。計算の改善と過去の作業の維持を一緒に考えました。

PHOTOSHOT / SOURCE NOTES14

コードを読む。

src/adjustments.ts · v0.16.0
L541–547
Photoshotの実装コード ↗
        if (t === 'invert') x = 1 - x;
        if (t === 'posterize')
          x =
            a.revision === 2
              ? Math.min(v.steps - 1, Math.floor((i * v.steps) / 256)) / (v.steps - 1)
              : Math.round(x * (v.steps - 1)) / (v.steps - 1);
        return clamp(x);
src/adjustments.ts · v0.16.0
L550–554
Photoshotの実装コード ↗
    return (r, g, b, out) => {
      out[0] = tables[0][r];
      out[1] = tables[1][g];
      out[2] = tables[2][b];
    };
src/adjustments.ts · v0.16.0
L253–265
Photoshotの実装コード ↗
export function isIdentityAdjustment(a: Adjustment): boolean {
  if (a.type === 'lookup') return !a.cube;
  if (a.type === 'curves') return channels.every((c) => a.curves![c].every((p) => p.x === p.y));
  if (a.type === 'photo') return a.values.density === 0;
  if (['blackwhite', 'gradient', 'invert', 'posterize', 'threshold'].includes(a.type)) return false;
  if (a.bands?.some((b) => b.hue || b.saturation || b.lightness)) return false;
  return definitions[a.type].controls.every(
    (c) =>
      ['preserve', 'relative', 'skin', 'legacy', 'colorizeHue', 'colorizeSaturation'].includes(
        c.key,
      ) || (a.values[c.key] ?? c.initial) === c.initial,
  );
}
Photoshot無料Photoshop代替の開発記 / 14IN PRACTICE

エディターで見る。

実際のPhotoshot作業画面。設定と写真を一緒に確認できます。
実際のPhotoshot作業画面。設定と写真を一緒に確認できます。

実際の作例は5階調

保存された写真とプロジェクトはLevels 5、不透明度100%です。説明用の4階調の表と、実際の5階調の写真を区別しました。AI生成人物画像を実際のPhotoshotで処理しています。

既知の量子化を入力範囲、バージョン、合成につないで編集道具にしました。次回は明るさの基準で白黒に分けるしきい値です。

Photoshot無料Photoshop代替の開発記 / 14BEFORE / AFTER

写真で見る結果。

AI生成の動作例用写真 / 編集前
01 / AI生成の動作例用写真 / 編集前
Photoshotの出力 / 編集結果
02 / Photoshotの出力 / 編集結果

AI生成の動作例用写真。編集画面と出力画像は実際のPhotoshotで作成しました。