Photoshopユーザー必見!PNGファイルを挿入して、VR空間を表現しよう!【STYLY SuiteでVR制作】 | VR Inside

VR Inside

VR/AR/MRの未来を創るビジネスニュースメディア

Photoshopユーザー必見!PNGファイルを挿入して、VR空間を表現しよう!【STYLY SuiteでVR制作】

2017/09/23 11:30

    こちらの記事はiFashion Lab公式ブログの中からSTYLY Suiteに関連する技術記事として寄稿いただいております。今回は、PNGファイルを挿入して、VR空間を表現する方法をご紹介します。

     ※本記事はiFashion Lab公式ブログの中からSTYLY Suiteに関連する技術記事を寄稿いただいております。

    今回は、STYLY Suiteを使って10分でできる、PNGファイルの挿入だけでVR空間を作る方法をご紹介します。

    PNGファイルからでもVR空間が作れる!

    Photoshopユーザーの皆さん、VR空間を作るのは難しいと思っていませんか?

    実はSTYLY SuiteにはPNGファイルをアップロードできる機能があり、簡単にVR空間を作ることができます。Photoshopから書き出したPNGファイルを挿入して、VR空間で表現してみましょう!

    必要なもの

    ・PC(Mac / WindowsどちらでもOK)

    ・Google Chrome(推奨ブラウザ 制作時)

    ・Adobe Photoshop

     VR制作にはSTYLYを利用

    今回もVR制作ツール「STYLY」を活用して制作していきます。

    f:id:yonemoto-taiga:20170703181627p:plain

    STYLYのUI説明や基礎機能(オブジェクトの移動、回転など)はこの記事では割愛します。もし確認したい方はSTYLYの公式チュートリアルか、前回私たちが書いた記事を覗いてみてください。

    Photoshopで描いたものを挿入

    まずPhotoshopで好きなものを描きます。筆者は絵心がないので、へのへのもへじを描きました(

    f:id:yonemoto-taiga:20170912105007p:plain

    ファイル形式を.psdから.pngへ書き出して保存します(

    f:id:yonemoto-taiga:20170912105116p:plain

    STYLY Suiteのエディター画面へ移動し、「Assets」ボタンを押してください(

    f:id:yonemoto-taiga:20170614125847p:plain

    次に「Image / Gallery」を選択します(

    f:id:yonemoto-taiga:20170919104634p:plain

    Select」を選択します(

    f:id:yonemoto-taiga:20170919104657p:plain

    ファイルを選択して開くと、ファイル名が表示されるので「Upload」選択します(

    f:id:yonemoto-taiga:20170912110906p:plain

    ゲージが緑になったのを確認して、「Next」を押します(

    f:id:yonemoto-taiga:20170919105349p:plain

    次の画面では「Photo Flame (Original)」を選択します(

    f:id:yonemoto-taiga:20170912111411p:plain

    するとPhotoshopで描いたものが挿入されています。デフォルトの[Ground]と[Skybox]は消しておきましょう(

    f:id:yonemoto-taiga:20170912111522p:plain

    360度画像で空間を覆う色味を挿入

    「Start Position」を中心に、空間全体を覆う色味をPhotoshopで作ります。筆者はカラフルなレインボーを作りました(

    f:id:yonemoto-taiga:20170912112631p:plain

    次も上記と同じ要領で進め、最後に「360 Sphere Image」を選択します

    f:id:yonemoto-taiga:20170912113228p:plain

    天球画像になり、360度上下左右がレインボーに囲まれるようになりました

    f:id:yonemoto-taiga:20170912115406g:plain

    Photoshopで色を切り取り挿入

    さらにPhotoshopで切り取ったカラーなどを作って、空間内に配置してみましょう(

    f:id:yonemoto-taiga:20170912120747p:plain

     

    筆者のオススメは、グラデーションカラーです(

     

    f:id:yonemoto-taiga:20170912120627p:plain

    色々なカタチで切り取ってみましょう(

    f:id:yonemoto-taiga:20170912120952p:plain

     

    最後に、自分で作った素材を空間内に挿入してみましょう(

    f:id:yonemoto-taiga:20170912153948g:plain

    いかかでしょうか。PNGファイルを配置したり、天球画像を重ねてみたりするだけでも、VR空間を作り表現することができました。

    以上で、PNGファイルの挿入だけでVR空間を作る方法の解説は終了です。お疲れ様でした!

    ※元記事:Photoshopユーザー必見!PNGファイルを挿入して、VR空間を表現しよう!〜STYLY SuiteでVR制作 [第25回]〜 - iFashion Lab公式ブログ ©edoga inc. All Rights Reserved

         

         

    iFashionLab


    ファッションをイノベーティブに演出するラボチームです。東京・名古屋を中心にVRを活用した新しいブランドPR手法を開発・提案しています。iFashion Lab公式ブログ(http://blog.ifashion-lab.com/

    技術開発関連の寄稿受け付けています VRに関する開発メモやブログ、関連記事の寄稿をしていただける方は以下のフォームよりご連絡ください。
    技術開発記事の寄稿フォーム