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

グラスモーフィズム Adobe illustrator
スポンサーリンク

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

今回は、Web Designのトレンド、グラスモーフィズムです。前回に続きイラレで完結できるように作成していきます。

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

スポンサーリンク

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

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

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

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

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

出典:Apple

イラレで作ろう

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

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

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

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

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

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

ポイント

影の色は黒ではなく背景の色に近い濃い色にすると雰囲気がぐっと上がります。

塗りに乗算

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

注意

ここで注意が必要です。ドロップシャドウは必ず塗りの中に移動しておきましょう。また、塗りの乗算は後から入れる事は出来ないので初めから塗りを選択して適用してください。

入れ子にする

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

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

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

これで完成です。お疲れ様でした。

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

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

スポンサーリンク

まとめ

いかがでしょうか。

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

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

デザインやAdobeに興味がある方は、デジタルハリウッドのAdobeマスター講座がオススメです。
年間で30,000円近くのコストカットにつながり、フリーランスの方なら商用利用もOKです。AdobeCCはサブスクですので毎月、毎年のコストを少しでも下げて、よきデザインライフをお過ごし下さい。

コストを下げる方法も記事にしていますので一度読んでみてください。

コメント