Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
80年代に流行ったデザインのトレンドにレトロフューチャーというものがあります。言葉の通り、過去の時代にイメージされた未来というものなのですが、映画のタイトルなどでもよく見かけるこの手法を今回はPhotoshopを使って再現してみたいと思います。いろんなグラフィック効果を重ね合わせることで表現しますが、色々と応用もできると思いますのでぜひ参考にしてみてください。過去には同じようにPhotoshopを使って様々なグラフィック表現を作成している記事も公開していますので合わせてご参考ください。
(こちらの記事もどうぞ)
Photoshopで輝きのある派手な立体装飾文字を作成する
Photoshopでテキストやパスをネオンサイン風にデザインする
Photoshopで文字や要素に立体的でメタリックな質感を加える
【デザインワークショップ】vol.5 袋文字のテキストをスポーツ新聞風に表現してみる
装飾するテキストを配置します。書体はジオメトリックなもので斜体になっているものがイメージにマッチします。
作成したテキストに対して「グラデーションオーバーレイ」のレイヤー効果で塗りを追加します。特徴としては境界線がくっきりとしたグラデーションで、色味はサイバー感が出るような寒色系がメインになり、光の反射具合も表現しておくと良いですね。
テキストに対して「境界線」を設定します。色味はこちらもテキストの塗りに合うような寒色系のグラデーションにしておきます。この後、この境界線に対してエンボス加工をしていきますので、ある程度目立つようにしておきます。
先ほど作成した境界線に対して「エンボス」を適用していきます。金属のようなメタリック感の硬さを表現するため、コントラストは強めで、パキッとした雰囲気になるようにしておきます。ポイントとしては、光沢の輪郭の形状をシャープなものに、そしてスタイルを「エンボスの境界線を描く」に設定し、テクニックは「シゼルハード」にしておくことです。
テキストの背景にぼんやりと光るグローを、「光彩(外側)」で表現していきます。通常ですと光彩効果を使う場合にはぼんやりと輪郭をぼかすのが多いですが、今回はエレメントのテクニックの項目を「精細」にすることで、文字の形に沿ってグローが伸びるようにしておきます。
最後に「ドロップシャドウ」で反射光のような濃いめのハイライト光を演出しておきます。こちらも光彩効果同様にぼかしすぎずにソリッドな質感になるように濃いめに入れておくのが良いですね。
切り抜かれたモデル写真のレイヤーを複製し、「色調補正」→「グラデーションマップ」でデュオトーン調にします。色味は全体の世界観に合わせておきます。
グラデーションマップを適用したレイヤーに対して描画モードを「スクリーン」に設定し透明度を調整しながらベースの写真レイヤーに重ねて馴染ませます。
先ほどの要領で写真のベースレイヤーを複製し、最前面に配置し、「フィルター」→「ハイパス」を適用します。描画モードを「オーバーレイ」に設定し、同じく透明度を調整しながら重ねていきます。
モデル写真の背景にはうっすらと光が伸びるように「光彩(外側)」を設定しておきます。
今回はグリッドのラインを罫線用のパターンで対応します。複製した塗りつぶしレイヤーに対して「パターンオーバーレイ」を適用します。背景が暗いので明るい色の線になるようにします。
グリッドのパターンを適用したレイヤーをラスタライズして、「自由変形」→「遠近法」で奥行きが出るように変形させます。
グリッドのパターンに色をつけていきます。レイヤー効果の「カラーオーバーレイ」で世界観に合った色味に変更します。背景色が暗くて、罫線が明るいため、描画モードを「比較(暗)」に設定することで明るいグリッドの部分だけを残すことができます。
最後に、作成したテキストと人物モデルを組み合わせると完成です。今回はこのような仕上がりになりました。最後の仕上げに全体的にノイズを加えることで、よりレトロな印象を表現することができます。
今回はPhotoshopを使ってサイバー感のあるレトロフューチャーなグラフィックを作成してみました。メタリックで光沢感のあるグラデーションと、原色の鮮やかなグローが特徴的ですね。Photoshopの様々な機能を使っていますが、作成していてもとても面白いので是非一度試してみてください。過去記事でまとめている「Photoshopでテキストやパスをネオンサイン風にデザインする」とも相性が良いので、組み合わせてみても良さそうですね。 (参考にさせて頂いた記事) Photoshopで80年代風レトロデザインなテキストスタイルの作り方
テキスト周りの装飾
まずは全体の背景を塗りつぶしレイヤーで用意します、今回はデザイン上、暗い青紫を背景に作成していきます。






人物モデルの加工
続いて人物モデルの素材を加工していきます。適宜切り抜き処理を施しておいたものをカンバスに用意します。




背景などの調整や作り込み
仕上げに背景も作り込んでいきます。最初に用意した背景の塗りつぶしレイヤーを複製してグリッド線の要素を作成していきます。





今回はPhotoshopを使ってサイバー感のあるレトロフューチャーなグラフィックを作成してみました。メタリックで光沢感のあるグラデーションと、原色の鮮やかなグローが特徴的ですね。Photoshopの様々な機能を使っていますが、作成していてもとても面白いので是非一度試してみてください。過去記事でまとめている「Photoshopでテキストやパスをネオンサイン風にデザインする」とも相性が良いので、組み合わせてみても良さそうですね。 (参考にさせて頂いた記事) Photoshopで80年代風レトロデザインなテキストスタイルの作り方
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories