[Photoshop] すりガラスっぽいグラスモーフィズムデザインをつくってみる

Keitaro
Keitaro

Designer / 合同会社irori

公開日
カテゴリ
デザイン
Photoshop

グラスモーフィズムデザインはご存知ですか?

簡単に説明にすると、見た目がガラスのように透き通っているデザインのスタイルのことです。このデザインでは、背景がぼんやりと見えるようにすることで、まるでガラス越しに見ているような効果を出します。
ウェブサイトやアプリのデザインでよく使われていて、現代的な印象をもたせることができます。

今回はそんなグラフモーフィズムデザインをPhotoshopでつくっていきます。

好みのシェイプを作成

私はこんな感じの図形をつくりました。背景はスマートオブジェクトにしておいたほうが後々楽かもです。
b1.jpg

背景を複製し、クリッピングマスクを作成

(下画像ではわかりやすいように背景を非表示にしています)
b2.jpg

ぼかしを入れる

フィルター→ぼかし→ぼかし(ガウス)からぼかしをつくります。
b3.jpg

シェイプのレイヤー効果をつける

境界線:
b4.jpg

ドロップシャドウ:
b5.jpg

光彩(外側):
b6.jpg

あとは微調整!
b7.jpg

すりガラスっぽくする

最後にノイズを加えれば完成!
b8.jpg

同じやり方で文字をいれたりすると効果が分かりやすいかもですね。それではまたー
b9.jpg

この記事を書いた人

Keitaro
KeitaroDesigner

合同会社iroriのデザイナー。Photoshop / Illustrator / Premiere Pro を使った映像制作・写真撮影・グラフィックデザインを担当しています。