designsupply.llc
  • aboutabout
  • servicesservices
  • worksworks
  • mediamedia
  • contactcontact
  • homeサイトトップ
  • about会社概要
  • services業務内容
  • works実績紹介
  • mediaメディア
  • contactお問い合わせ
ja/

media

メディア

  1. サイトトップ
  2. メディア
  3. デザインの記事
  4. Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する

Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する

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

この記事を書いた人オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はダイエットコーラとチョコレートが欠かせないアラフォーWebクリエイター。

Sponsored Link

categories

  • デザイン(30)
  • Photoshop(26)
  • ワークショップ(24)
  • コーディング(18)
  • Sketch(16)
  • Illustrator(12)
  • カラースキーム(10)
  • タイポグラフィ(8)
  • Adobe その他(8)
  • フォトグラフィ(7)
  • Lightroom(4)
  • WordPress(4)
  • ナレッジ(4)
  • サイト運営(3)
  • Figma(2)
  • AfterEffects(2)
  • InVision(1)
  • Premiere(1)
  • 次の記事
  • 一覧に戻る
  • 前の記事

まだ依頼内容が決まっていなくても、ご相談ください。

課題の整理や小さな検証、UI/UX・フロントエンドの部分的な支援から始められます。

お問い合わせやご相談はこちらから

Webサイト・プロダクトの企画設計/UI・UXデザイン/フロントエンド開発合同会社デザインサプライ(DesignSupply. LLC)

Office:大阪府大阪市天王寺区清水谷町3-22
Email:info@designsupply-web.com
home
  • サイトトップ
about
  • 3つのポリシー
  • 経営理念
  • 代表・クリエイター紹介
  • 会社概要
services
  • ビジネス・プロダクト支援
  • UI/UX・フロントエンド開発支援
  • プロジェクトの進め方・支援体制
  • エデュケーション事業
works
  • 開発プロジェクト
  • クリエイティブ支援
  • 自社プロダクト
media
  • デザイン
  • プログラミング
  • マーケティング
  • Web開発
  • 写真・動画制作
contact
  • お問い合わせ
news
  • インフォメーション
privacy
  • プライバシーポリシー

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

© 2013 - 2026 DesignSupply.LLC
サイトトップへ
contact