【Figma】デザインのアクセントに!バナーにテクスチャを入れる方法

はじめに

エキサイト21卒デザイナーの山﨑です。

今回はFigmaでのバナー制作においてのちょっとした小技「バナーにテクスチャを貼り付けて質感を出す方法」について書こうと思います。

この間制作したバナーを例として解説していきます。(※諸事情で画像加工済です。)

こちらはテクスチャをつけてない場合のバナーです。少しのっぺりした印象ですね…🤔

【用意するもの】

  • バナー(背景は明るめに設定)

  • テクスチャ(紙・フェルトなど素材は何でもOK。商用利用可能なフリー画像サイトやAdobe stockなどで調達します。)

①写真をクリックしてレイヤースタイルを「multiply(乗算)」に変更します。

②そのまま写真をバナーに重ねます。

③写真をレイヤーの一番下に配置すれば完成。

完成版はこちらです。

いかがでしょうか。テクスチャを乗せる前と比べて質感が出るようになりました。

他にもフェルトっぽい質感のテクスチャを乗せて温かみのある印象を与えたり、色々な活用ができると思います。

ぜひバナー制作でご活用ください!

最後に

エキサイトではデザイナー、フロントエンジニア、バックエンドエンジニア、アプリエンジニアを絶賛募集しております!

興味があれば連絡いただければと思います🙇‍♀️

それではまた!

www.wantedly.com