オブジェクトに質感(ざらつき)を追加する⽅法

Date
2022.02.01
Category
Written By
Shohei Nishiyama
オブジェクトに質感(ざらつき)を追加する⽅法

最近、グラフィックで「質感がざらざらしている」表現をみかけて、実際に試してみました。

本記事では、質感を表現していく中での学びを残したので、サムネイルのような表現を再現することができると思います。

イラレで質感(ざらつき)を表現する

やり方については、Adobeのチュートリアルがあるので、こちらからご覧ください。

気になる点

イラレでは、テクスチャの「粒状」が綺麗に作ることができず、画像を拡大するとノイズがすごく目立つのが気になりました。

色々試してみたのですが改善できず、イラレで質感を出すのは少し難しそうなので、Figmaでノイズ画像をつくるプラグインを見つけたので、そちらを試してみようと思います。

Figmaで質感(ざらつき)を表現する

ノイズ画像をテクスチャとして作り出すことができる「Noise」プラグインをインストール。

生成するノイズ画像は、サイズ以外にも細かい設定ができるので、不自然にならないように調整できるのも良いですね。

質感を出したい画像に重ねてみる

① 質感を出したい画像を用意する

グラデーションにするとオブジェクトの質感が出しやすいので、以下の画像を用意しました。

② ノイズ画像をレイヤーの一番上に持ってきて、「Overlay」を設定して完成

先ほど生成したノイズ画像をレイヤーの一番上に持ってきて、「Overlay」を設定すると、このような質感のあるイメージを作ることができました。

③ ブラーを入れると、もっと面白くなりそう

オブジェクトに「Layer blur」を追加すると、このように背景として使えそうな表現になりました。もっと工夫すると、すりガラスから透けているように見せれそうです。

個人的には、IllustratorよりもFigmaの方が手軽でキレイに質感を表現することができました。複数の表現を組み合わせると面白いので、今後も新しい表現を学んでいこうと思います。

Share on

Contact

Get in Touch !

デジタル領域のサービスのプロダクトデザインを中心としたデザイン業務を、随時お受けしています。お仕事のご依頼・クリエイティブに関するご相談など、お気軽にお問い合わせ下さい。

通常3日以内にご返信いたします。