Share
I denne opplæringen vil jeg vise deg en veldig enkel effekt som sammen med god fotografering kan brukes til å lage flotte resultater. Vi skal komponere et rom med bilder av objekter. Dette rommet kan da brukes i Flash for å bygge et nettsted eller bare som en grafikk.
Jeg produserte faktisk denne sammensetningen om et og et halvt år siden. Det ble brukt på FlashDen Showroom-nettsiden som jeg bygde som et markedsføringsverktøy for en av Psdtuts + s søstersider, FlashDen.net.
I denne opplæringen vil jeg være sammen med det første rommet. I oppfølgeren skal jeg gjøre det tredje rommet. I den siste delen av denne serien skal jeg produsere et helt nytt rom med flere detaljer i detalj enn de to første opplæringsprogrammene, for for de to første går jeg over gammelt arbeid i stedet for å lage noe fra grunnen av.
Denne effekten baserer seg i utgangspunktet på mange gode bilder. Dessverre betyr det at denne opplæringen er mer en generell veiledning enn at du eksplisitt følger trinn for trinn. Med mindre du har lyst til å gå og kjøpe alle lagerfotografiene, må du gjøre det. Du kan få dem alle fra iStockPhoto, selv om jeg ikke har de eksakte nettadressene som jeg kjøpte dem lenge siden, og kontoen min har bokstavelig talt tusenvis av filer lastet ned :-) I alle fall er det et mini bilde av dem alle!
Først av alt, her er det ferdige produktet. Etter at jeg produserte denne mockupen i Photoshop, gjenskapte jeg siden i Flash med animasjoner og knapper og så videre. Du kan se Flash Showroom-siden her.
Du kan også klikke på bildet nedenfor for å se hele visningen.
Nå er det endelige bildet 1024x768. Det første jeg gjorde var å plassere hovedbakgrunnsbildet. Dessverre for meg er det feil dimensjoner (som du kan se nedenfor). Jeg kunne forstørre det og beskjære, men da vil jeg miste noen av de fine detaljene som jeg ønsker å bruke senere, så i stedet valgte jeg å forlenge bildet.
Heldigvis er jobben ikke for vanskelig fordi det øverste området på bildet er ganske enkelt. Trikset er å bruke gradienter av farger plukket ut av gjeldende bakgrunn for å utvide bildet.
Jeg brukte først pennverktøyet til å tegne en form (vist) som jeg ønsket å fylle over med min gradient. Legg merke til at formen dekker noe av området til selve bildet. Dette er slik at etterpå kan jeg bruke en myk viskelær for å slette kantene og få den til å forsvinne grasiøst. Jeg plukket da en mørk nyanse fra høyre side og en lys nyanse fra venstre og tegnet en lineær gradient over i en ny lag over bildet. Dette ble etterfulgt av litt forsiktig sletning langs bunnen for å blande.
Jeg gjentar det samme trinnet, men på venstre side med det lysegrå området. Igjen, formen jeg tegner over bildet er større enn nødvendig, så jeg kan slette tilbake for en jevn blanding.
Til slutt så skyggen til høyre litt ujevn, så jeg la til et tredje lag på toppen, og ved hjelp av pennverktøyet trakk en form rundt sofaen og ga den en mørk-til-lys-gradient for å få en mer konsistent skygge gjøre unna med noen siste spor av hvor jeg blandet bildene.
Nå som bakgrunnen er klar, kan vi begynne å plassere objekter. Før vi gjør det, bør jeg si noen ord om typen bilder du vil velge:
Uansett, for hvert objekt, bruker du bare Pen-verktøyet, sporer rundt objektet, og høyreklikker deretter på lerretet, velg Lag valg fra menyen som vises, og kopier deretter objektet ut av bakgrunnen og lim det inn på ditt viktigste lerret. Det finnes andre måter å trekke ut gjenstander på: Du kan bruke Magic Wand Tool, for eksempel når objektet er på flat hvitt, men jeg synes det er mye renere og ikke så mye vanskeligere å gjøre med Pen Tool. Hvis du bruker Wand Tool, må du sørge for å bruke et større bilde og deretter skalere ned for å skjule noen dårlige pixelasjonseffekter.
Du kan også bruke Filter> Extract Tool, men det er ikke mye lettere, og resultatet er ikke alltid så bra.
Uansett, så her har jeg lagt TVen på min bakgrunn. Fordi det er skygge på høyre side av rommet og det er lettere til venstre, har jeg også gått over TVen med Burn-verktøyet for å få det til å passe litt mer. Lys og skygge er ganske viktig for å lage objekter som samsvarer med deres omgivelser. I denne spesielle opplæringen vil vi ikke gjøre mye av det, men vi kommer i den tredje delen av denne serien.
I alle fall ser TV-en allerede bra ut, men det burde være å skape en skygge på veggen under og til høyre. For øyeblikket ser det ut som om det bare flyter i rommet, så la oss fikse det neste.
Det er mange måter å skape skygger på. I dette tilfellet skapte jeg bare et lag under TV-en, og deretter med en myk børste og svart valgt, malte jeg meg ned og til høyre. (Forresten, jeg er ikke sikker på hvorfor jeg forlot disse verktøyene og historiepalettene i skjermbildet, det er noe lat tutorial-making der :-)
Så som du kan se, er skyggen det du forventer hvis lyset kommer fra toppen og til venstre, noe som er noe som samsvarer med bakgrunnsbildet vi limer inn i.
Deretter plasserte jeg et bilde på fjernsynet. Jeg plasserte den i et nytt lag og ga det en Inner Shadow lag stil med en Avstand på 0. Dette er slik at det er litt skygge langs kantene og bildet ser ut som det er innspill. Dette er litt av en rask og skitten effekt. Virkelig hvis du ville gjøre TVen akkurat, foreslår jeg faktisk å bytte fjernsyn og deretter observere hva som skjer ved kantene og hva slags høydepunkter glasset / skjermen har fra lyset. Men i dette tilfellet er TV-en liten, og når jeg tar den til Flash, plasserer jeg videoer her, så det er ikke så viktig.
Deretter ønsker vi å plassere den bærbare datamaskinen. Som med TV-en, kuttet jeg ut den bærbare datamaskinen og musen fra sine respektive bilder. Jeg krympet dem ned ved hjelp av Transform Tool (Ctrl + T) og plasserte dem på riktig måte. Jeg trakk en musekabel (se neste trinn).
For å få den bærbare datamaskinen til å se ut som det egentlig er der, trakk jeg en musekabel som draper over pute og ned til gulvet. Dette bidrar til at objektene ser ut som om de virkelig interagerer med bakgrunnen og ikke bare flyter om.
Jeg gjorde dette ved å ta tak i Pen-verktøyet mitt og fant ut hvor musekablene ville gå hvis det virkelig var der. Det så ut som at det ville gå langs pute, falle ned og deretter langs gulvet (egentlig ikke rakettvitenskap, men jeg trodde jeg ville stave det ut uansett!) Så en gang jeg hadde trukket banen, høyreklikket jeg og valgt Stroke Path og brukte en 2px hard børste med lys grå farger.
Når ledningen ble trukket, brukte jeg Burn Tool til å pusse litt skygge på ledningen for å gjøre det ser mer realistisk ut (siden i virkeligheten har alt biter av lys og skygge og ingen gjenstand er egentlig bare en flat farger).
Deretter må vi legge til en skygge under den bærbare datamaskinen og musen. Musens skygge er ganske grei - det er bare litt av uskarpt mørke satt til Multiply over teppet. For den bærbare datamaskinen vil du ha skyggen å gå ned i kanten av puten.
I skjermbildet nedenfor har jeg løftet den bærbare datamaskinen opp slik at du kan se skyggen jeg har trukket inn riktig. Nok en gang gjorde jeg det bare med en myk børste og mørke farger, så sett laget til Multiply slik at det passer bedre sammen med bildet under. Fordi puten har en kant der skyggen går over kanten (på den høyeste delen), har jeg gjort skyggeendringsvinkelen stadig så liten og gå ned i pute.
Med høyttalerne på høyre side har jeg i utgangspunktet gjort det samme som med den bærbare datamaskinen - det vil si lage et lag under bildet, tegne i mørke farger formen under objektet, og sett den til Multiply.
Å finne ut hva slags skygge et objekt skal gjøre er å bare observere objekter i det virkelige liv og se på hvordan de støtter skygger med forskjellige lys. For denne typen bilde trenger ikke skyggen å være perfekt, det trenger bare å være ganske bra. Virkelig, hvis du ser nøye ut, vil du begynne å se at noen ganger høydepunktene og skyggene ikke er helt fornuftige (for eksempel legge merke til høyttalerne i skjermbildet nedenfor, er høyre høyttalers venstre side mørk og omvendt til venstre høyttaler, når faktisk hvis lyset er til venstre, er dette det motsatte av hva som skal skje). Men for et slikt bilde hvor du bare vil omtrentliggjøre realisme, gjør effekten lure og lure øyet.
For klokken øverst til venstre skjønte jeg egentlig bare opp med Photoshop - legg merke til at det bare er en rektangler i hverandre ved hjelp av gradienter og litt av et høydepunkt øverst til venstre. Jeg vil ikke snakke om dette trinnet for mye, siden denne opplæringen handler om komprimering sammen, ikke tegning falske klokker :-) Det er nok å si at jeg ikke kunne finne riktig klokke, og dette gjorde kunsten.
Til slutt plasserte jeg masse tekst her og der og knapper og hva-har-du og utseendet er fullført.
Som jeg sa i begynnelsen, er det ikke så mye problemer med en effekt som dette fra standpunktet til ren Photoshop teknisk evne. Det handler om å utvikle øynene dine for å gjenkjenne hvordan ting skal passe sammen, velge et godt sett med bilder for å komplimentere, og legge til skygger og høydepunkter for å få alt sammen.
Den endelige effekten med de riktige bildene kan være veldig hyggelig og er spesielt bra for bruk i Flash, hvor du kan få objekter fly i eller materialisere.
Du kan se Flash Showroom-siden her, eller du kan også klikke på bildet nedenfor for å se hele visningen.
I neste del av denne serien går vi gjennom et annet rom på samme måte som dette. Det er sannsynligvis ikke så mye mer å legge til, men det er fortsatt interessant å se prosessen igjen. I den siste delen legger jeg sammen et annet rom fra bunnen av og prøver å skjermbilde alle de små detaljene i prosessen. Så til neste gang folkene!
Redaktører Merknad: Denne opplæringen foregår lanseringen av PLUS-medlemskapene våre. Dessverre er det ingen tilhørende PSD-fil.
Accentsconagua