Share
In deze tutorial laat ik je zien hoe je je platte ontwerp (zoals in tweedimensionaal, niet vlak zoals in de huidige ontwerptrend) en voeg wat leven toe door het in perspectief op een 3D-vlak te bespotten. Het doel hiervan is om uw ontwerp op een meer dynamische manier te presenteren, waardoor het meer diepte en visuele aantrekkingskracht krijgt. Het kan een zeer effectieve manier zijn om visuals aan klanten te presenteren.
Er zijn een aantal manieren om dit effect te bereiken, zoals het gebruik van de eigen 3D-gereedschappen van Photoshop en het maken van 3D-lagen. Ik ben echter meer op mijn gemak bij het gebruik van de juiste 3D-software, zoals 3ds Max, omdat het veel meer controle over de camera biedt, zodat u rond het 3D-vlak kunt roteren met meer controle over de verlichting en schaduwen. In eerste instantie lijkt het misschien ingewikkelder, maar als je dit eenmaal hebt gedaan, kun je later je werk in een paar minuten bespotten..
Als u een nieuwe gebruiker van 3D bent, hebben we een overvloed aan zelfstudies om u op weg te helpen ... De hier getoonde principes zijn applicatie-agnostisch; je kunt ze toepassen op elke 3D-software die er is. Om mee te gaan, moet je je weg weten in Photoshop en op zijn minst een 3D-toolprogramma hebben geopend.
Anyways, voor deze tutorial bespreek ik het ontwerp van onze nieuwste app TriplAgent, die zich als een lopend vuurtje op die interwebs lijkt te verspreiden. Je kunt het hele ontwerp in mijn Behance-portfolio zien.
Open uw 3D-toepassing. Ik gebruik 3ds Max 2012, maar zoals eerder vermeld, kunt u vrijwel elke 3D-tool gebruiken.
Ik gebruik Vray als de belangrijkste rendering-engine omdat het realistische belichting en schaduwen biedt. Zorg ervoor dat je aanzet Indirecte verlichting, maar u kunt ook de standaard renderer van Max gebruiken en vergelijkbare resultaten behalen.
Pas soortgelijke instellingen toe als die in de schermafbeeldingen.
Nu is het tijd om de achtergrond te creëren. Ga naar Maak> Kies onder Standaardprimitieven voor VRayPlane. Er verschijnt een vlak zoals in de onderstaande schermafbeelding. Sleep het gewoon naar de zijkant, het maakt eigenlijk niet uit waar.
De VRayPlane is de achtergrond van je scène. Oké, laten we het vliegtuig maken waar je ontwerp zal zitten. Nogmaals, ga naar Maak> Standaardprimitieven> Box. Voer onder "parameters" de afmetingen in zoals hieronder aangegeven (dit is de schermgrootte voor een iPhone 5).
Vanzelfsprekend kunt u elke gewenste afmeting invoeren, zolang uw ontwerp maar dezelfde verhoudingen aanhoudt. Nu moeten we een UV-kaart toepassen, zodat het ontwerp mooi rond de hoeken van het vlak wordt gewikkeld. Ga naar "Wijzigen" in het paneel rechts en kies UVW-toewijzing vanuit de modificatielijst. Zorg ervoor dat "Planar" is geselecteerd.
Tijd om de materialen toe te passen, dus open de Materiaal-editor in de rechterbovenhoek van de hoofdknoppenbalk. Maak twee VRay-materialen, één voor je achtergrond (het VRay-vlak) en één voor je box die je zojuist hebt gemaakt. Sleep het materiaal naar elk object.
Laten we een snelle weergave uitvoeren. Klik op de render-productie (het theepot-pictogram) ...
Een beetje grijs en naakt, maar het is een goed begin. Goed gedaan, tijd om een leuke jurk aan te trekken. We moeten onze werkelijke mockup-afbeelding toepassen als een materiaal voor het 3D-object. Open de materiaaleditor en klik op het materiaal dat u aan de doos hebt toegewezen.
Blader naar beneden totdat je de uitrol van Maps ziet en klik vervolgens op Diffuus> Kaarten> Standaard> Bitmap en navigeer naar de map waar je je ontwerp hebt opgeslagen.
Notitie: Mijn bestand was een .png met afmetingen van 1136 x 640 pixels.
U ziet nu dat uw dossier rond de bol in de materiaalsleuf is gewikkeld. Klik op het geruite pictogram en u ziet het ontwerp rond uw doos gewikkeld in perspectief. Vergeet niet om de blur-waarde in te stellen op 0,01 om een heldere weergave van uw afbeelding te krijgen.
Raken geven...
Voila! Het ontwerp wikkelt zich mooi om je doos. Ga je gang en sla dit bestand op als een png of tif. Tijd om de achtergrondkleur te veranderen en dingen op te fleuren ...
Er zijn twee manieren om de achtergrondkleur te wijzigen. U kunt de kleur van het materiaal dat u aan uw VRayPlane hebt toegewezen, wijzigen of u kunt de kleur in Photoshop wijzigen. Ik zal je laten zien hoe je dit in Photoshop doet, omdat het veel gemakkelijker is om de kleur te veranderen zonder je scène opnieuw te renderen.
Laten we verder gaan. Klik met de rechtermuisknop op uw VrayPlane en klik op "Geselecteerde verbergen".
We moeten de achtergrondkleur verbergen zodat deze niet in de weergave verschijnt. Raken geven en klik op het alfapictogram zoals hieronder te zien is in de schermafbeelding. Sla de afbeelding op als een .png en we zijn hier klaar.
Tijd om verder te gaan naar je beste vriend, Photoshop.
Met het alfakanaal kunnen we een masker maken en de achtergrond isoleren. Neem het alfabestand dat u zojuist hebt opgeslagen en open het in Photoshop. Ga naar kanalen en selecteer (CMD + A) het alfakanaal aan de onderkant. Kopieer het naar het klembord.
Open uw weergegeven afbeelding die u eerder hebt opgeslagen. Nogmaals, ga naar het kanaalvenster en plak het alfakanaal dat je zojuist hebt gekopieerd. Deze keer moeten we het daadwerkelijke masker selecteren, dus houd CMD ingedrukt en klik op het masker.
Zorg ervoor dat het masker is geselecteerd. Open het lagenvenster. De toets ingedrukt houden CMD toets, klik met de linkermuisknop op Breng een laag masker aan zoals hieronder te zien. Het vliegtuig moet goed geïsoleerd zijn van de achtergrond.
De achtergrond verwijderen en het vlak isoleren. Maak een nieuwe laag en vul deze met elke gewenste kleur. Zolang het er goed uitziet. mkay.
Nu gaan we schaduwen toevoegen. Je zou de schaduw in de afbeelding kunnen behouden, maar laten we deze keer de schaduwen van Photoshop gebruiken. CMD + klik nogmaals op je masker en maak een nieuwe laag. Vul de selectie met een donkere kleur die overeenkomt met je achtergrond. Open Laagstijlen en speel rond met het slagschaduweffect tot je iets vindt dat je leuk vindt.
Zorg ervoor dat de hoek van de schaduwen er goed uitziet. Goed gedaan, we zijn klaar! Een aangenamere manier om naar een 2D-ontwerp te kijken, vind je niet?
Dit is wat je zou kunnen eindigen met:
In deze zelfstudie hebben we doorgenomen hoe je een 2D-ontwerp kunt nemen en het kunt transformeren in een 3D-mockup met perspectief. Ik vermoed dat velen van jullie een beetje geïntimideerd waren door het hele 3D-ding, maar het is echt heel basic als je het eenmaal onder de knie hebt.
Enkele interessante volgende stappen zijn om te experimenteren met verschillende vlakafmetingen, verschillende camerahoeken te gebruiken en ook de cameralens te veranderen om een vervorming van het perspectief te bereiken. Je kunt het hele ontwerp in mijn Behance-portfolio bekijken en ook de mobiele TriplAgent-app bekijken. Bedankt voor het volgende!
Heb je geen tijd of vaardigheden om in Photoshop te werken? Laat dat je niet stoppen.
Placeit is een mockup-generator; een online tool waarmee u uw eigen ontwerpen (of het nu gaat om UI-ontwerpen, logo's of andere brandingactiva) kunt integreren in fotorealistische scènes. Zeker een snel en eenvoudig alternatief voor Photoshop.
Kitten naast een iPhone X Mockup die over een boek op een meisjesbed ligt
iPhone X-sjabloon liggend op de top van een vintage tafel
Accentsconagua