※本記事は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」を活用して制作していきます。



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


Photoshopで描いたものを挿入


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



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



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



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



Select」を選択します(



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



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



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



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



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


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



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



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



Photoshopで色を切り取り挿入


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



 


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


 



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



 


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



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


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






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

Copyright ©2017 VR Inside All Rights Reserved.

情報提供元: VR Inside
記事名:「 Photoshopユーザー必見!PNGファイルを挿入して、VR空間を表現しよう!【STYLY SuiteでVR制作】