2018.06.29

Webデザイン

UIデザインツールFigmaで画像補正を行う方法

画像補正

デザインをする上で重要なのは写真ですが、撮影した写真を補正したいなんてことはよくある話です。そんな時にすることは「画像補正」ですが、もちろんFigmaにもあります。

今回はFigmaでの画像補正の方法についてお伝えしようと思います。

補正したい画像を選択する

画像選択

まず補正したい画像を選択します。
レイヤーパネルから指定するのも良いですが、直感的に行いたいなら画像を直接クリックするのが手っ取り早いです。
ちなみにダブルクリックすると直接画像補正ウィンドウがでてくるので便利ですね。

マスクをかけている場合はマスクをダブルクリックすると画像が選択できますので、画像を選択した後に画像をダブルクリックすると画像補正ウィンドウが出てきます。

画像補正パネルで補正する

あとは出てきた画像補正パネルから補正をしていけばOKですが、Figmaは日本語対応していませんので全て英語表記です。
ちなみにFigmaの補正機能はこんな感じです。

画像補正パネル紹介

  • exposure – 露出
  • contrast – コントラスト
  • saturation – 彩度
  • temperature – 色温度
  • tint – 色合い
  • highlights – ハイライト
  • shadows – シャドウ

あとはそれぞれパラメーターを操作し、理想の補正をかけていってください。

最後に

正直画像補正と考えるとFigmaでできることは限定されています。もっと細かい補正をかけたい場合はやはりPhotoshopに一日の長がありますね。

SHARE

この記事の筆者

デザイナー 芳村 明文

デザイナー 芳村 明文

カテゴライズしたらきっとデザイナーのはず。音楽(洋楽をジャンル問わず雑多に貪る)、欧米テレビドラマ(シットコム)が好き。時々バンド活動。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する