イラレで作るGlassmorphism【グラスモーフィズム】

こんにちは、グラフィックデザイナーのyoenです。

今回は、Web Designのトレンド、グラスモーフィズムです。

Webサイトなどはまだあまり見かけませんがアプリなどのUIに多く取り入れられている印象です。

私はニューモーフィズムよりはグラスモーフィズムの方が好きなデザインです。

グラフィックデザインでも取り入れられるように、イラレで完結できるように作成していきます。

是非参考にしてください。

それではいきましょう。

イラレで作るGlassmorphism【グラスモーフィズム】

以前にニューモーフィズムの紹介しましたがこれに続く次のハヤリと言われています。

グラスモーフィズムって？

すりガラスの表現を利用した半透明の表現方法ですりガラスの向こう側がボヤけて見える表現が特徴的ですね。

最近では、Appleが取り入れていてMac OSやiPhoneに多く見られる表現方法です。

ぼかし

それでは実際に作っていきましょう。まずは画像を一つ用意しましょう。今回私は以下のような画像を用意しましたが何でもかまいません。

出来ればカラフルなものを選ぶとその分効果が得られますよ。

これに、効果→ぼかし→ぼかし（ガウス）を適用します。今回は50ピクセルほどかけています。

このオブジェクトにアピアランスパネルで塗りを一つ足し色を白、透明度を70%で適用します。

この上にさらにすりガラスを一つ足していきます。任意の四角を描き色は白、角はRを付けておきます。

効果→スタイライズ→ドロップシャドウで影を付けます。

塗りに乗算

こんどはこの塗りに対してアピアランスパネルから乗算を適用しましょう。必ずアピアランスパネルで塗りを選択してから乗算を適用してください。すると、オブジェクトが透明になり影だけが残りました。

次はアピアランスに塗りを追加し、白を設定します。設定したら透明パネルで任意の数値を入れて半透明にしましょう。（透明の度合いは背面の素材やその他の影響を考慮して変更していきましょう。）

最後に光の効果を入れていきましょう。線の色を白にして、グラデーションを適用していきます。

グラデーションパネルの左右のスライダーの色を白に、右側のスライダーの不透明度を0%に、角度を-55°に設定しました。

これですりガラスの部分の完成です。

お疲れ様でした。

グラスモーフィズムのポイントはすりガラスですので背面にオブジェクトを配置したいときは必ずぼかしをかけ、ガラスにかかる部分をマスクします。

その下にガラスにかかっていな部分を配置してください。

もう少しぼかしを強くしたほうがいいですね。

すりガラスの作り方を以下の記事で公開しています。

参考にしてみてください。

そうしないと単なるガラスみたいになってしまいます。

まとめ

いかがでしょうか。

オシャレなパネルが出来ました。背面オブジェクトには必ずぼかしを適用しましょう。グラフィックデザインにも使える効果的なDesignだと思います。

それでは、よきデザインライフを。