WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： はーちゃん
カテゴリー： デザイン >Photoshop

ゲームやアニメなどで、バグが起こったようなノイズの入った演出を見たことはありませんか？
今回はそんなサイバーな雰囲気を、Photoshopで表現する方法をご紹介します。

グリッチとは

グリッチとは、動画やゲームなどでバグが起こった時に見られるようなノイズの乱れことを指します。
この現象をあえてデザインに取り入れることで、レトロな雰囲気やサイバーっぽい近未来的な雰囲気を作り出すことができます。

今回はそんなグリッチ加工を、写真や文字につける方法をご紹介します！

写真をグリッチ加工する

まずはキャンバスに画像を用意します。

レイヤーパネルからレイヤーを「＋」ボタンにドラッグ → ドロップして画像を複製します。

色ズレ風の効果をつける

ここから、3Dメガネでかけたときのような色がズレて見える効果をつけます。
複製したレイヤーを選択して、「イメージ → 色調補正 → 彩度を下げる」を選択します。

レイヤーパネルから、複製したレイヤーをダブルクリックしてレイヤースタイルパネルを開きます。
そこから「レイヤー効果」内の「チャンネル：R」のチェックを外して、「OK」ボタンをクリックします。

次に、最初に開いた複製元のレイヤーをダブルクリックしてレイヤースタイルパネルを開き、今度は「チャンネル：GとB」のチェックを外して、「OK」ボタンをクリックします。

すると、以下のような写真になるので、「移動ツール」を使って複製したレイヤーを横にずらし、色ズレ風の効果をつけます。

デジタルノイズ風の効果をつける

次に、ノイズで所々が途切れて見えるような効果をつけていきます。
「長方形選択ツール」を使って、ノイズをつけたい部分を選択します。

いくつかノイズをつけたいので「Shiftキー」を押しながら、画像を見てノイズがあったら良さそうな部分を、もう何箇所か選択します。

選択し終えたら、複製したレイヤーを選択した状態で「移動ツール」を使って横にずらします。

すると、画像にノイズが走ったようなサイバーっぽい雰囲気を作ることができました！

文字をグリッチ加工する

ここからは、文字にグリッチ感を出す手順を紹介していきます。

まずは、お好きなテキストを入力します。
このとき、ノイズをつけると読みづらくなることがあるので、フォントサイズを大きめ・太さを太めに設定しておくのがおすすめです。

色ズレ風の効果をつける

そしたら、写真のときと同様に、レイヤーパネルの「＋」ボタンにドラッグ → ドロップしてテキストレイヤーを複製し、レイヤースタイルパネルを開いて「チャンネル：R」のチェックを外し、「OK」ボタンをクリックします。

次に、このままだと文字色が水色と白だけでグリッチ感が出ないため、入力した複製元のテキストレイヤーの文字色を、赤色に設定します。

「移動ツール」で複製元のテキストレイヤーを左下にずらします。
すると、文字にも色ズレ風の効果をつけることができました！

デジタルノイズ風の効果をつける

続いて、文字にもデジタルノイズ風の効果をつけていきます。
しかし、このままでは選択範囲を作成しても部分的な移動ができないので、レイヤーパネルから複製したテキストレイヤーを右クリックし、「テキストをラスタライズ」を選択します。

そして、画像のときと同様に、「長方形選択ツール」でノイズをつけたい部分を何箇所か選択し、複製したテキストレイヤーを選択した状態で、「移動ツール」を使って横にずらします。

すると、文字に対してもノイズが走ったようなグリッチ感を出すことができました！

フィルターを使ってさらにグリッチ感を出す

このまま完成でもよいのですが、今回はさらにノイズ感を出すために、フィルターを使用していきます。
まずは、レイヤーパネルの「＋」ボタンをクリックして新規レイヤーを作成し、描画色が「白」の状態で「編集 → 塗りつぶし → OK 」で白く塗りつぶします。

そしたら、塗りつぶしたレイヤーを選択した状態で、描画色を「グレー」に設定し、「フィルター → フィルターギャラリー」を選択します。

パネルが表示されるので、［ハーフトーンパターン］を選択し、「パターンタイプ：線」、「サイズ」や「コントラスト」をお好きな値で設定し、「OK」を押します。

このままではストライプしか見えないため、レイヤーパネルの描画モードからよりグリッチ感が出るものを選択します。
今回は「覆い焼きカラー」を選択し、「不透明度：40%」にしました。
この部分は使用する画像や文字の色で見え方が変わってくるので、皆さんのお好みで調整してみてください！

これでグリッチ加工の完成です！
バグが発生したゲーム画面のようなサイバーっぽい雰囲気を作ることができました！

まとめ

今回は、グリッチ加工でサイバーっぽい効果をつける方法をご紹介しました。
上記では暗い画像で作成しましたが、同じ手順で白っぽい画像も作ってみました。ガラッと印象が変わりますね。
少し手順が多くて大変ですが、面白い効果を演出することができるので、ぜひ皆さん試してみてください！