Share
I den här handledningen visar jag dig en väldigt enkel effekt som tillsammans med bra fotografi kan användas för att göra underbara resultat. Vi ska skriva ett rum med foton på objekt. Detta rum kan sedan användas i Flash för att bygga en webbplats eller helt enkelt som en grafik.
Jag producerade faktiskt denna komposition om ett och ett halvt år sedan. Den användes på webbplatsen FlashDen Showroom som jag byggde som ett marknadsförings- och marknadsföringsverktyg för en av Psdtuts + s systerwebbplatser, FlashDen.net.
I den här handledningen kommer jag att bli kön på det första rummet. I uppföljaren ska jag göra det tredje rummet. I den sista delen av denna serie ska jag producera ett helt nytt rum med mer detaljerade steg än de två första handledningarna, för för de första två går jag över gammalt arbete istället för att göra något från början.
Denna effekt bygger i grunden på mycket bra bilder. Tyvärr betyder det att denna handledning är mer en allmän guide än för dig att uttryckligen följa steg för steg. Om du självklart inte tycker om att gå och köpa alla lagerfoton måste du göra det. Du kan få dem alla från iStockPhoto, men jag har inte de exakta webbadresserna som jag köpte dem för länge sedan och mitt konto har bokstavligen tusentals filer hämtat :-) I alla fall här är en mini bild av dem alla!
Först av allt, här är den färdiga produkten. Efter att jag skapat denna mockup i Photoshop återskapade jag webbplatsen i Flash med animeringar och knappar och så vidare. Du kan se webbplatsen för Flash Showroom här.
Du kan också klicka på bilden nedan för att se hela vyn.
Nu är den slutliga bilden 1024x768. Det första jag gjorde var att placera huvudbakgrundsbilden. Tyvärr för mig är det felaktiga dimensioner (som du kan se nedan). Jag kunde förstora den och skörda, men då skulle jag förlora några av de snygga detaljer som jag vill använda senare, så jag valde istället att förlänga fotot.
Lyckligtvis är jobbet inte för hårt, eftersom det bästa området på fotot är ganska enkelt. Tricket är att använda gradienter av färger utvalda ur den aktuella bakgrunden för att förlänga fotot.
Jag använde först Penverktyget för att rita en form (visad) som jag ville fylla över med min gradient. Observera att formen täcker något av området för det faktiska fotot. Detta är så att efteråt kan jag använda en mjuk suddgummi för att radera kanterna och få den att blekna in i. Jag plockade sedan en mörk nyans från höger sida och en ljus nyans från vänster och drog en linjär gradient över i en ny skikt ovanför bilden. Detta följdes av en försiktig radering längs botten för att blanda.
Jag upprepar samma steg men på vänster sida med det ljusgråa området. Återigen, den form som jag ritar över fotot är större än nödvändigt så att jag kan radera tillbaka för en jämn blandning.
Slutligen såg skuggan till höger lite ojämn, så jag lade till ett tredje lager på toppen och med hjälp av Pen Tool spårade en form runt soffan och gav den en mörk till ljus gradient för att få en mer konsekvent skuggning göra bort med några sista spår av var jag blandade bilderna.
Nu när bakgrunden är klar kan vi börja placera objekt. Innan vi gör det, borde jag säga några ord om vilken typ av bilder du vill välja:
Hur som helst, så för varje objekt använder du bara Penverktyget, spårar runt objektet och högerklickar sedan på duken, välj Gör markering i menyn som visas och kopierar sedan objektet ur bakgrunden och klistrar in det på din viktigaste duk. Det finns andra sätt att extrahera objekt: du kan använda Magic Wand Tool, till exempel när objektet är på plattvitt, men jag tycker att det är mycket renare och inte så mycket svårare att göra med Pen Tool. Om du använder Wand Tool, se till att du använder ett större foto och sedan skala ner för att dölja eventuella skarpa pixeleringseffekter.
Du kan också använda filteret> extraheringsverktyget, men det är inte mycket lättare och resultatet är inte alltid lika bra.
Hur som helst, så här har jag lagt TV: n på min bakgrund. Eftersom det finns skugga på höger sida av rummet och det är lättare till vänster, har jag också gått över TV: n med Burn-verktyget för att få det att matcha lite mer. Ljus och skugga är ganska viktiga för att objekt ska matcha sin miljö. I denna speciella handledning kommer vi inte att göra mycket av det, men vi kommer i den tredje delen av denna serie.
I alla fall ser TV: n redan bra ut, men det borde vara en skugga på väggen under och till höger. För närvarande ser det ut som att det bara flyter i rymden, så låt oss fixa det där nästa.
Det finns många sätt att skapa skuggor. I det här fallet skapade jag bara ett lager under TV: n och sedan med en mjuk pensel och svart vald, jag målade ner och till höger. (Förresten är jag inte säker på varför jag lämnade de här verktygen och historikpaletten på skärmdumpen, det är lite lat handledning där :-)
Så som du kan se är skuggan vad du kan förvänta dig om ljus kommer från toppen och vänster, vilket är en slags vad som matchar bakgrundsbilden vi klistrar in i.
Därefter lade jag en bild på tv: n. Jag lade den i ett nytt lager och gav det sedan en skjuvslagsstil med en avstånd på 0. Det här är så att det finns lite skugga längs kanterna och bilden ser ut som den är insats. Detta är lite av en snabb och smutsig effekt. Verkligen om du ville göra TVen precis, skulle jag föreslå att du faktiskt byter tv och sedan observerar vad som händer vid kanterna och vilken typ av höjdpunkter glaset / skärmen har från ljuset. Men i det här fallet är TV: n liten och när jag tar den till Flash lägger jag videor här så det är inte så viktigt.
Nästa vill vi placera den bärbara datorn. Precis som med TV: n klippte jag ut den bärbara datorn och musen från sina respektive bilder. Jag krympte dem ner med hjälp av Transform Tool (Ctrl + T) och placerade dem på lämpligt sätt. Jag drog sedan en muskabel (se nästa steg).
För att få den bärbara datorn att se ut som det verkligen är där, ritade jag en muskabel som draperade över puddsaken och ner på golvet. Det gör att föremålen ser ut som om de verkligen interagerar med sin bakgrund och inte bara flyter om.
Jag gjorde detta genom att ta tag i mitt Pen Tool och föreställa mig var muskabeln skulle gå om det verkligen var där. Det såg ut som om det skulle gå längs kudden, falla ner och sedan längs golvet (inte riktigt raketvetenskap, men jag trodde att jag skulle stava ut det ändå!) Då jag en gång hade ritat banan högerklickade jag och utvalda Stroke Path och använde en 2px hård borste med ljusgrå färg.
När sladden drogs, använde jag bränningsverktyget för att borsta lite skugga på sladden för att få det att se mer realistiskt ut (eftersom i verkligheten allt har bitar av ljus och skugga och inget föremål är egentligen bara en plattfärg).
Därefter måste vi lägga till en skugga under den bärbara datorn och musen. Musens skugga är ganska okomplicerad - det är bara lite av suddigt mörker inställt på Multiplicera över mattan. För den bärbara datorn vill du att skuggan ska gå ner i kudden.
I skärmdumpen nedan har jag lyft den bärbara datorn upp så att du kan se skuggan jag har dragit in ordentligt. Återigen gjorde jag det bara med en mjuk borste och en mörk färg, sätt sedan skiktet på Multiplicera så det smälter bättre med bilden nedan. Eftersom kudden har en kant där skuggan går över kanten (längst till höger), har jag gjort skuggbyte vinkeln någonsin så lätt och gå ner i kudden.
Med högtalarna på höger sida har jag i grund och botten gjort samma sak som med den bärbara datorn - dvs skapa ett lager under fotot, dra i en mörk färg formen under objektet och ställ den till Multiplicera.
Att bestämma vilken sorts skugga ett objekt kommer att göra är bara att observera objekt i det verkliga livet och titta på hur de kastar skuggor med olika ljus. För denna typ av bild behöver skuggan inte vara perfekt, det behöver bara vara ganska bra. Verkligen, om du tittar noga så börjar du se att ibland är höjdpunkterna och skuggorna inte riktigt givliga (till exempel, märka med högtalarna i skärmbilden nedan, höger högtalars vänstra sida är mörkt och vice versa till vänster högtalare, när faktiskt om ljuset är till vänster är det motsatsen till vad som ska hända). Men för en bild som denna där du bara vill approximera realismen, gör effekten trick och lurar ögat.
För klockan längst upp till vänster drog jag faktiskt bara en upp med Photoshop - kom ihåg att det bara är en massa rektanglar inuti varandra med hjälp av gradienter och lite av en höjdpunkt längst upp till vänster. Jag kommer inte att prata om detta steg för mycket, eftersom denna handledning handlar om komplicerade saker tillsammans, men inte gör falska klockor :-) Det är tillräckligt att säga att jag inte kunde hitta rätt klocka och det gjorde tricket.
Slutligen lade jag massor av text här och där och knappar och vad-du-du och utseendet är klart.
Som jag sa i början är det inte så mycket svårt med en sådan effekt utifrån rena Photoshop tekniska förmåga. Det handlar om att utveckla ditt öga för att känna igen hur sakerna ska passa ihop, välja en bra uppsättning bilder för att kompa-sera och lägga till skuggor och höjdpunkter för att sammanföra allt.
Den slutgiltiga effekten med rätt foton kan vara riktigt bra och är särskilt bra för användning i Flash där du kan få objekt att flyga in eller materialisera.
Du kan se Flash Showroom-webbplatsen här eller du kan också klicka på bilden nedan för att se hela vyn.
I nästa del av denna serie går vi igenom ett annat rum på samma sätt som det här. Det är nog inte så mycket mer att lägga till, men det är fortfarande intressant att se processen igen. I sista delen lägger jag ett annat rum från början och försöker skärmbilda alla små detaljer i processen. Så tills nästa gång folk!
Redaktörer Anm: Denna handledning förutsätter lanseringen av PLUS-medlemskapet. Tyvärr finns det ingen medföljande PSD-fil.
Accentsconagua