Share
In deze zelfstudie laat ik je een heel eenvoudig effect zien dat samen met goede fotografie kan worden gebruikt om prachtige resultaten te maken. We gaan een kamer samenstellen met foto's van objecten. Deze ruimte kan vervolgens in Flash worden gebruikt om een website te bouwen of gewoon als een afbeelding.
Ik produceerde deze compositie ongeveer anderhalf jaar geleden. Het werd gebruikt in de FlashDen Showroom-website die ik bouwde als een marketing- en promotietool voor een van de zustersites van Psdtuts +, FlashDen.net.
In deze tutorial sta ik tegenover de eerste kamer. In het vervolg doe ik de derde kamer. In het laatste deel van deze serie produceer ik een geheel nieuwe ruimte met meer gedetailleerde stappen dan de eerste twee tutorials, want voor deze eerste twee ga ik over oud werk in plaats van iets helemaal opnieuw te maken.
Dit effect berust in feite op veel goede foto's. Helaas betekent dit dat deze zelfstudie meer een algemene leidraad is dan om u stap voor stap expliciet te volgen. Tenzij je natuurlijk alle stockfoto's wilt kopen en kopen die je nodig hebt. Je kunt ze allemaal krijgen van iStockPhoto, hoewel ik niet de exacte URL's heb zoals ik ze lang geleden heb gekocht en mijn account daar letterlijk duizenden bestanden heeft gedownload :-) In elk geval is hier een mini-afbeelding van allemaal!
Allereerst is hier het eindproduct. Nadat ik deze mockup in Photoshop had gemaakt, maakte ik de site vervolgens opnieuw in Flash met animaties en knoppen, enzovoort. Je kunt de Flash Showroom-site hier bekijken.
U kunt ook op de afbeelding hieronder klikken om de volledige weergave te zien.
Het uiteindelijke beeld is nu 1024x768. Het eerste dat ik deed was de achtergrondafbeelding plaatsen. Helaas voor mij zijn het de verkeerde dimensies (zoals je hieronder kunt zien). Ik zou het kunnen vergroten en bijsnijden, maar dan zou ik wat van het leuke detail dat ik later zou willen gebruiken kwijtraken, dus in plaats daarvan heb ik ervoor gekozen om de foto uit te breiden.
Gelukkig is de klus niet te moeilijk, omdat het bovenste gedeelte van de foto vrij eenvoudig is. De kunst is om gradiënten van kleuren te gebruiken die uit de huidige achtergrond zijn gekozen om de foto uit te breiden.
Ik heb eerst het gereedschap Pen gebruikt om een vorm te tekenen (getoond) die ik met mijn verloop wilde opvullen. Merk op dat de vorm een deel van het gebied van de daadwerkelijke foto bedekt. Dit is zo dat ik nadien een zachte gum kan gebruiken om de randen te wissen en deze sierlijk te laten verdwijnen. Ik pakte vervolgens een donkere tint aan de rechterkant en een lichte schaduw van links en tekende een lineair verloop in een nieuwe laag boven de foto. Dit werd gevolgd door zachtjes wissen langs de onderkant om te mengen.
Ik herhaal dezelfde stap maar aan de linkerkant met het lichtgrijze gebied. Nogmaals, de vorm die ik over de foto teken is groter dan nodig, zodat ik kan wissen voor een vloeiende overgang.
Ten slotte leek de schaduw aan de rechterkant een beetje ongelijk, dus ik heb er een derde laag bovenop geplaatst en de Pen Tool heeft een vorm rond de sofa getraceerd en een donker-tot-licht verloop gegeven om een consistentere schaduw te krijgen, dus weg met de laatste sporen van waar ik de afbeeldingen heb gemengd.
Nu de achtergrond gereed is, kunnen we beginnen met het plaatsen van objecten. Voordat we dat doen, moet ik een paar woorden zeggen over het type afbeeldingen dat je wilt kiezen:
Hoe dan ook, dus gebruik je voor elk object gewoon het gereedschap Pen, volg het object en klik met de rechtermuisknop op het canvas, selecteer Selectie maken in het menu dat verschijnt en kopieer het object vervolgens uit de achtergrond en plak het op je belangrijkste canvas. Er zijn andere manieren om voorwerpen te extraheren: je zou het Toverstaf-gereedschap bijvoorbeeld kunnen gebruiken wanneer het voorwerp op een plat wit is, maar ik vind het veel schoner en niet zo veel moeilijker om het met de Pen-tool te doen. Als je het wandgereedschap wel gebruikt, zorg er dan voor dat je een grotere foto gebruikt en schaal dan naar beneden om alle waardeloze pixeleffecten te verbergen.
Je zou ook de Filter> Extract Tool kunnen gebruiken, maar dat is niet veel eenvoudiger en het resultaat is niet altijd even goed.
Hoe dan ook, dus hier heb ik de tv op mijn achtergrond geplaatst. Omdat er schaduw is aan de rechterkant van de ruimte en deze is lichter aan de linkerkant, heb ik ook de tv bekeken met het gereedschap Branden om het iets meer overeen te laten komen. Licht en schaduw zijn erg belangrijk bij het maken van objecten die passen bij hun omgeving. In deze specifieke tutorial zullen we daar niet veel van doen, maar in het derde deel van deze serie zullen we dat wel doen.
In elk geval ziet de tv er al goed uit, maar in werkelijkheid zou er een schaduw op de muur onder en aan de rechterkant moeten werpen. Momenteel lijkt het alsof het alleen maar in de ruimte zweeft, dus laten we dat het volgende oplossen.
Er zijn veel manieren om schaduwen te maken. In dit geval heb ik zojuist een laag onder de tv gemaakt en vervolgens met een zachte borstel en zwart geselecteerd, ik heb naar beneden en naar rechts geschilderd. (Trouwens, ik weet niet zeker waarom ik die tools en geschiedenispaletten in de screenshot heb gelaten, dat is wat luie tutorial-making daar :-)
Dus zoals je kunt zien, is de schaduw wat je zou verwachten als er licht van boven en van links zou komen, wat ongeveer overeenkomt met de achtergrondafbeelding waar we in plakken.
Daarna plaatste ik een afbeelding op de televisie. Ik plaatste het in een nieuwe laag en gaf het vervolgens een Inner Shadow-laagstijl met een afstand van 0. Dit is zodat er een beetje schaduw langs de randen is en de afbeelding lijkt op een inzet. Dit is een beetje een snel en vuil effect. Echt als je de tv precies goed wilde doen, zou ik voorstellen om je televisie daadwerkelijk om te schakelen en dan te observeren wat er aan de randen gebeurt en wat voor soort hoogtepunten het glas / scherm heeft van het licht. Maar in dit geval is de tv klein en wanneer ik hem naar Flash breng, plaats ik hier video's, dus het is niet zo belangrijk.
Vervolgens willen we de laptop plaatsen. Net als bij de tv knip ik de laptop en muis uit hun respectieve afbeeldingen. Ik heb ze teruggehaald met behulp van het gereedschap Transformeren (Ctrl + T) en ze op de juiste manier geplaatst. Ik heb toen een muiskoord getrokken (zie de volgende stap).
Om de laptop eruit te laten zien alsof hij er echt is, heb ik een muissnoer getrokken dat over het kussen ding drapeert en op de vloer valt. Dit zorgt ervoor dat de objecten eruit zien alsof ze echt interactie hebben met hun achtergrond en niet alleen maar rondzweven.
Ik deed dit door mijn Pen-tool te grijpen en me voor te stellen waar het muissnoer zou gaan als het er echt was. Het leek erop dat het langs het kussen zou gaan, naar beneden zou vallen en dan op de vloer (niet echt van de raketwetenschap, maar ik dacht dat ik het toch zou spellen!). Toen ik eenmaal het pad had getrokken, klikte ik met de rechtermuisknop en geselecteerde Stroke Path en gebruikte een 2px harde borstel met lichtgrijze kleuren.
Nadat het snoer was getrokken, gebruikte ik het gereedschap Branden om een beetje schaduw op het snoer te schrobben om het er realistischer uit te laten zien (aangezien in werkelijkheid alles licht en schaduw heeft en geen enkel object in werkelijkheid alleen maar een platte kleur heeft).
Vervolgens moeten we een schaduw toevoegen onder de laptop en de muis. De schaduw van de muis is vrij eenvoudig - het is gewoon een beetje wazige duisternis ingesteld op Vermenigvuldigen over het tapijt. Voor de laptop wilt u dat de schaduw langs de rand van het kussen valt.
In de onderstaande schermafbeelding heb ik de laptop opgetild zodat je de schaduw kunt zien die ik heb getekend. Nogmaals, ik heb het net gemaakt met een zachte borstel en donkere kleuren, en vervolgens zet ik de laag op Vermenigvuldigen zodat het beter aansluit op de onderstaande foto. Omdat het kussen een rand heeft waar de schaduw over de rand gaat (op het meest rechtse gedeelte), heb ik de schaduwhoek altijd iets veranderd en ga ik het kussen naar beneden.
Met de luidsprekers aan de rechterkant heb ik eigenlijk hetzelfde gedaan als met de laptop - dus maak een laag onder de foto, teken in donkere kleuren de vorm onder het object en stel deze in op Vermenigvuldigen.
Uitzoeken wat voor soort schaduw een object gaat maken, is gewoon een kwestie van observeren van objecten in het echte leven en kijken hoe ze schaduwen werpen met verschillende lichten. Voor dit type beeld hoeft de schaduw niet perfect te zijn, hij moet gewoon behoorlijk goed zijn. Echt, als je goed kijkt, zul je beginnen in te zien dat de hoogtepunten en schaduwen soms niet helemaal logisch zijn (bijvoorbeeld, let op met de luidsprekers in de onderstaande schermafbeelding, de linkerkant van de rechter luidspreker is donker en andersom voor de linkerkant spreker, terwijl in feite, als het licht aan de linkerkant is, dit het tegenovergestelde is van wat er zou moeten gebeuren). Maar voor een afbeelding als deze, waarbij je alleen het realisme wilt benaderen, is het effect de slag en dwazen het oog.
Voor de klok in de linkerbovenhoek heb ik er eigenlijk een getekend met Photoshop - merk op dat het maar een aantal rechthoeken in elkaar zijn met behulp van verlopen en een beetje een hoogtepunt in de linkerbovenhoek. Ik zal niet te veel over deze stap praten, omdat deze tutorial over comping dingen samen gaat die geen nep klokken maken :-) Het volstaat om te zeggen, ik kon de juiste klok niet vinden en dit deed de slag.
Ten slotte heb ik hier en daar veel tekst en knoppen en wat-heb-je geplaatst en de look is voltooid.
Zoals ik in het begin al zei, is er niet zoveel moeite in een dergelijk effect vanuit het oogpunt van pure technische vaardigheden van Photoshop. Het gaat meer om het ontwikkelen van je oog om te herkennen hoe dingen bij elkaar moeten passen, het kiezen van een goede set foto's om samen te voegen en het toevoegen van schaduwen en hoogtepunten om alles samen te brengen.
Het uiteindelijke effect met de juiste foto's kan erg leuk zijn en is vooral goed voor gebruik in Flash, waar je objecten kunt laten binnenvliegen of materialiseren.
Je kunt de Flash Showroom-site hier bekijken of je kunt ook op de afbeelding hieronder klikken om de volledige weergave te zien.
In het volgende deel van deze serie gaan we op een vergelijkbare manier door een andere kamer. Er valt waarschijnlijk niet veel meer toe te voegen, maar het is nog steeds interessant om het proces opnieuw te zien. In het laatste deel zal ik vanuit het niets een nieuwe kamer samenstellen en proberen om alle kleine details van het proces te screenshot. Dus tot de volgende keer mensen!
Opmerking van de uitgever: Deze tutorial dateert van vóór de lancering van onze PLUS-lidmaatschappen. Helaas is er geen begeleidend PSD-bestand.
Accentsconagua