Share
I denna handledning kommer jag att visa dig hur du tar din platta design (som i tvådimensionell, inte platt som i den nuvarande designtendensen) och lägga till lite liv genom att mocka upp det på ett 3D-plan i perspektiv. Syftet med detta är att presentera din design på ett mer dynamiskt sätt, vilket ger ett djupare och visuellt överklagande. Det kan vara ett mycket effektivt sätt att presentera visuella bilder för kunderna.
Det finns ett par sätt att uppnå denna effekt, till exempel att använda Photoshops egna 3D-verktyg och skapa 3D-lager. Jag är dock bekvämare med korrekt 3D-programvara som 3ds Max eftersom det ger mycket mer kontroll över kameran, så att du kan rotera runt 3D-planet med större kontroll över belysningen och skuggningen. Ursprungligen kan det se mer komplicerat, men när du har gjort det här kommer du senare att kunna mock ditt arbete på några minuter.
Om du är ny på 3D har vi en uppsjö av handledning för att komma igång ... Principerna som visas här är applikationsagnostiska; du kommer att kunna tillämpa dem på någon 3D-programvara där ute. Att följa med bör du veta din väg runt Photoshop och har åtminstone öppnat ett 3D-verktygsprogram tidigare.
Hur som helst, för denna handledning kommer jag att håna upp utformningen av vår senaste app som heter TriplAgent, som verkar sprida sig som en eldsvamp på de interwebs. Du kan se hela designen på min Behance-portfölj.
Öppna din 3D-applikation. Jag använder 3ds Max 2012, men som tidigare nämnts kan du använda nästan alla 3D-verktyg.
Jag använder Vray som huvudmotorer, eftersom den erbjuder realistisk belysning och skuggor. Se till att du slår på Indirekt belysning, men du kan också använda Maxs standard renderer och uppnå liknande resultat.
Använd liknande inställningar som i skärmdumparna.
Nu är det dags att skapa bakgrunden. Gå till Skapa> Under Standard Primitives välj VRayPlane. Ett plan visas som i skärmdumpen nedan. Dra bara det till sidan, det spelar ingen roll om var.
VRayPlane kommer att vara bakgrunden till din scen. Okej, låt oss skapa det faktiska planet där din design kommer att sitta. Återigen, gå till Skapa> Standard Primitives> Box. Under "parametrar" anger du måtten som anges nedan (detta är skärmstorleken för en iPhone 5).
Självklart kan du skriva in några dimensioner du gillar så länge som din design följer samma proportioner. Nu måste vi applicera en UV-karta, så att designen snubblar snyggt runt planetens hörn. Gå till "Ändra" i panelen till höger och välj UVW-kartläggning från modifierarlistan. Se till att "Planar" är markerat.
Tiden att applicera materialen, så öppna upp Materialredigerare i det övre högra hörnet av huvudverktygsfältet. Skapa två VRay-material, en för din bakgrund (VRay-planet) och en för din låda du just skapat. Drag och släpp materialet på varje föremål.
Låt oss göra en snabb återgivning. Klicka på Render Production (tekanna ikonen) ...
Kinda grå och naken, men det är en bra start. Bra jobb, tid att klä på en fin klänning. Vi måste tillämpa vår faktiska mockup-bild som ett material för 3D-objektet. Öppna materialredigeraren och klicka på materialet du tilldelade rutan.
Bläddra tills du ser kartläggningen, klicka sedan på Diffusera> Kartor> Standard> Bitmapp och navigera till mappen där du har sparat din design.
Notera: Min fil var en .png med dimensioner av 1136 x 640 pixlar.
Du kommer nu att se din fil lindad runt sfären i materialplatsen. Klicka på den rutiga ikonen och du kommer se designen som är omslagen runt din ruta i perspektivvy. Glöm inte att ställa in suddigt värde till 0,01 för att få en skarp bild av din bild.
Träffa Göra...
Voila! Designen snurras snyggt kring din låda. Fortsätt och spara den här filen som en png eller tif. Tid att ändra bakgrundsfärgen och krydda sakerna ...
Det finns två sätt att ändra bakgrundsfärgen. Antingen kan du ändra färgen på det material du tilldelade din VRayPlane eller du kan ändra färgen i Photoshop. Jag ska visa dig hur du gör det i Photoshop, eftersom det är mycket lättare att ändra färgen utan att återföra din scen.
Låt oss gå vidare. Högerklicka på din VrayPlane och klicka på "Hide Selected".
Vi måste dölja bakgrunden så att den inte visas i rendering. Träffa Göra och klicka på alpha-ikonen som visas nedan på skärmdumpen. Spara bilden som en .png och vi är färdiga här.
Tiden att gå vidare till din bästa vän, Photoshop.
Med alfakanalen kan vi skapa en mask och isolera bakgrunden. Ta den alfafil du just sparat och öppna den i Photoshop. Gå till kanaler och välj (CMD + A) alfakanalen längst ner. Kopiera det till urklippet.
Öppna upp din renderad bild som du tidigare sparade. Återgå till kanalfönstret och klistra in alfakanalen du bara kopierat. Den här gången måste vi välja den aktuella masken, så håll ner CMD och klicka på masken.
Kontrollera att masken är vald. Öppna lagerfönstret. Håller ner CMD nyckel, vänster klicka på Lägg till lagermask som sedd nedan. Flyet ska vara snyggt isolerat från bakgrunden.
Ta bort bakgrunden och isolera planet. Skapa ett nytt lager och fyll i det med vilken färg du vill. Så länge det ser bra ut. mkay.
Nu ska vi lägga till skuggor. Du kan behålla skuggan som var i bilden, men låt oss använda Photoshops skuggor den här gången. CMD + klicka på din mask igen och skapa ett nytt lager. Fyll markeringen med en mörk färg som matchar din bakgrund. Öppna lagerformat och spela runt med drop-shadow-effekten tills du hittar något du gillar.
Se till att skuggans vinkel ser rätt ut. Bra jobb, vi är klara! Ett mer tilltalande sätt att titta på en 2D-design, tycker du inte?
Det här kan du sluta med:
I denna handledning har vi gått igenom hur man tar en 2D-design och omvandlar den till en 3D-mockup med perspektiv. Jag gissar att många av er var lite skrämmade av hela 3D-saken, men det är verkligen ganska grundläggande när man hänger på det.
Några intressanta nästa steg skulle vara att försöka experimentera med olika planstorlekar, använda olika kameravinklar och även ändra kameralinsen för att uppnå en snedvridning av perspektivet. Du kan se hela designen på min Behance-portfölj, och kolla även TriplAgent mobilapp. Tack för att du följer med!
Har du inte tid eller färdigheter att arbeta med Photoshop? Låt inte det stoppa dig.
Placeit är en mockupgenerator; ett onlineverktyg som låter dig bädda in egna konstruktioner (de är UI-mönster, logotyper, andra varumärkesvaror) till fotorealistiska scener. Definitivt ett snabbt och enkelt alternativ till Photoshop.
Kattungen bredvid en iPhone X Mockup som ligger över en bok på en tjejbädd
iPhone X-mall som ligger ovanpå ett vintagebord
Accentsconagua