今回は、Photoshopで画像、文字を「グリッチノイズ」加工する方法をご紹介します!グラフィック、Webのデザインでも最近では取り入れられるデザインが多くなってきたと感じます。グリッチとは液晶が壊れた際などにでてくる映像の乱れのことで、あえてグリッチ加工を表現することで、レトロな雰囲気がでたり、サイバーチック・ゲームチックに表現することができます!
TikTokのロゴもグリッチ風なロゴになっているので、見覚えがある方は多いかと思います。
Photoshopでグリッチノイズ加工をする方法はいくつかあるかと思いますが、今回ご紹介するのは一番簡単で早い方法をお伝えします!
こちらの記事はアプリ「Adobe Photoshop」を使ったTipsになります。持っていない方や更新間近の方は「Adobe CCをおトクに購入する方法」も参考にしてみてください。
画像のグリッチノイズ方法
Step1)レイヤーの複製
グリッジを表現したい画像のレイヤーを複製します。(レイヤーを単純に複製しているだけです。ちなみにレイヤーの複製のショートカットは「⌘+J」です)
Step2)レイヤースタイル>高度な合成
Step1で複製したレイヤーの、レイヤースタイルパネルを開き、高度な合成の項目の中からチャンネル「R」にのみチェックを入れてください。(デフォルトはR/G/Bの3つに入っています)
Step3)レイヤースタイル>高度な合成
複製したレイヤーだけを選択し、移動ツールを使い左に少しだけズラします。
これで基本的に画像のグリッジは完了です!とっても簡単ですね!続いては文字のグリッジ加工についてです。
文字のグリッジノイズ方法
作り方はほとんど画像の場合と同じ要領で作成します!
1)画像の時には、レイヤーを1枚複製でしたが、文字の場合は2枚複製。
2)複製した2枚のレイヤーを、透明度:50%に設定。上記画像のように、1枚目のレイヤーを「G」「B」にチェック、2枚目を「R」にのみチェックを入れる。
3)移動ツールを使い、1枚目のレイヤーを左にズラす、2枚目のレイヤーを右にズラす、で完成です!
Illustrator(イラレ)を組み合わせて文字を作ることで、さらに歪みやノイズがある文字を作り出すことが可能です。以下の別記事を参考にしてみてください!
走査線ノイズを追加する
もう少し映像っぽさや、ブラウン管テレビ風なノイズが入った表現ができる走査線を入れる方法です。
Step1)白レイヤーを追加
走査線ノイズを乗せたいレイヤーの上に、【新規レイヤー】を作成し、白で塗りつぶします。(新規レイヤー>上部メニューの[編集]→[塗りつぶし…]を[内容:ホワイト]で真っ白のレイヤーが作れます。)
Step2)「ハーフトーン」フィルターを適用
上部メニューの[フィルターギャラリー]>[スケッチ]→[ハーフトーンパターン]を選択します。
ハーフトーンの設定は【サイズ:1、コントラスト:10、パターンタイプ:線】にしてみてください。(写真によっては、コントラストの数値を変更した方が良い場合があります。)
Step3)オーバーレイに変更
走査線レイヤーの描画モードを[オーバーレイ]に変更してみると、走査線ができます!
Step4)ノイズを加えて完了!
上部メニューの[フィルター]>[ノイズ]→[ノイズを加える..]を選択します。
[ノイズを加える..]の量は[10%〜30%]程度に調整してみると良いかもしれません。
完成!
一度覚えてしまえばとっても簡単にできます!
VR、ゲーム、レトロ、e-sportsなどのジャンルを取り扱ってるデザインで見かける手法なので、もしグラフィックに取り入れる際には参考にしてみてくださいね!(あまり使い所が多いテクニックではないと思いますが・・!)