Share
În acest tutorial, vă voi arăta un efect foarte simplu, care împreună cu o fotografie bună pot fi folosite pentru a obține rezultate superbe. Vom compune o cameră utilizând fotografii de obiecte. Această cameră poate fi apoi utilizată în Flash pentru a construi un site Web sau pur și simplu ca un grafic.
Am produs această compoziție acum un an și jumătate. A fost folosit în site-ul Web Flash Showroom pe care l-am construit ca un instrument de marketing și promovare pentru unul dintre site-urile surori Psdtuts +, FlashDen.net.
În acest tutorial, voi competa prima cameră. În continuare voi face a treia cameră. În ultima parte a acestei serii, voi produce o cameră cu totul nouă, cu pași mai detaliați decât primele două tutoriale, pentru că pentru primele două, mă duc peste munca veche, mai degrabă decât să fac ceva de la zero.
Acest efect se bazează în principal pe o mulțime de fotografii bune. Din păcate, aceasta înseamnă că acest tutorial este mai mult un ghid general decât să urmați în mod explicit pas cu pas. Cu excepția cazului în care, desigur, vă place să mergeți și să cumpărați toate fotografiile de stoc pe care trebuie să le faceți. Le puteți obține de la iStockPhoto, deși nu am exact adresele URL așa cum le-am cumpărat cu mult timp în urmă, iar contul meu are literalmente mii de fișiere descărcate :-) În orice caz, aici este o mini imagine a tuturor!
În primul rând, aici este produsul finit. După ce am produs acest mockup în Photoshop, am recreat site-ul din Flash cu animații și butoane și așa mai departe. Puteți vedea site-ul Flash Showroom aici.
De asemenea, puteți face clic pe imaginea de mai jos pentru a vedea vizualizarea completă.
Acum imaginea finală este de 1024x768. Primul lucru pe care l-am făcut a fost plasarea imaginii de fundal principale. Din nefericire pentru mine, sunt dimensiunile greșite (după cum puteți vedea mai jos). L-aș putea lărgi și să mă culc, dar apoi mi-aș pierde câteva detalii frumoase pe care aș vrea să le folosesc mai târziu, așa că am ales să extind fotografia.
Din fericire, locul de muncă nu este prea greu, deoarece zona superioară a fotografiei este destul de simplă. Trucul este de a folosi gradienti de culori alese din fundalul curent pentru a extinde fotografia.
Am folosit pentru prima oară instrumentul Pen pentru a desena o formă (arătată) pe care am vrut să o umplem cu gradientul meu. Observați că forma acoperă o parte a zonei fotografiei reale. Acest lucru este astfel încât, după aceea, pot folosi o gumă moale pentru a șterge marginile și a le estompa cu grație. Apoi am ales o nuanță închisă din partea dreaptă și o nuanță luminoasă din stânga și am tras un gradient liniar într-o nouă strat deasupra fotografiei. Aceasta a fost urmată de o ștergere blândă de-a lungul fundului pentru a se amesteca.
Repet același pas, dar pe partea stângă cu zona gri deschis. Din nou, forma pe care o trag deasupra fotografiei este mai mare decât este necesar, așa că pot să șterg înapoi pentru un amestec neted.
În cele din urmă, umbra de pe partea dreaptă părea un pic neuniformă, așa că am adăugat un al treilea strat deasupra și folosind Pen Tool a trasat o formă în jurul canapelei și i-a dat un gradient întunecat la lumină pentru a avea o umbrire mai consistentă, eliminând ultimele urme de unde am amestecat imaginile.
Acum că fundalul este pregătit, putem începe să plasăm obiecte. Înainte de a face acest lucru, ar trebui să spun câteva cuvinte despre tipul de imagini pe care doriți să alegeți:
În orice caz, pentru fiecare obiect, pur și simplu utilizați instrumentul Pen, urmăriți în jurul obiectului, apoi faceți clic dreapta pe panza, selectați Make Selection din meniul care apare și apoi copiați obiectul din fundal și lipiți-l panza principală. Există și alte modalități de extragere a obiectelor: puteți folosi instrumentul Magic Wand, de exemplu atunci când obiectul este pe un alb plat, cu toate acestea, consider că este mult mai curat și nu atât de greu să îl faceți cu Pen Tool. Dacă utilizați instrumentul Wand, asigurați-vă că utilizați o fotografie mai mare și scalați-vă în jos pentru a ascunde orice efecte de pixelizare.
De asemenea, puteți utiliza instrumentul Filtrare> Extract, dar acest lucru nu este mult mai ușor și rezultatul nu este întotdeauna la fel de bun.
Oricum, așa că am plasat televizorul pe fundalul meu. Deoarece există o umbră în partea dreaptă a camerei și este mai ușoară în stânga, am mai trecut și televizorul cu ajutorul instrumentului Burn pentru al face să se potrivească cu ceva mai mult. Lumina și umbra sunt destul de importante pentru a face obiectele să se potrivească mediului înconjurător. În acest tutorial special, nu vom mai face multe din acest lucru, dar vom face parte din a treia parte a acestei serii.
În orice caz, televizorul arată deja bine, dar într-adevăr ar trebui să arunce o umbră pe perete dedesubt și în dreapta. În prezent, se pare că este doar plutitoare în spațiu, așa că haideți să reparăm asta.
Există multe modalități de a crea umbre. În acest caz, am creat doar un strat sub televizor și apoi cu o perie moale și negru selectat, am pictat în jos și la dreapta. (Apropo, nu sunt sigur de ce am lăsat acele unelte și palete de istorie în screenshot-ul, asta-i un tutorial leneș de făcut chiar acolo :-)
Așa cum puteți vedea, umbra este ceea ce v-ați aștepta dacă va veni lumina de sus și de la stânga, ceea ce se potrivește cu imaginea de fundal pe care o lipim.
După aceea, am plasat o imagine pe televizor. Am plasat-o într-un strat nou și i-am dat un strat de strat Inner Shadow cu o distanță de 0. Acesta este astfel încât să existe un pic de umbră de-a lungul marginilor și imaginea pare a fi inserată. Este un efect rapid și murdar. Într-adevăr, dacă vroiai să faci televizorul exact, aș sugera să schimbi televizorul și apoi să observi ce se întâmplă la margini și ce fel de evidențiere are sticla / ecranul de la lumină. Dar, în acest caz, televizorul este mic și când îl iau în Flash, plasez aici videoclipuri, deci nu este atât de important.
În continuare vrem să plasăm laptopul. Ca și în cazul televizorului, am tăiat laptopul și mouse-ul din imaginile respective. Le-am micșorat folosind Instrumentul pentru transformare (Ctrl + T) și le-am plasat în mod corespunzător. Am tras apoi un cablu de șoarece (vezi pasul următor).
Pentru a face laptopul să arate că este într-adevăr acolo, am desenat un cablu de șoarece care se înfășoară peste perna și coborî pe podea. Acest lucru ajută obiectele să pară ca ele interacționează într-adevăr cu fundalul lor și nu doar plutesc.
Am făcut acest lucru prin apucarea Pen Tool și imaginându-mă în cazul în care cablul mouse-ului ar merge dacă ar fi într-adevăr acolo. Arata ca si cum ar merge de-a lungul pernei, arunca jos, si apoi de-a lungul podelei (nu stiu rachete cu adevarat, dar m-am gandit sa-i scriu oricum!) Apoi, odata ce am tras calea, am dat click dreapta selectat Calea de curse și a folosit o perie tare de 2px cu culori gri deschis.
Odată ce firul a fost desenat, am folosit Burn Tool pentru a pensa un pic de umbră pe cordon pentru a face să pară mai realistă (deoarece în realitate totul are bucăți de lumină și umbre și nici un obiect nu este de fapt doar o culoare plată).
Apoi, trebuie să adăugăm o umbră sub laptop și mouse. Umbra mouse-ului este destul de simplă - este doar un pic de întuneric neclară stabilit să Multiply peste covor. Pentru laptop doriți ca umbra să meargă pe marginea pernei.
În captura de ecran de mai jos, am ridicat laptopul, pentru a putea vedea umbra pe care am tras-o corect. Încă o dată am făcut-o folosind o perie moale și culori închise, apoi setați stratul pentru a multiplica, astfel încât se amestecă mai bine cu fotografia de dedesubt. Deoarece perna are o margine în care umbra trece peste margine (în cea mai mare parte a părții din dreapta), am făcut unghiul de schimbare al umbrei mereu așa ușor și merg în jos pe pernă.
Cu difuzoarele din partea dreaptă, am făcut în mod esențial același lucru ca și cu laptopul - adică creăm un strat sub fotografie, trageți într-o culoare închisă forma sub obiect și setați-o la Multiply.
Stabilind ce fel de umbra un obiect va face este doar o chestiune de observare a obiectelor în viața reală și de a privi la modul în care ei aruncă umbre cu lumini diferite. Pentru acest tip de imagine, umbra nu trebuie să fie perfectă, trebuie doar să fie destul de bună. Într-adevăr, dacă vă uitați atent, veți observa că, uneori, sublinierile și umbrele nu au nici un sens (de exemplu, observați cu difuzoarele din ecranul de mai jos, partea stângă a difuzorului din dreapta este întunecată și viceversa pentru stânga vorbitor, când, de fapt, dacă lumina este pe stânga, acesta este opusul a ceea ce ar trebui să se întâmple). Dar pentru o imagine de genul asta, în care doriți doar să aproximați realismul, efectul face trucul și nebunul ochiului.
Pentru ceasul din stânga sus, de fapt, am desenat unul folosind Photoshop - observați că este doar o grămadă de dreptunghiuri în interiorul celuilalt folosind gradienți și un pic de evidențiere în partea stângă sus. Nu voi vorbi prea mult despre acest pas ca acest tutorial este despre compunerea chestiilor impreuna nu a desenat ceasuri false :-) Suficient sa spun, nu am gasit ceasul potrivit si asta a facut trucul.
În cele din urmă, am pus o mulțime de texte aici și acolo și butoane și ce-ai-tu și aspectul este complet.
Așa cum am spus la început, nu există atât de multă dificultate într-un efect ca acesta din punctul de vedere al abilității tehnice pure Photoshop. Este vorba mai mult despre dezvoltarea ochiului dvs. de a recunoaște cum ar trebui să se potrivească lucrurile împreună, alegând un set bun de fotografii pentru a competa împreună și adăugând umbre și subliniază pentru a le aduce împreună.
Efectul final cu fotografiile potrivite poate fi foarte frumos și este deosebit de bun pentru utilizarea în Flash, unde puteți face obiecte să zboare sau să se materializeze.
Puteți vedea aici situl Flash Showroom sau puteți să faceți clic pe imaginea de mai jos pentru a vedea vizualizarea completă.
În următoarea parte a acestei serii, vom trece printr-o altă cameră în mod similar cu asta. Probabil că nu mai sunt multe de adăugat, dar este încă interesant să vedem din nou procesul. În partea finală, voi pune împreună o altă cameră de la zero și va încerca să filmeze toate detaliile mici ale procesului. Deci, până la data viitoare!
Editori Notă: Acest tutorial precede lansarea membrilor PLUS. Din păcate, nu există niciun fișier PSD însoțitor.
Accentsconagua