写真の色調整用 JavaScriptツール
Top Image Fujin

Fujin representing an impression

説明書 2 基本的な使い方

風神の使い方

作例


「桜」元の写真

以前撮影した写真ですが、花が暗く色も物足りなく感じます。

①とりあえず、
フィルターを使って明るさと彩度を調整してみます。
風神の上部の画像を読み込むボタンを押して画像を読込みます。

下の方のタブでフィルターをタップ(クリック)します。
彩度を280%にしてボタンを押します。
キャンバス イメージとサムネイル(変更した画像)の彩度が変わります。

今度は明るさを150%に変更します。
サムネイル(元の画像)とサムネイル(変更した画像)を比較して変更を戻したいときは一番下に戻るボタンがあります。
但し、戻れるのは直前の1回のみです。


①彩度と明るさを修正した写真

明るく鮮やかになりましたが、それぞれの色が主張し合ってごちゃごちゃ感があります。

②今度は別の方法で修正します。
元の写真を風神のマスクで修正したのが下の写真です。
所要時間は1~2分です。


②マスクを使って修正した写真

色が整理されて柔らかいピンクの花が若干前に出て広がるように感じます。
※このページの最後に応用編があります。

②の修正の仕方 [桜]

始めに画像(写真)を読み込んでください。
※元の画像が上書きされることはありません(JavaScriptの仕様です)。

下のタブのマスク作成で白黒のボタンを押します。
しばらく待つと「完了!!」が表示されてサムネイルの画像が変わります。
続いてネガポジ反転を押します。
サムネイルの画像が反転します。

保存を押して出来上がった画像(マスクになります)を保存してください。
しばらく待つとダウンロードの表示が出ます(表示が出るまで数十秒掛かる場合があります)。
※ダウンロードファイルは新規で追加されます(JavaScriptの仕様です)。

再表示を押して元の画像を表示してください。

タブの色の調整を開いて元の色変更後を入力してください。

桜の場合
元の色 243 245 241
変更後 255 255 255

係数覆い焼き(重ね焼き)の両方にチェックを入れます。
(覆い焼きと重ね焼きの間のバーは覆い焼き側にしておきます。)

覆い焼きの下にマスクを読み込むボタンがあります。
先ほど作成してダウンロードしたファイルを読み込んでください。
(ダウンロードしたファイルはダウンロード用のフォルダに保存されています。)

重要:覆い焼き(重ね焼き)のマスクは元の画像と縦横同じサイズのみ使用できます。
画像のサイズはキャンバスイメージの横に表示しています。

変換ボタンを押すと「②マスクを使った修正」が完成です。

説明 [桜]

風神には画像(写真)を開くボタンが上下にあります。
上がメインで、下が覆い焼きで使うマスクですが、逆にして使うこともあります。

元の色 RGB
後述するホワイトバランス(カラーバランス)で基準にする色です。
元の色を基準にしても変更後の色を基準にしても構いません。
またどちらも編集中の写真(画像)で使われていない架空の色を指定しても構いません。

「桜」では先に変更後の色をR:255 G:255 B: 255と想定しています。
変更後 255 255 255

写真を明るくするために元の色を変更後より若い数値にして、
元の色 250 250 250
変更後 255 255 255
差分が明るさ

ピンクを出すためにRとB(RとBでマゼンタ)の数値を低め(変更後と差を開いて色の変化量を上げる)、
緑を抑えるためにGの下げ幅を小さく(変更後と差を少なくして色の変化量を抑える)、
元の色 243 245 243
変更後 255 255 255

ピンクが出過ぎないようにBをRより1~2段下げる(変更後と差を開いて色の変化量を上げる)ようにしています。
元の色 243 245 241
変更後 255 255 255

変更後 RGB
マスクや係数の影響を受けるので厳密にこの色になるわけではありません。大体の感覚です。

係数 RGB
黒を黒のままにする呪文だと思っていれば大丈夫です。


係数 R:50 G:50 B:50      (photo:photoAC)

数値が小さければ暗い色の変化は小さいまま明るい色は大きく変化します。


係数 R:200 G:200 B:200

数値が大きければ暗い色の変化は小さいまま明るい色も小さく変化します。

「元の色」と「変更後」
係数だけ使用した場合、

「元の色」の数値が「変更後」より小さければ明るくなります。
 元の色 < 変更後 = 明るくなる
※暗い色の変化は小さく明るい色が明るくなります。


「元の色」の数値が「変更後」より大きければ暗くなります。
 元の色 > 変更後 = 暗くなる
※暗い色の変化は小さく明るい色が暗くなります。

覆い焼きだけ使用した場合、

元の色の数値が変更後より小さければ明るくなります。
 元の色 < 変更後 = 明るくなる
※全体の変化は均等でマスクの影響を受けます。


元の色の数値が変更後より大きければ暗くなります。
 元の色 > 変更後 = 暗くなる
※全体の変化は均等でマスクの影響を受けます。

重ね焼き
2枚の写真(画像)を重ねるだけです。
元の色・変更後・係数すべての数値をスルーします。
今回は使用しません。

係数と覆い焼きの比較


元の画像


係数処理(係数:92,92,92)
元の色 235,245,235; 変更後 255,255,255
明るくなるほどコントラストが強くなる



覆い焼き マスク:白黒,ネガポジ反転
元の色:245,250,245 変更後:255,255,255
明るくなるほどコントラストが弱くなる



覆い焼き マスク:無地 白 255,255,255
元の色:245,250,245 変更後:255,255,255
明るくなるほどコントラストが弱くなる



係数(92,92,92)+覆い焼き マスク:白黒,ネガポジ反転
元の色:245,250,245 変更後:255,255,255
明るくなってもコントラストは中ぐらい
※「桜」で使用した組み合わせ



係数処理(係数:92,92,92)+覆い焼き マスク:元の画像
元の色:245,250,245 変更後:255,255,255
コントラストが係数のみよりさらに強くなる



重ね焼き マスク:元の画像
※重ね焼きの場合、設定は無視されます。



重ね焼き マスク:無地 グレー 125,125,130
※重ね焼きの場合、設定は無視されます。

応用編

②の応用です。


③ファンタジーっぽく仕上げた写真


②マスクを使って修正した写真


①彩度と明るさを修正した写真


「桜」元の写真

③の修正の手順は②と同じです。
元の写真を読み込む → 白黒・ネガポジ反転 → 保存 → 再読込 →
元の色 248 250 247
変更後 255 255 255
係数 92 92 92
覆い焼き(白黒ネガポジ反転) → 変換して保存 → 中間写真の完成

新規に中間写真を読み込む → 白黒・ネガポジ反転 → 保存 → 再読込 →
元の色 248 250 247
変更後 255 255 255
係数 92 92 92
覆い焼き(白黒ネガポジ反転) → 変換して保存 → ③の完成

1枚の写真に同じ手順を繰り返しています。
   1   2   3   4   5   6   7   
2022 日本製