Share
Recent, în sugestiile cititorului, am găsit o solicitare de a vedea cum să producă interfața de raft pe site-ul Web incredibil de cool pentru agenția de creatie Dragon Interactive, o agenție de creatie din Los Angeles. Deci, iată o metodă pentru producerea efectului de raft.
Nota Editorului: Dragon Interactive ne-a cerut să remarcăm că acest tutorial nu este scris sau susținut de Dragon.
Utilizând instrumentul Pen (P), creați o cale după cum se arată mai jos. Nu vă faceți griji cu privire la culoarea de fundal. Am ales această culoare pentru a vedea calea. Apoi, mergeți la Paleta dvs. de căi și apăsați butonul Creare cale nouă. Aceasta va crea un nou strat de cale și va salva calea existentă la stratul de dedesubt. Mi-am numit "Separator".
Notă: Dacă în orice moment pierdeți alegerea căii dvs., mergeți la fila căi și selectați stratul separator. Acest lucru este important pentru pașii următori.
Creați un strat nou, selectați instrumentul Brush (B) și selectați o perie tare de 1px. Schimbați culoarea prim-planului într-un negru și apoi selectați din nou instrumentul Pen. Acum faceți clic dreapta pe cale și alegeți calea de atac. În caseta care apare, asigurați-vă că este selectată opțiunea Brush Tool (instrument de periere) și că simulația presiunii este oprită. Sunați acest strat "separator negru". Apăsați Enter dacă calea blochează vizualizarea liniei negre. Și nu vă faceți griji, așa cum am menționat mai devreme, puteți re-selecta această cale în Paleta traseelor.
Duplicați stratul "separator negru", asigurați-vă că este selectat instrumentul de mutare (V), apoi apăsați o dată tasta săgeată stânga. Acest lucru va impinge acea linie cu un pixel spre stânga, acum apăsați Ctrl + I pentru a inversa culorile. Denumiți acest strat "separator alb" și plasați-le într-un set de straturi denumit "separator". Rețineți că butonul Creați o grupare nouă este chiar lângă butonul Creează un nou strat. Pentru moment, păstrați modul de acest strat setat la Normal Deși îl vom schimba mai târziu în tutorial.
Selectați Tool Paint Bucket Tool (G) și utilizați setările afișate în imaginea de mai jos. Apoi creați un strat sub setul de separatoare și completați partea stângă a separatorului cu # 3d3d3d.
Creați un strat deasupra acestuia și faceți același lucru pentru partea dreaptă, cu excepția cazului în care utilizați acest lucru data # 111111. Treceți cu umplutura "gri închis", cu un pixel spre stânga (folosind tastele săgeți!) Și cu "gri deschis", unul spre dreapta. Ar trebui să fiți conștienți de faptul că dacă vizualizați zoom-ul de 100%, atunci apăsarea tastei săgeată stânga / dreapta se va deplasa cu 1px, dacă totuși veți fi micșorat în continuare, atunci acesta va muta un număr diferit de pixeli. De exemplu, dacă sunteți la o vizualizare de 66%, apăsând o dată pe tasta săgeată se va muta 2px, la 50% din vizualizare se va muta 3px și așa mai departe. Deci, asigurați-vă că sunteți la 100% :-)
După aceasta, utilizând instrumentul perie sau creionul, periați de-a lungul laturilor pânzei pentru a umple acel pixel transparent înapoi cu culoarea corectă. Aruncați aceste două într-un set numit "fundal".
Avem pregătirea noastră de bază. Acum este momentul să adăugați evidențierile și umbrele. Creați un gradient cu culoarea # 707070 după cum se arată mai jos și apoi gradient-umple un nou strat cu acel gradient. Asigurați-vă că dimensiunea gradientului este cam la fel ca a mea. Dacă aveți probleme cu gradientele, le puteți extinde vertical prin apăsarea Ctrl + T și tragerea lor verticală sau puteți utiliza filtrul Filtru> Blur> Motion Blur filter (Prefer preferința transformării libere).
În plus, pe un nou strat, creați un gradient îngust similar plin cu alb. Setați această opțiune la suprapunere și renunțați la opacitate la 40%. Am pus aceste două straturi într-un set numit "evidențiază".
Umbrele au fost create într-un mod similar. Mai întâi, un gradient de "umbra mare", folosind stratul negru cu stratul și setat pe Soft Light și opacitate 80%, a fost creat un gradient întins. Apoi, pe lângă aceasta, a fost adăugată o "mică umbră", din nou folosind negrul, dar de această dată stratul a fost setat pe Overlay și opacitatea a scăzut la 40. Aceste două straturi au fost puse într-un set numit "umbre".
Cele mai importante și umbre sunt prea limitate în zona întunecată pentru a rezolva problema.
Puneți "umbrele" și "evidențiați" într-un set nou. Am sunat-o pe S / H. Asigurați-vă că setul de evidențiere este sub umbrele setate. Adăugați o mască pentru straturi în setul S / H.
Acum, apăsați Ctrl pe stratul "gri închis". De data aceasta, folosind o perie neagră de opacitate scăzută, treceți peste zona mascată din cadrul selecției. Cu fiecare accident vascular cerebral, umbrele și evidențele se estompează. Reglați opacitatea periei dvs. negre pentru a obține mai mult control asupra transparenței.
Cu cât peria este mai opacă, cu atât vor deveni mai transparente umbrele și accentele. Dacă tot credeți că aveți nevoie de mai mult control, puteți adăuga măști în straturile însele. De exemplu, adăugarea unei măști în stratul "evidențiere mare" vă va permite să editați opacitatea acelui strat numai. Utilizați acest lucru în avantajul dvs..
Acum vine partea dificilă. În funcție de gustul și priceperea dvs., acum va trebui să vă spălați în umbre suplimentare și în evidență. Vă sugerez să puneți toate perii într-un set separat numit "Brush" în partea de sus a documentului. Utilizați perii negre cu opacitate redusă pentru a adăuga umbre. Răbdarea este cheia aici. Nu există o cale fixă de a face acest lucru. Am folosit o perie mare (180 pixeli), moale, neagra, setata la opacitate de 10% si a fost lovita de-a lungul marginilor.
Duplicați setul de strat "fundal" și apăsați Ctrl + E. Acest lucru îl va rasteriza într-un singur strat. Utilizați instrumentele Dodge și Burn pentru a adăuga evidențieri suplimentare și umbre dacă este necesar. Modul de evidențiere funcționează cel mai bine aici, cu o expunere scăzută (aproximativ 15-20%).
Până acum am folosit separatorul pentru a ne ajuta în procesul nostru cu umbrele / evidențiază etc., astfel încât să avem o împărțire clară între zona de lumină și întuneric. Acum vom finaliza acest design. Setați setarea "separator" la suprapunere. Wow, apare o indentare! Dacă nu sunteți mulțumit de aceasta, duplicați atât straturile "separator alb", cât și stratul de separare negru și împingeți-i un pixel spre dreapta. Creează un aspect mai puțin proeminent.
Efectul nu este prea greu de realizat. Când am analizat pentru prima dată pagina Web, am înțeles că forma poate fi creată cu Path Tool, iar restul a fost doar o grămadă de umbre și accente care ar putea fi create datorită unei combinații de periaj și gradienți. Cu cât lucrați mai mult în acele umbre, cu atât este mai bine rezultatul final.
Dar așteptați, acest lucru nu arată ca o pagină Web Dragon Interactive!
Nu, nu. Acest tutorial a fost scris pentru a vă arăta cum este creat acest efect 3D. Site-ul Dragon Interactive are mult mai mult decât acest element de interfață și puteți învăța multe prin studierea modului în care au plasat obiecte colorate și mărite. În general, nu este o idee proastă de a analiza orice design pe care îl întâlniți și să vă gândiți la motivul pentru care designerul a făcut ceea ce a făcut, precum și cum au făcut-o.
Accentsconagua