デジタル画面にノイズが乗ったようなバグ感ある文字をPhotopeaで作ってみた。

2020年5月23日デザイン

デジタル画面にノイズが乗ったようなバグ感ある文字をPhotopeaで作ってみた。

デジタル画面にノイズが乗ったようなバグ感な文字作ってみた。

このようなデジタル調のビリビリ、ザラザラした表現を「Glitch-グリッチ」というようで一見するとどうやって作っているのか謎ですが作り方はとてもシンプルでした。

ゲーマーやクラブハウス、EDM系のアーティスト(DJ)のCDジャケットやロゴ、チラシなどで使い道があるのではと思いました。

使用したフォントは「Lalezar」といってPhotopeaに入っていたのを使いました。こちらはGoogle Fontsです。https://fonts.google.com/specimen/Lalezar

今回参考にしたのはMade by MightyさんのPhotoshop Tutorials – Glitch Animationです。

使用したのはPhotopeaだけです。オンラインでサイトにアクセスすれば無料ですぐに使い始められます。とっても便利です。https://www.photopea.com/

ここからは作り方です。ざっくり紹介です。

Photopea 新規プロジェクト→塗りつぶし黒→新規レイヤー→塗りつぶし黒

まずはファイルから新規と進めて新規プロジェクトを作成します。XGAを今回は選びました。次に左側メニューのバケツを使って背景を黒く塗りつぶします。

次に右側下の新規レイヤーを作成をクリックして新規レイヤーを作成します。先ほどと同様にバケツで黒く塗りつぶします。

次は新しく作ったレイヤーを選択した状態でフィルターからノイズ→ノイズを追加で10%でノイズを追加します。ノイズが追加できたらもう一度フィルターからぼかし→モーションぼかしと進めます。角度0°で20pxでかけます。

Photopea 文字入力(フォントLalezar)

次は左メニューのテキストツールを使います。フォントは「Lalezar」を使いました。左上か右の「文」をクリックするとフォントやフォントサイズなどの変更ができます。

Photopea 右クリックからラスタライズ

テキストレイヤーをラスタライズします。右クリック→ラスタライズ。

Photopea 矩形選択で選択範囲を指定→カット+ペースト+移動

左メニューの矩形選択を使ってラスタライズしたテキストレイヤーを選択します。選択したら、カット→貼り付け→移動の順です。command(Ctrl)+Xでカット、command(Ctrl)+Vで貼り付け、矢印キーで左右に移動。

Photopea 矩形選択で選択範囲を指定→カット+ペースト+移動

こんな感じ。カット+ペーストをやるとレイヤーがどんどん増えていくので、Shift+クリックでそれらを選択して右クリック→レイヤーを結合とやってあげるとやりやすいと思います。

Photopea レイヤーを複製→レイヤースタイルkらカラーオーバーレイ

右クリックで加工したテキストレイヤーを複製します。次に右下のレイヤースタイル(eff)をクリック→カラーオーバーレイと進めます。

Photopea カラーオーバーレイ

設定はそのままでOK。見た目が赤く変わるのでレイヤー順序を入れ替えます。

Photopea レイヤー順序の変更→フィルターからぼかし→モーションぼかし

複製したレイヤーを下に持ってきて、矢印キーで少し右にずらします。次にフィルターからぼかし→モーションぼかしと進めます。

Photopea モーションぼかしを10pxでかける

10pxでかけます。

Photopea レイヤースタイル→カラーピッカー

先ほどレイヤースタイルを追加した赤色テキストを複製します。複製したらレイヤースタイルをクリックしてカラーオーバーレイで色を変えます。#00c4ffに変えました。

レイヤー順序を変更し青色が一番下に来るようにします。順番は白、赤、青です。

Photopea レイヤー順序の変更→レイヤーを結合→レイヤーを複製

白、赤、青のレイヤーを結合します。Shiftでレイヤーを選択し、右クリック→レイヤーを結合と進めます。

レイヤーが結合できたら、結合したレイヤーを右クリック→レイヤーを複製と進めます。

Photopea ブレンドモードの変更→差の絶対値

複製したレイヤーのブレンドモードを「差の絶対値」に変更します。これで一応、完成にしました。

デジタル画面にノイズが乗ったようなバグ感な文字作ってみた。

ということで今回はデジタル画面にノイズが乗ったようなバグ感ある文字をPhotopeaを使ってやってみました。

テキストをカットとペーストでブレた表現にするというのはシンプルですがかっこいいなと思いました。ただもう少し変化が欲しかったのでcommand+Cでラインをコピーして貼り付けたりもしました。ここは好み?かな。

ここまで見ていただいた方は分かると思いますが、最後の仕上げで大きく変わります。今回もいつも通り仕上げをどうするかで煮詰まっていて、もう少しパンチが欲しいと思った時に偶然この「差の絶対値」がきました。正直そういうのばっかりです。いつも偶然に助けられてます。感謝です。