Nem måde at lave 360 ​​VR-design på

Du har kun brug for et ækvægtformet gitter og al billedredigeringssoftware som Photoshop

Siden jeg studerede som arkitekt og måske endda før, kunne jeg godt lide at tegne. Før et stort projekt som bygning, branding eller UI måtte jeg bruge lidt tid på at trække på et stykke papir. For mig var det en slags måde at synkronisere, hvad jeg havde i hovedet med det, jeg vil fremstille.

Da jeg begyndte at spille med VR, blev denne vane praktisk. Det er ikke let at forudsige, hvordan min idé vil føles i 3d, så tegning af skitser hjalp til med at forestille sig dette rum, før det bygges.

Næsten to år undersøgte jeg måder, der kunne hjælpe med at tegne for VR. Jeg kom med idéen om at bruge det ækvægtformede gitter. Det hjalp med at bringe mere eller mindre realistiske 360 ​​designs. Jeg fik en masse positive feedback fra folk, der forsøgte at bruge det.

Denne undersøgelse hjalp mig meget. For nogen tid siden havde jeg et træning / personlig projekt ”Måned af tilbagebetalinger.” Praktisk taget tog jeg hver dag en eksisterende idé fra Dribbble og udforskede det mere. For nogle skud tog jeg pæn 2d-designs og prøvede at finde ud af, om VR kan gøre dem bedre. For at gøre dette på kort tid brugte jeg det samme gitter som til 360 skitser, men det denne gang i Photoshop. Ofte har folk nået mig og spurgt, hvordan jeg gjorde det, så jeg besluttede at lave en kort tutorial og beskrive min flow trin for trin. Hvis du fanger koncepter, bliver det temmelig enkelt.

Begynd først med at tilføje dine designs på tegnebrættet. Brug referencer til netværk til referencer. Det lodrette net viser rotation af brugernes synspunkt. I midten er det, en bruger ser fra ham.

Der er også to firkanter, der viser et omtrentlig område med brugerfokus (indeni), og hvad der er brugerens fulde synsfelt (udenfor). De hjælper med at finde skalaer og placeringselementer i den rigtige position.

Lad os starte med at tegne en flad widget midt i synsfeltet. Hvis du vil beholde den uden transformation og åbne i VR, vil du bemærke, at widget er buet.

I nogle tilfælde er det okay, men for at få den flade overflade skal du transformere din widget i den modsatte retning. For at gøre det skal du konvertere alle lag til et enkelt smart objekt, klikke på Rediger -> Transform -> Warp og gøre det buet i den modsatte retning ved hjælp af linjer som guider.

For at tegne et fladt plan på en side kan du gøre den samme transformation ved hjælp af guider til venstre og højre fra en bruger.

Hvis du vil have en flad widget i enhver anden retning, skal du bruge guider i midten af ​​visningen til at transformere dit smarte objekt. Og flyt den til den rigtige position senere.

Hvis du vil tegne noget på toppen eller bunden fra brugeren, skal du transformere det i fuld bredde på toppen eller den nederste del af gitteret.

Det vigtigste er at fortsætte med at teste, hvordan det ser ud i VR. For hvert design havde jeg mindst ti test for at få det helt rigtigt.

Tjek video af min proces:

Hvad er det næste?

Nu kan du dele dit design på platforme, der understøtter 360, som Facebook og YouTube. Det tillader, at samfundet kan se din kreativitet.

Der er flere måder at åbne dit billede på. Til hurtige test bruger jeg GoPro VR-afspiller.

For at få sådan gif bruger jeg GoPro VR Player til at åbne 360 ​​billeder og optager bare min skærm ved hjælp af Quick Time-afspiller.

Jeg håber, at denne korte arbejdsgang hjælper dig med at designe bedre VR-oplevelser. Du kan downloade PSD-fil på Gumroad:

Du kan også bruge ethvert andet værktøj til design. Jeg foretrækker at bruge Photoshop, fordi det giver større fleksibilitet i effekter og transformationer.

Giv din feedback eller del dine designs på twitter eller i kommentarer herunder.

UPD. Jeg prøvede lige VRooms. Det er et simpelt værktøj, der giver dig mulighed for at se i VR dine 360 ​​design lavet i Figma. Jeg vil lege med det lidt mere for at komme med gennemgang og tutorial. Følg mig her eller på Twitter for ikke at gå glip af det.