Share
In questo tutorial ti mostrerò come prendere il tuo design piatto (come in bidimensionale, non piatto come nella tendenza attuale del design) e aggiungere un po 'di vita sdrammatela su un piano 3D in prospettiva. Lo scopo di questo è presentare il tuo design in un modo più dinamico, dandogli maggiore profondità e appeal visivo. Può essere un modo molto efficace per presentare le immagini ai clienti.
Ci sono un paio di modi per ottenere questo effetto, come usare gli strumenti 3D di Photoshop e creare livelli 3D. Tuttavia, sono più a mio agio nell'usare un software 3D adeguato come 3ds Max in quanto offre molto più controllo sulla fotocamera, permettendoti di ruotare attorno al piano 3D con un maggiore controllo sull'illuminazione e sull'ombreggiatura. Inizialmente potrebbe sembrare più complicato, ma quando lo avrai fatto una volta sarai in grado di prendere in giro il tuo lavoro in pochi minuti.
Se sei nuovo in 3D, abbiamo una miriade di tutorial per iniziare ... I principi qui dimostrati sono agnostici applicativi; sarai in grado di applicarli a qualsiasi software 3D là fuori. Per seguirti dovresti sapere come orientarti su Photoshop e aver prima aperto almeno un programma di strumenti 3D.
Ad ogni modo, per questo tutorial mi prenderò in giro il design della nostra ultima app chiamata TriplAgent, che sembra diffondersi a macchia d'olio su quegli interwebs. Puoi vedere l'intero design sul mio portfolio Behance.
Apri la tua applicazione 3D. Sto usando 3ds Max 2012, ma come accennato prima puoi usare praticamente qualsiasi strumento 3D.
Uso Vray come motore di rendering principale perché offre luci e ombre realistiche. Assicurati di accendere Illuminazione indiretta, ma potresti anche utilizzare il renderer predefinito di Max e ottenere risultati simili.
Applica impostazioni simili a quelle degli screenshot.
Ora è il momento di creare lo sfondo. Vai a Crea> Sotto Primitive standard scegli VRayPlane. Apparirà un piano come nello screenshot qui sotto. Basta trascinarlo di lato, non importa dove.
VRayPlane sarà lo sfondo della tua scena. Bene, creiamo il piano reale in cui si posizionerà il tuo progetto. Di nuovo, vai a Crea> Primitive standard> Box. Sotto "parametri", inserisci le dimensioni come indicato di seguito (questa è la schermata per un iPhone 5).
Ovviamente, puoi inserire qualsiasi dimensione che ti piace finché il tuo design aderisce alle stesse proporzioni. Ora dobbiamo applicare una mappa UV, in modo che il design si adatti perfettamente agli angoli dell'aereo. Vai a "Modifica" nel pannello a destra e scegli Mappatura UVW dall'elenco dei modificatori. Assicurati che "Planare" sia selezionato.
Tempo di applicare i materiali, quindi apri il Editor di materiali nell'angolo in alto a destra della barra degli strumenti principale. Crea due materiali VRay, uno per il tuo background (il piano VRay) e uno per il tuo box che hai appena creato. Trascina e rilascia il materiale su ciascun oggetto.
Facciamo un rendering veloce. Fai clic su Render Production (l'icona della teiera) ...
Un po 'grigio e nudo, ma è un buon inizio. Bel lavoro, è ora di indossare un bel vestito. Abbiamo bisogno di applicare la nostra immagine di simulazione reale come materiale per l'oggetto 3D. Apri l'editor dei materiali e fai clic sul materiale che hai assegnato alla scatola.
Scorri verso il basso fino a visualizzare il rollout di Maps, quindi fai clic su Diffuso> Mappe> Standard> Bitmap e vai alla cartella in cui hai salvato il tuo disegno.
Nota: Il mio file era un file .png con dimensioni di 1136 x 640 pixel.
Ora vedrai il tuo file avvolto nella sfera nello slot del materiale. Fare clic sull'icona a scacchi e vedrete il disegno avvolto intorno alla vostra scatola in vista prospettica. Non dimenticare di impostare il valore di sfocatura su 0,01 per ottenere un rendering nitido della tua immagine.
Colpire rendere...
Ecco! Il design si adatta perfettamente alla tua scatola. Vai avanti e salva questo file come png o tif. È ora di cambiare il colore di sfondo e di arricchire le cose ...
Ci sono due modi per cambiare il colore di sfondo. O puoi cambiare il colore del materiale che hai assegnato al tuo VRayPlane o puoi cambiare il colore in Photoshop. Ti mostrerò come farlo in Photoshop, perché è molto più semplice cambiare il colore senza re-rendering della scena.
Andiamo avanti. Fai clic con il tasto destro del mouse su VrayPlane e fai clic su "Nascondi selezionati".
Abbiamo bisogno di nascondere il backgound in modo che non appaia nel rendering. Colpire rendere e fare clic sull'icona alfa come si vede sotto nello screenshot. Salva l'immagine come .png e abbiamo finito qui.
È ora di passare al tuo migliore amico, Photoshop.
Con il canale alfa possiamo creare una maschera e isolare lo sfondo. Prendi il file alfa che hai appena salvato e aprilo in Photoshop. Vai a canali e selezionare (CMD + A) il canale alfa in basso. Copialo negli appunti.
Apri l'immagine di rendering che hai precedentemente salvato. Di nuovo, vai alla finestra dei canali e incolla il canale alfa che hai appena copiato. Questa volta dobbiamo selezionare la maschera reale, quindi tieni premuto CMD e fai clic sulla maschera.
Assicurati che la maschera sia selezionata. Apri la finestra dei livelli. Tenendo premuto il CMD tasto, fare clic con il tasto sinistro su Aggiungi maschera di livello come visto di seguito. L'aereo dovrebbe essere ben isolato dallo sfondo.
Rimozione dello sfondo e isolamento del piano. Crea un nuovo livello e riempilo con qualsiasi colore che ti piace. Finché sembra buono. Mkay.
Ora stiamo per aggiungere ombre. Potresti mantenere l'ombra nell'immagine, ma usiamo le ombre di Photoshop questa volta. CMD + clicca di nuovo sulla maschera e crea un nuovo livello. Riempi la selezione con un colore scuro che corrisponde al tuo sfondo. Apri gli stili di livello e gioca con l'effetto ombra esterna finché non trovi qualcosa che ti piace.
Assicurati che l'angolo delle ombre sia corretto. Bel lavoro, abbiamo finito! Un modo più piacevole di guardare un disegno 2D, non credi?
Questo è ciò che potresti finire con:
In questo tutorial, abbiamo analizzato come prendere un progetto 2D e trasformarlo in un modello 3D con prospettiva. Immagino che molti di voi fossero un po 'intimiditi dall'intera faccenda 3D, ma è davvero piuttosto semplice una volta capito..
Alcuni passi successivi interessanti potrebbero essere la sperimentazione di diverse dimensioni del piano, utilizzando diversi angoli di ripresa e anche il cambio dell'obiettivo della telecamera per ottenere una distorsione della prospettiva. Puoi vedere l'intero design sul mio portafoglio Behance e anche controllare l'app mobile TriplAgent. Grazie per il seguito!
Non hai il tempo o le competenze per lavorare con Photoshop? Non lasciare che ti fermi.
Placeit è un generatore di mockup; uno strumento online che ti consente di incorporare i tuoi progetti (siano essi disegni di UI, loghi, altre risorse di branding) in scene fotorealistiche. Sicuramente un'alternativa rapida e semplice a Photoshop.
Gattino accanto a un iPhone X Mockup sdraiato su un libro su un letto di ragazze
Modello iPhone X che si trova sulla cima di un tavolo vintage
Accentsconagua