デザインブログ、SOKOLABOのソコラボのソコです！
今日はWEBやグラフィックデザインでお手軽にクールな雰囲気を演出できるグリッチノイズのphotoshopでの作り方について説明します！
２種類のやり方を駆使してカッコよいビジュアルを作っていきましょう！
グリッジデザインとは
グリッチとは映像が乱れた時に現れる画面のズレの事を言います。
画像を不規則に揺らしたような視覚効果は躍動感や先進的なイメージを持たせることができます。
グリッチ効果の凄い所は幅広いジャンルにハマる所！
IT、SF、サイバーパンク、音楽、スポーツ、レトロ、なぜか不思議とハマるんですよね。
比較的個性が強めなエフェクトに見えるのにジャンルを選ばない所が優秀だなと。
WEBデザイナー、グラフィックデザイナー問わず大きな武器になります！
という訳でいってみましょう！
グリッジ作り方
まずは大まかな流れを書きますね！
- 背景画像と被写体画像を用意する
- 被写体画像に色ずれ効果を付ける
- 被写体の画像を部分的にずらす
- ノイズ効果を付ける
- もう一個簡単にグリッジ風効果で文字を作成
- 色々アレンジ！
では１つ１つ行ってみましょう！
被写体を用意
まずはフォトショップを開きましょう。
ここではキャンバスサイズはW:1280px – H:720pxで開きました。
そして背景画像と、グリッチエフェクトを付ける被写体を用意。
被写体画像に色ずれ効果を付ける
次に被写体を複製。
複製したレイヤーを少し左にずらした後、
レイヤースタイルを開き、レイヤー効果の「R」のチェックを外します。
するとレイヤーが赤でずれたような感じになります。
さらにオリジナルのレイヤーにレイヤースタイル、
レイヤー効果から「G」「R」のチェックを外します。
この時点でだいぶ雰囲気がでてますね！
被写体の画像を部分的にずらす
さらに画面揺れの雰囲気を出すために、次は被写体の一部分ずらしていきます。
２枚の画像をグループ化して、そのグループを複製します。
そして複製した方のレイヤーを選択後、
長方形選択ツール(M)を使ってランダムに複数、選択範囲を作ります。
SHIFTキーを押しながら選択範囲をドラッグしていきましょう。
そしてこの選択範囲は下の被写体にも用いるので、
上部メニュー「選択範囲」から「選択範囲を保存」を選び、
わかりやすい名前をつけて保存しましょう
そして次はレイヤーマスクをクリック
選択範囲だけが抜き取られました。
該当するレイヤーだけを表示するとこんな感じ
次は複製元のレイヤーを選択し、次は「選択範囲」「選択範囲を読み込む」から
保存した選択範囲を読み込みます。
読み込んだら、「ctrl+shift+I」（cmd+OPTION+I）で選択範囲を反転、
レイヤーマスクをかけます。
さっきと逆の切り抜きになります。
そしてさっき切り抜いたレイヤーを選択、移動ツール（V）で左方向に少しずらしましょう。
躍動感がでてきましたね！
ノイズ効果を付ける
さらに仕上げていきましょう！
レイヤーの一番上に新規レイヤー（ctrl+shift+N）を作り真っ白に塗りつぶします。
さらに画面上部のメニュー「フィルター」から「スマート用フィルターに変換」します。
そして同じくメニュー「フィルター」からフィルターギャラリーを呼び出し
スケッチフォルダーを下から「ハーフトーンパターン」「ノート用紙」を適用、
パラメータをあれこれ動かして図のような感じにしてください。
完全一致しなくてもざっくりOKです！
画面がざらっざらになります！
そしてこのレイヤーをレイヤー効果「オーバーレイ」「不透明度40％」に設定します。
グリッジノイズができあがりました！！！パチパチパチ！
もう一個簡単にグリッジ風効果で文字を作成
さて、これでも完成なんですが、もう一個もっと簡単にグリッジっぽい効果を付ける方法がありますので、それで文字入れでもしてみましょうか！
最後に作ったざらざらのレイヤーの下に文字レイヤーを作って適当に文字を打ちます。
文字レイヤーにレイヤースタイルを呼び出し、「ドロップシャドウ」２つ作ります。
そしてそれぞれのレイヤーを下記のようなパラメータに設定。
２つの違いは「色」と「角度」（角度が対象になっている）です。
さらにカラーオーバーレイで文字色を変えると
何気にこれだけでも結構グリッジっぽくなります！
さらにこのレイヤーを複製し、下側になったレイヤーを
スマートオブジェクトに変換→スマートフィルターに変換して、
メニュー「フィルター」から「ぼかし（移動）」を適用して
カラーオーバーレイや拡大縮小をしてちょいと調整すると
これだけでも簡易なグリッジエフェクトができちゃいます！
最終的なレイヤー構造はこんな感じ
これでグリッジのチュートリアルは終わりです！
このエフェクトを使って色々遊んでみましょう！
僕は影を入れて躍動感を追加、広告風にしてみました★
わからない事や、レイアウトやデザインについて、こんなサムネイルを作って欲しいなんてご希望がありましたらお気軽にお問合せ下さいね！
それでは！
