見出し画像

ニューモーフィズムをもっと知りたい!#figma

画像15

本日はニューモーフィズムのバリエーション2つに挑戦してみたいと思います。

先日投稿したこちら👇からまず始めてみてくださいね。

1、くぼんだオブジェクト

画像5

まずはこちらのくぼんだオブジェクトに挑戦です。

1, 前回作った正方形を複製。(右下に配置しています)

画像1

2、複製した正方形をクリックし、Drop shadow 2つをどちらも Inner shadowにする。

画像2

3, 完成!へこみました!

画像3

2、オブジェクトを重ねる

今度はこちらのような重ねたデザインに挑戦です!

画像5

1, くぼんだ正方形を複製。(右下に配置しています)

画像6

2, Drop shadow を追加。
x10
Y10
Blur 20
color B4C1D5  50%

画像8

3, 再度Drop shadow を追加。
x-10
Y-10
Blur 20
color FFFFFF 90%

画像8

4, 作った正方形を複製。そして小さくする。

画像9

 5, 重ねて配置

画像10

6, 小さい正方形のDrop shadow 2つをInner shadowに、
 Inner shadowをDrop shadow にする。

画像11

画像12

7,  Inner shadowを両方隠す。

画像13

8, 完成!中の正方形が押し出されました!

画像14

今回はここまでです。また次の記事でお会いしましょう🥰


追伸

こちら👇のプラグインでも簡単にできますよ♪



Follow me here😊

Website | Instagram | Twitter DribbbleLinkedin




よろしければサポートお願いいたします。いただいたサポートはクリエイターとしての活動費に使わせていただきます。