最近、グラフィックで「質感がざらざらしている」表現をみかけて、実際に試してみました。
本記事では、質感を表現していく中での学びを残したので、サムネイルのような表現を再現することができると思います。
やり方については、Adobeのチュートリアルがあるので、こちらからご覧ください。
イラレでは、テクスチャの「粒状」が綺麗に作ることができず、画像を拡大するとノイズがすごく目立つのが気になりました。
色々試してみたのですが改善できず、イラレで質感を出すのは少し難しそうなので、Figmaでノイズ画像をつくるプラグインを見つけたので、そちらを試してみようと思います。
ノイズ画像をテクスチャとして作り出すことができる「Noise」プラグインをインストール。
生成するノイズ画像は、サイズ以外にも細かい設定ができるので、不自然にならないように調整できるのも良いですね。
グラデーションにするとオブジェクトの質感が出しやすいので、以下の画像を用意しました。
先ほど生成したノイズ画像をレイヤーの一番上に持ってきて、「Overlay」を設定すると、このような質感のあるイメージを作ることができました。
オブジェクトに「Layer blur」を追加すると、このように背景として使えそうな表現になりました。もっと工夫すると、すりガラスから透けているように見せれそうです。
個人的には、IllustratorよりもFigmaの方が手軽でキレイに質感を表現することができました。複数の表現を組み合わせると面白いので、今後も新しい表現を学んでいこうと思います。
1997年兵庫県生まれ。関西学院大学理工学部に在学中、デジタルハリウッド本科UI/UXD専攻に入学。1年間のWスクールを経て、2020年にAID-DCC inc. 入社。Web制作から体験型コンテンツまで様々なプロジェクトに関わる。現在は、PLAID inc. にてデザイナーとして活動中。ユーザー起点のデザインが得意。
デジタル領域のサービスのプロダクトデザインを中心としたデザイン業務を、随時お受けしています。お仕事のご依頼・クリエイティブに関するご相談など、お気軽にお問い合わせ下さい。
通常3日以内にご返信いたします。