Share
I denne opplæringen skal jeg vise deg hvordan du tar ditt flate design (som i todimensjonal, ikke flat som i den nåværende designtendensen) og legge til noe liv ved å spotte det opp på et 3D-plan i perspektiv. Formålet med dette er å presentere designet ditt på en mer dynamisk måte, noe som gir den mer dybde og visuell appell. Det kan være en svært effektiv måte å presentere bilder på klienter.
Det finnes et par måter å oppnå denne effekten, for eksempel å bruke Photoshops egne 3D-verktøy og lage 3D-lag. Jeg er imidlertid mer komfortabel med riktig 3D-programvare som 3ds Max, da det gir mye mer kontroll over kameraet, slik at du kan rotere rundt 3D-planet med større kontroll over belysning og skyggelegging. I utgangspunktet kan det se mer komplisert ut, men når du har gjort dette en gang, vil du senere kunne mock arbeidet ditt i løpet av minutter.
Hvis du er ny i 3D har vi en mengde opplæringsprogrammer for å komme i gang ... Prinsippene demonstrert her er søknad agnostisk; Du kan bruke dem til en hvilken som helst 3D-programvare der ute. For å følge med bør du vite veien rundt Photoshop og i det minste ha åpnet et 3D-verktøyprogram før.
Uansett, for denne opplæringen vil jeg hånse opp utformingen av vår nyeste app kalt TriplAgent, som ser ut til å spre seg som en brann på de interwebs. Du kan se hele designen på Behance-porteføljen min.
Åpne ditt 3D-program. Jeg bruker 3ds Max 2012, men som nevnt før kan du bruke omtrent hvilket som helst 3D-verktøy.
Jeg bruker Vray som hovedgengivelsesmotor fordi den gir realistisk belysning og skygger. Pass på at du slår på Indirekte belysning, men du kan også bruke Maxs standard gjengivelse og oppnå lignende resultater.
Bruk liknende innstillinger som de i skjermbildene.
Nå er det på tide å lage bakgrunnen. Gå til Opprett> Under Standard Primitives velger VRayPlane. Et fly vises som i skjermbildet nedenfor. Bare dra den til siden, det spiller ingen rolle hvor.
VRayPlane vil være bakgrunnen til scenen din. OK, la oss lage det aktuelle flyet hvor designet ditt skal sitte. Igjen, gå til Opprett> Standard Primitiver> Boks. Under "parametere", skriv inn dimensjonene som angitt nedenfor (dette er skjermstørrelsen for en iPhone 5).
Tydeligvis kan du legge inn noen dimensjoner du liker så lenge designen overholder de samme proporsjonene. Nå må vi bruke et UV-kort, slik at utformingen brytes pent rundt hjørnene av flyet. Gå til "Modifiser" i panelet til høyre og velg UVW-kartlegging fra modifikasjonslisten. Pass på at "Planar" er valgt.
Tid til å bruke materialene, så åpne opp Material Editor i øverste høyre hjørne av hovedverktøylinjen. Lag to VRay-materialer, en for din bakgrunn (VRay-flyet) og en for din boks du nettopp har opprettet. Dra og slipp materialet på hver gjenstand.
La oss utføre en rask gjengivelse. Klikk på Render Production (tekanneikonet) ...
Kinda grå og naken, men det er en god start. God jobb, tid til å sette på en fin kjole. Vi må bruke vårt faktiske mockup-bilde som et materiale til 3D-objektet. Åpne materielleditoren og klikk på materialet du tilordnet boksen.
Rull ned til du ser Maps-utrullingen, og klikk deretter på Diffuse> Kart> Standard> Bitmap og naviger til mappen der du har lagret designen din.
Merk: Min fil var en .png med dimensjoner på 1136 x 640 piksler.
Du vil nå se filen din viklet rundt sfæren i materialsporet. Klikk på det rutete ikonet, og du vil se designet viklet rundt boksen din i perspektivvisning. Ikke glem å sette uskarphetverdien til 0,01 for å få et skarpt gjengitt bilde.
Truffet Render...
Voila! Designet snur seg pent rundt boksen din. Gå videre og lagre denne filen som en png eller tif. Tid til å endre bakgrunnsfargen og krydre opp ting ...
Det er to måter å endre bakgrunnsfarge. Enten kan du endre fargen på materialet du har tildelt VRayPlane, eller du kan endre fargen i Photoshop. Jeg skal vise deg hvordan du gjør dette i Photoshop, fordi det er mye lettere å endre fargen uten å gjenopprette scenen din.
La oss gå videre. Høyreklikk på VrayPlane og klikk "Hide Selected".
Vi må gjemme backgound slik at det ikke vises i gjengivelsen. Truffet Render og klikk på alpha-ikonet som vist under i skjermbildet. Lagre bildet som en .png, og vi er ferdige her.
Tid til å gå videre til din beste venn, Photoshop.
Med alfakanalen kan vi lage en maske og isolere bakgrunnen. Ta alfafilen du nettopp lagret og åpne den i Photoshop. Gå til kanaler og velg (CMD + A) alfakanalen nederst. Kopier det til utklippstavlen.
Åpne opp ditt gjengitte bilde som du tidligere lagret. Igjen, gå til kanalvinduet og lim inn alfakanalen du nettopp har kopiert. Denne gangen må vi velge den faktiske masken, så hold nede CMD og klikk på masken.
Kontroller at masken er valgt. Åpne lagvinduet. Holder ned CMD nøkkel, venstre klikk på Legg til lagmaske som vist nedenfor. Flyet skal være pent isolert fra bakgrunnen.
Fjerner bakgrunnen og isolerer flyet. Lag et nytt lag og fyll det med hvilken som helst farge du liker. Så lenge det ser bra ut. mkay.
Nå skal vi legge til skygger. Du kan beholde skyggen som var i bildet, men la oss bruke Photoshops skygger denne gangen. CMD + klikk på masken din igjen og opprett et nytt lag. Fyll utvalget med en mørk farge som samsvarer med bakgrunnen. Åpne lagstiler og lek med dropshadow-effekten til du finner noe du liker.
Pass på at vinkelen på skyggene ser riktig ut. God jobb, vi er ferdige! En mer behagelig måte å se på en 2D-design, tror du ikke?
Dette er hva du kan ende opp med:
I denne opplæringen har vi gått gjennom hvordan du tar en 2D-design og forvandler den til en 3D-mockup med perspektiv. Jeg gjetter at mange av dere var litt skremt av hele 3D-tingen, men det er ganske grunnleggende når du får tak i det.
Noen interessante neste skritt ville være å prøve å eksperimentere med forskjellige flystørrelser, ved hjelp av forskjellige kameravinkler og også endre kameraobjektivet for å oppnå en forvrengning av perspektivet. Du kan se hele designen på Behance-porteføljen, og også sjekke ut TriplAgent mobilapp. Takk for at du følger med!
Har du ikke tid eller ferdigheter til å jobbe Photoshop? Ikke la det stoppe deg.
Placeit er en mockup generator; et online verktøy som lar deg legge inn dine egne design (være de UI-design, logoer, andre merkevarer) til fotorealistiske scener. Definitivt et raskt og enkelt alternativ til Photoshop.
Kattunge ved siden av en iPhone X Mockup som ligger over en bok på en jenter seng
iPhone X-mal som ligger på toppen av et utstillingsbord
Accentsconagua