Εύκολος τρόπος για να δημιουργήσετε σχέδια 360 VR

Θα χρειαστείτε μόνο ένα ισομετρικό πλέγμα και οποιοδήποτε λογισμικό επεξεργασίας εικόνων, όπως το Photoshop

Από τη μελέτη ως αρχιτέκτονα, και ίσως ακόμη και πριν, μου άρεσε το σκίτσο. Πριν από οποιοδήποτε μεγάλο έργο όπως το κτίριο, το branding ή το UI έπρεπε να περάσω λίγο χρόνο αντλώντας από ένα κομμάτι χαρτί. Για μένα, ήταν ένας τρόπος συγχρονισμού όσων είχα στο μυαλό μου με αυτό που θέλω να φτιάξω.

Όταν άρχισα να παίζω με το VR, αυτή η συνήθεια είναι βολική. Δεν είναι εύκολο να προβλέψουμε πώς θα νιώσει η ιδέα μου στο 3d, οπότε τα σκίτσα σχεδίασης βοήθησαν να φανταστεί κανείς αυτόν τον χώρο πριν το κτίσει.

Σχεδόν δύο χρόνια εξερευνούσα τρόπους που θα μπορούσαν να βοηθήσουν στην κατάρτιση για το VR. Ήρθα με την ιδέα να χρησιμοποιήσω το ισομετρικό πλέγμα. Βοήθησε να φέρει λίγο πολύ ρεαλιστικά σχέδια 360. Έχω πολλά θετικά σχόλια από ανθρώπους που προσπάθησαν να το χρησιμοποιήσουν.

Αυτή η έρευνα μου βοήθησε πολύ. Πριν από λίγο καιρό είχα μια άσκηση / προσωπικό έργο "Μήνα ριμπάουντ". Πρακτικά, κάθε μέρα έκανα κάποια υπάρχουσα ιδέα από το Dribbble και το διερεύνησα περισσότερο. Για κάποιες βολές, έβλεπα ωραία σχέδια 2δ και προσπάθησα να καταλάβω αν το VR μπορεί να τους κάνει καλύτερο. Για να το κάνω αυτό σε σύντομο χρονικό διάστημα χρησιμοποίησα το ίδιο πλέγμα όπως για 360 σκίτσα, αλλά αυτή τη φορά στο Photoshop. Πολύ συχνά οι άνθρωποι έφτασαν σε μένα και ρώτησα πώς το έκανα, γι 'αυτό αποφάσισα να κάνω ένα σύντομο φροντιστήριο και να περιγράψω τη ροή μου βήμα προς βήμα. Εάν θα πιάσετε έννοιες, θα γίνει αρκετά απλή.

Αρχικά, ξεκινήστε να προσθέτετε τα σχέδια σας στον πίνακα γραφικών. Για τις αναφορές χρησιμοποιήστε γραμμές στο πλέγμα. Το κατακόρυφο πλέγμα δείχνει την περιστροφή της άποψης των χρηστών. Στο κέντρο είναι αυτό που ο χρήστης θα δει από τον ίδιο.

Επίσης, υπάρχουν δύο τετράγωνα, που δείχνουν μια περιοχή γύρω από την εστίαση των χρηστών (μέσα) και ποιο είναι το πλήρες οπτικό πεδίο των χρηστών (εκτός). Βοηθούν στην εύρεση στοιχείων κλίμακας και θέσης στη σωστή θέση.

Ας ξεκινήσουμε σχεδιάζοντας ένα επίπεδο widget στο κέντρο του οπτικού πεδίου. Εάν το διατηρήσετε χωρίς μετασχηματισμό και ανοίξετε στο VR, θα παρατηρήσετε ότι το widget είναι καμπύλο.

Σε ορισμένες περιπτώσεις είναι εντάξει, αλλά για να φτάσετε στην επίπεδη επιφάνεια, θα πρέπει να μετατρέψετε το γραφικό σας στοιχείο προς την αντίθετη κατεύθυνση. Για να το κάνετε, μετατρέψτε όλα τα στρώματα σε ένα ενιαίο έξυπνο αντικείμενο, κάντε κλικ στην επιλογή Επεξεργασία -> Μετασχηματισμός -> Warp και κάντε το καμπύλο προς την αντίθετη κατεύθυνση χρησιμοποιώντας γραμμές ως οδηγούς.

Για να σχεδιάσετε ένα επίπεδο αεροπλάνο σε μια πλευρά, μπορείτε να κάνετε τον ίδιο μετασχηματισμό χρησιμοποιώντας οδηγούς αριστερά και δεξιά από ένα χρήστη.

Για να έχετε ένα επίπεδο widget σε οποιαδήποτε άλλη κατεύθυνση, χρησιμοποιήστε οδηγούς στο κέντρο της προβολής για να μετατρέψετε το έξυπνο αντικείμενο. Και μετακινήστε τη σωστή θέση αργότερα.

Εάν θέλετε να σχεδιάσετε κάτι στο πάνω ή στο κάτω μέρος από το χρήστη, θα πρέπει να το μετατρέψετε σε όλο το πλάτος στο πάνω ή στο κάτω μέρος του πλέγματος.

Το πιο σημαντικό είναι να συνεχίσετε να ελέγχετε πώς φαίνεται στην VR. Για κάθε σχέδιο, είχα τουλάχιστον δέκα δοκιμές για να το κάνω σωστό.

Δείτε το βίντεο της διαδικασίας μου:

Τι έπεται?

Τώρα μπορείτε να μοιραστείτε το σχέδιό σας σε πλατφόρμες που υποστηρίζουν 360, όπως το Facebook και το YouTube. Θα επιτρέψει στην κοινότητα να δει τη δημιουργικότητά σας.

Υπάρχουν περισσότεροι τρόποι για να ανοίξετε την εικόνα σας. Για γρήγορες δοκιμές, χρησιμοποιώ το πρόγραμμα αναπαραγωγής GoPro VR.

Για να πάρω τέτοιο gif χρησιμοποιώ το GoPro VR Player για να ανοίξω 360 εικόνα, και απλά να καταγράφω την οθόνη μου χρησιμοποιώντας το Quick Time player.

Ελπίζω ότι αυτή η σύντομη ροή εργασίας θα σας βοηθήσει να σχεδιάσετε καλύτερες εμπειρίες VR. Μπορείτε να κατεβάσετε το αρχείο PSD στο Gumroad:

Μπορείτε επίσης να χρησιμοποιήσετε οποιοδήποτε άλλο εργαλείο για το σχεδιασμό. Προτιμώ να χρησιμοποιώ το Photoshop επειδή δίνει μεγαλύτερη ευελιξία σε εφέ και μετασχηματισμούς.

Παρακαλούμε δώστε τα σχόλιά σας ή μοιραστείτε τα σχέδιά σας στο twitter ή στα σχόλια παρακάτω.

UPD. Προσπάθησα μόνο τα VRooms. Είναι ένα απλό εργαλείο που σας επιτρέπει να βλέπετε σε VR τα σχέδια 360 που έγιναν στο Figma. Θα παίξω με αυτό λίγο περισσότερο για να έρθει με αναθεώρηση και φροντιστήριο. Με ακολουθήστε εδώ ή στο Twitter για να μην το χάσετε.