アイキャッチ画像
HOME > ウェブデザイン > Affinity Photo > 1ランク上のモノクロ(白黒)加工-Affinity Photo
記事公開日:2021.9.13
この記事は約3分で読めます。

1ランク上のモノクロ(白黒)加工-Affinity Photo

ここではAffinity Photoの数ある機能の中から主にブログサイトや商品・サービス紹介サイトでの利用を前提としたweb用画像の作成・加工についての使い方をご紹介します。

(記事中の画像もAffinity Photoで作成してます)

このページは知ってればより効率アップTips系記事になります。

Affinity Photoの基本的な使い方こちらにまとめてあります。

画像の演出方法の一つにモノクロ、具体的には白黒での表現方法があります。

このモノクロ化、Affinity Photoでももちろんできますが、ひと工夫足すだけで”より自然な”モノクロ画像にすることができます。

スポンサーリンク

スポンサーリンク

モノクロ化の方法はいろいろだけど

細かく言ってしまえばモノクロというのは単一色という意味なので白黒に限らずセピア色の画像もモノクロと言えばモノクロになります。

ですがここではモノクロ=白黒という概念でご説明していきます。

Affinity Photoにはモノクロ化の方法がいくつか存在します。

その中で今回は調整(レイヤー)のいくつかのエフェクト類を使って試してみます。

キャプチャ画像

サンプルとして、使われてる色が少なめの餃子の画像とカラフルな色のルービックキューブ(いずれもフリー素材)を用意しました。

キャプチャ画像

白黒

調整(レイヤー)の中でも一番目に付きやすいのはやはり①『白黒』でしょうか。

名前にズバリ”白黒”って入ってますもんね。

その『白黒』をかけた直後の結果がこちら↓です。

キャプチャ画像

デフォルトの状態だと白トビに近い加工状態になります。

実際には『白黒』選択時に出てくる調整項目を一つずつ調整しながらいい感じに仕上げる必要があるので…初心者の方にはかなり面倒な作業になるでしょう。

(私も敬遠したい)

ということでこのやり方は却下。

キャプチャ画像

管理人

ただし好みのモノクロになるまで細かく調整をやりたいという方にはこの方法が最適かもしれません。

グラデーションマップ

②『グラデーションマップ』でもモノクロ加工はできます。

やり方としては『グラデーションマップ』選択時に出てくる調整項目内の”位置”の50%という数値を100%に変更し、”カラー”でを選択します。

続いて左端の◯ポチをクリックし、”位置”が0%になったのを確認して”カラー”で今度はを選択します。

キャプチャ画像

この結果がこちら。

キャプチャ画像

かなりいい感じに仕上がってますね。

『白黒』のデフォルト状態と較べても断然こちらの方がおススメです。

ただ若干手数が多いのでこれも却下。

しきい値

③しきい値でもできます。

ただしこちらは完全に白と黒の2諧調での表現になるので、今回のテーマとはちょっと別の話にはなります。

(演出としてはアリですが)

キャプチャ画像

スポンサーリンク

スポンサーリンク

おススメの設定

ではおススメの設定は?と言うと④『HSL』です。

”HSLって何?”というのは置いといて、何がいいかというとモノクロ化の手数がとても少ないんです。

『HSL』を選択した時のデフォルトの設定ダイアログがこちら↓。

ここからモノクロ加工にするには「彩度のシフト」を0%から-100%に変更する、これだけ。

キャプチャ画像

その結果がこちら↓。

キャプチャ画像

とても簡単でしょう。

ただ餃子の方はいい塩梅あんばいにモノクロ化してますが、ルービックキューブの方はグラデーションマップの結果と較べると残念ながら明るさの違いがわかりにくいモノクロになってしまった感があります。

キャプチャ画像

このように画像によってはうまく行く場合といかない場合もあります。

でも大丈夫、ここにもうひと手間加えてやるだけでどんな画像でもきれいなモノクロ加工ができ、なおかつより自然なモノクロ画像に仕上げることができるんです。

スポンサーリンク

スポンサーリンク

1ランク上のモノクロ化

結論からいうと先ほどのHSL設定画面で『「彩度」のシフトを左端(-100%)にする』を実行したあと、描画モード”色相”に変更するだけ。

キャプチャ画像

レイヤーパネル上でも変更できます。

キャプチャ画像

その結果がこちら↓。

餃子の画像は明るさが若干増し、ルービックキューブの方は色(明るさ)の違いがわかるようになりました。

キャプチャ画像

”色相”にすると元の色の明るさの違いが絶妙に表現され、加えてコントラストもはっきり(高め)としたものに仕上がります。

特にルービックキューブの方を見較べてみるとわかりますが、白と黄色と緑の明るさに若干の違いが出てたり赤と緑の明るさにも違いがあったりします。

管理人

Photoshopなんかでも使われる手法の一つだったような。(記憶があやふや)

ところでなんで「色相」にするのかとか「色相」ってそもそも何っていうのはここでは考える必要はありません。

(どうしても知りたい方はGoogle先生にお聞きください)

他の画像でもチェック

『HSL』の”色相”によるモノクロ加工、他の画像でも試してみました。

キャプチャ画像

虹の画像は”色相”の方が虹色のラインがきれいに出てますね。

その下の商品画像も”標準”の方は全体的にのっぺりとした雰囲気なのに対し、”色相”の方は明るさの違いがより鮮明でコントラストもよりはっきりとしてるのがわかるかと思います。

(背景色の違いにもご注目)

微妙な違いと言われればそれまでですが、モノクロ化の手数はわずか2手ですから面倒なことはないでしょう。

【Affinity Photo ver.1.10.1で検証済】

【Volar】サイトイメージ画像

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)