デザインブログ、SOKOLABOのソコラボのソコです！
今日はWEBやグラフィックデザインでガラスのような表現「グラスモーフィズム」のphotoshopでの作り方についてお伝えします！
グラスモーフィズムの作り方
それではやっていきましょう！
作るのはこんな感じです。
まずは背景と図形を用意
最初に背景画像とガラスの形の素となる図形のレイヤーを用意します。
これと
これ。
この状態になります。
形はシェイプツールで作ったものならなんでもかまいません。好きな形でOKです。
背景をガラスの形で抜いたぼかし画像を作る
次に背景画像をコピー、図形レイヤーの上にしてクリッピングマスクで窓の形に抜きます。
この時点ではクリッピングマスク抜いても一見変化はわかりませんがOKです。
次にフィルターメニューから「ぼかし（ガウス）」を適用します。
強さはお好みで調整してOKです。僕は少し強めにかけました。
窓の部分だけがぼやけてます。
レイヤースタイルでガラスっぽく仕上げていきます
ここで長方形のレイヤーガラスっぽさを加えて仕上げていきます！
設定するレイヤースタイルは以下
実はグラスモーフィズムっぽさはドロップシャドウだけでも完成してしまうんですが、他のレイヤースタイルを組み合わせる事で表現を深めたりすることができます。
ドロップシャドウ
ドロップシャドウの設定、色は「#000000」の黒。
これだけでガラスっぽさはでていて、このままでも使えそうですよね！
設定値は画像の通りなんですが、この辺りはこれからでてくるレイヤースタイルもそうですが、お好みで調整してOKです。
グラデーションオーバーレイ
不透明度を下げて半透明にしたグラデーションオーバーレイをかけて擦りガラスっぽさをだしています。
不透明度の調整具合でガラスの曇り度合いが変わります。
また#ffffff(白)から#000000(黒)のグラデーションをかける事で、右下が暗くなりリアルっぽさを出しています。マットにしたい場合は白のカラーオーバーレイにして単色で表現してもOK。
光彩（内側）
光彩（内側）の設定、色は「#ffffff」の白。
内側に不透明度を下げた半透明な光を少し入れ込むことで質感がリッチになりました。
サラッと使いたい場合には使わなくても良いかもしれません。
境界線
境界線の設定、色は「#ffffff」の白。
これも不透明度を下げた境界線を縁に入れてガラスを際立たせています。
自然な表現とは離れてしまうので、これを使う側お好みで良いと思います。
以上の４つのレイヤースタイルを使ってグラスモーフィズムは完成。
適当に文字を入れてみます。
結構雰囲気でますね！
という訳で、グラスモーフィズムの作り方でした！
グラスモーフィズムはバナーやグラフィックには勿論、ボタンの表現に用いたり、ウェブサイトのカードデザインなど、汎用性が高いテクニックなのでぜひ活用してみてくださいね！
わからない事や、レイアウトやデザインについて、こんなグラフィックを作って欲しいなんてご希望がありましたらお気軽にお問合せ下さいね！
それでは！
