VR Inside

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

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

2017/10/19 17:15

 ※本記事は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/

最新ニュースを読む