figma-brend-mode-luminosity
公開日: 2021.02.11  | 更新日: 2021.09.11

Figmaで画像の色をセピアや単色のモノクロに変換する方法

今回は、SNSやブログなどで使用するバナー画像にもすぐ使える、セピアや単色のモノクロ画像をFigmaで簡単に変換・作成する方法をまとめました。

単色のモノクロ画像は、好きな色みに変更できるので、画像のトーンをデザインのトンマナに合わせるときなどに便利な方法です。

この記事のターゲット

  • Figmaの初心者〜中級者

  • Figmaでセピアや単色のモノクロ画像を作りたい方

  • SNSの投稿画像広告用バナーなどを自分でデザインしたい方


STEP.1 作りたいサイズのFrameを用意する

brank-artboard

Frameは、左上のメニューの「#」のようなアイコンから作成することができます。 今回は、この記事のサムネイルを作成したいので、「W1200px:H630px」のサイズでFrameを作成します。

STEP.2 用意したFrameにモノクロにしたい画像を挿入する

insert image by unsplash

用意したFrameに、モノクロにしたい画像を挿入します。挿入の方法は、Frameを選択した状態で挿入したい画像をFigmaの画面上にドラッグ&ドロップするか、プラグインを利用する方法があります。

今回は、以下の記事で紹介した「Unsplash」というプラグインを使って画像を挿入します。

UIデザインの作業を加速するFigmaプラグイン10選

今回は、WebサービスやアプリのUI/UXのデザインFigmaを利用する中で、冗長な作業を効率化する上で特に便利だったプラグインを厳選して紹介したいと思います。プラグインの使い方が知りたい方は、プラグインの探し方とインストール方法も紹介していますので、参考にしてください。 ... 続きを読む

favorite figma plugins

STEP.3 FrameのFillを編集して、挿入した画像と背景色を調節する

using brend mode

Frameを選択した状態で、右側のメニューの「Fill(塗りつぶし)」に注目すると、「image」や「#FFFFFF」といったレイヤーが設定されていると思います。この「image」が先ほど挿入した画像のレイヤーになります。ちなみに、上に並んでいるほど正面から見て手前のレイヤーになります。今回は上から「image」「#FFFFFF」の順になるように配置してください。

次に「image」をクリックすると、画像の細かい調整ができるポップアップのメニューが表示されます。ポップアップの右上の「💧」のようなアイコンをクリックすると使用できるメニューが表示されますので、今回はその中で「Luminosity」を選択してください。すると、「image」がモノクロの画像に変換されます。

brend mode

そして、「Fill」の右側にある「+」ボタンを押して新しいレイヤーを追加し、「image」「#変更したい色」「#FFFFFF」となるように配置してください。そして、「#変更したい色」のレイヤーをクリックして「solid(単色)」などに変更し、好きな色を設定すると、設定した色のモノクロ画像になります。

最後に、Frameを選択している状態で右側のメニューの「Export」で「+」ボタンを押し、「Export (Frame名)」というボタンをクリックすると、画像としてローカルに保存できます。

sepia-cat


おまけ

今回使用した「💧」の機能は、正式には「Brend Mode」と呼ばれています。これは、2つ以上のレイヤー上の色をピクセル単位で合成することで、色情報を合成した画像を作成できます。

今回のレクチャーでは、「image(猫さん)」「変更したい色(セピア)」「#FFFFFF」という順番でしたので、猫さん+変更したい色(セピア)+最背面の白、という色が合成されているわけです。

今回は「Luminosity」を使用しましたが、それ以外にも様々な種類の合成メニューがありますので、状況に応じて使い分けてみてください。

参考までに、Brend Modeの各メニューごとに、どんな結果になるかを今回使用した猫さんの画像を使って比べてみました。さらに、変更したい色を赤の透明度を4段階に変化させたパターンと、最背面の色を白と黒に変更したパターンの差分を作りましたので、どのような結果になるか確認して、目的にあったものをぜひ使ってみてください。

レイヤー構成:

  • image(猫さん)

  • #FF0000(透明度100%、50%、25%、0%)

  • #FFFFFF(白)、#222222(黒)

brend mode white
brend-mode-black

この記事を読んだ方におすすめの記事

Figmaの「Noise」でざらざらした質感を表現する方法

今回は、ざらざらした紙のようなマットな質感を、Figmaの「Noise」というノイズ画像を生成してくれるプラグインを使って表現してみようと思います。フリー素材を探してもなかなかいいテクスチャが見つからない時などに、試してみてください。 ... 続きを読む

figma-noise-tool-plugin

Figmaで簡単にテキストや図形を斜めに変形する方法

今回は、Figmaで簡単にテキストや図形オブジェクトを斜め方向に変形させることができるプラグイン「SkewDat」を紹介します。オブジェクトを斜め方向に変形させることで、奥行きを出したり躍動感を表現できます。 ... 続きを読む

figma-skewdat-plugin

Figmaでマスクを適用・解除する方法

今回はFigmaでマスクを適用・解除する方法を解説します。Figmaのマスクは、Adobe Illustratorのクリッピングマスクのように、画像やベクターデータを組み合わせたオブジェクトをマスクで任意の形に切り抜くことができる機能になります。 ... 続きを読む

figma-how-to-mask

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告