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

f:id:excite_ny:20211228120005p:plain

はじめに

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

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

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

f:id:excite_ny:20211228120533p:plain

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

【用意するもの】

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

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

f:id:excite_ny:20211228122003p:plain

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

f:id:excite_ny:20211228122605p:plain

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

f:id:excite_ny:20211228122750p:plain

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

f:id:excite_ny:20211228122955p:plain

完成版はこちらです。

f:id:excite_ny:20211228120448p:plain

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

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

f:id:excite_ny:20211228123151p:plain

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

最後に

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

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

それではまた!

www.wantedly.com