Share
Imaginile de fundal neclarizate sunt o tendință fierbinte în webdesign în acest moment și pot adăuga adâncime și interes pentru orice design de site web. În acest tutorial, vă voi parcurge toți pașii pentru a crea o unitate erotică vizibilă (citiți: mesajul dvs. cheie de marketing) perfectă pentru o regiune de prezentare sau de bannere a site-ului următor.
În acest tutorial ne vom concentra pe utilizarea tehnicilor Photoshop nedistructive, editabile și scalabile oriunde putem include filtre inteligente, mască și forme vectoriale. În timp ce poate fi un pic mai mult de lucru, luând timpul pentru a vă asigura că produsul dvs. finit poate fi complet editat pentru a răspunde la schimbările viitoare merită efortul.
Sunteți gata să intriți? Activați Photoshop și începeți.
Vom folosi o serie de resurse care nu sunt incluse în fișierele sursă.
Notă: Photoshop CS6 a fost folosit pentru a crea acest tutorial, dar nu este necesar să se obțină rezultatul final, puteți utiliza versiunile anterioare fără probleme.
Sunt, de asemenea, pe un sistem de operare Windows, așa că am să rămân cu Ctrl și Alt pentru a descrie cheile de comenzi rapide. Pe un Mac, Ctrl → Comandă și Alt → Opțiune.
Să începem prin crearea unui nou document și stabilirea luminii noastre globale pentru toate efectele stratului.
Setați Lumina Globală la un unghi de 90 ° și o altitudine de 45 ° (Layer → Layer Style → Global Light).
Notă: În designul interfeței cu utilizatorul, veți observa că lumina globală este adesea stabilită la 90 °, schimbând astfel setările globale înainte de a începe cu un nou proiect UI, un obicei bun pentru a intra în!
Creați un document nou cu dimensiunile de 960px x 568px (raport 16: 9) și Conținutul de fundal al imaginii transparente.
Apoi, vom importa imaginea de fundal și o redimensionăm pentru a se potrivi noului document.
Deschideți imaginea orașului din Toronto într-un document nou și modificați dimensiunea imaginii la 960px x 720px (Imagine → Dimensiunea imaginii).
Selectați întreaga imagine (Ctrl + A), și copiați-l în clipboard (Ctrl + C). Reveniți la noul nostru document și inserați imaginea într-un nou strat (Ctrl + V).
Utilizând instrumentul de mutare (V), trageți imaginea în sus pentru a alinia marginea de jos a imaginii în partea de jos a documentului.
Denumiți acest strat "primăriei"
Duplicați stratul "primăriei" făcând clic dreapta pe stratul din panoul straturilor și selectând 'Strat duplicat'. Redenumiți acest nou strat "blur" al primăriei
Apoi, vom adăuga un filtru inteligent pe strat. Pentru a face acest lucru, trebuie să transformăm stratul "blur" al primăriei într-un obiect inteligent.
Faceți clic dreapta pe stratul "blur" și selectați "Conversia în obiectul inteligent" din meniu.
Să adăugăm o neclaritate gaussiană în imaginea noastră de fundal pentru ao da "prin fereastra de cafea": (Filter → Blur → Gaussian Blur). Dați-i o rază de 14,0 pixeli.
Notă: Aceasta este prima tehnică non-distructivă pe care o vom folosi astăzi. Veți observa din imaginea de mai sus că Gaussian Blur a fost adăugat ca un "Filtru inteligent" și nu este aplicat imaginii în sine. Aceasta înseamnă că putem schimba setările, adăugăm filtre inteligente suplimentare sau eliminăm efectul în totalitate - toate fără a deteriora imaginea originală.
Un alt lucru care trebuie luat în considerare este faptul că, dacă veți schimba vizibilitatea stratului "primăriei", veți observa o anumită transparență strălucind prin marginea imaginii, datorită efectului de estompare asupra stratului "blur" al primăriei. Lăsând stratul "primăriei" vizibilă, marginile sunt foarte bune.
Așa cum este, imaginea este puțin întunecată. Să lămurim lucrurile și să le dăm o senzație luminoasă prin adăugarea unui nou strat de ajustare Curves (Strat → Nivel de ajustare nou → Curbe) și trageți mânerul central sus și ușor spre stânga, după cum se arată mai sus.
O treabă excelentă - totul a fost finalizat. Să facem un moment pentru a muta aceste straturi într-un nou grup (Ctrl + G) numit "Fundal" pentru a păstra documentul Photoshop frumos și elegant.
Creați un nou strat numit "panou din partea de jos a sticlei" și utilizați instrumentul de marcare (M) pentru a crea o selecție dreptunghiulară de 960px latime și 120px înălțime. Completați selecția cu alb (#ffffff) (Ctrl + Bkspace).
Faceți dublu clic pe strat pentru a deschide efectele stratului și pentru a aplica următoarele setări:
În opțiunile de amestecare, setați opacitatea la 27% și umpleți opacitatea la 0%
Setați un accident interior 1px, color #cecece.
Setați o umbră albă (#ffffff) cu un mod de amestecare setat la Linear Dodge (adăugați) și o opacitate de 15%. Setați distanța la 1px și dimensiunea la 6px.
Setați o acoperire gradientă liniară de 90 ° care variază de la # 787878 la 0% la #ebebeb la 100%. Modificați modul de amestecare la Luminozitate și setați opacitatea la 55%.
Panoul de sticlă arată bine, dar trebuie să luăm o porțiune departe de partea superioară pentru a permite spațiul pentru butonul de chemare la acțiune. Pentru a face acest lucru, vom folosi o mască vectorică - o altă tehnică non-distructivă și editabilă photoshop.
Deschide fereastra Trasee (Fereastră → Căi) și faceți clic pe "Creați o nouă cale" pictograma din partea inferioară a panoului.
Redenumiți noua "mască de panou".
Utilizând instrumentul de formă (U) setați pe Cale, creați un dreptunghi 960px x 120px în partea de jos a documentului, care acoperă stratul nostru de "panou de sticlă de jos".
Acum, setați instrumentul de formă în "Reduceți forma frontală" și desenați un dreptunghi rotunjit de 420 px x 100 px cu o rază de 50 pixeli.
Odată ce aveți cele două căi, selectați-le cu ajutorul instrumentului de selecție directă (A) și ținând Shift pe măsură ce faceți clic pe fiecare cale. Utilizați instrumentul de aliniere pentru a alinia centrele orizontale și împingeți dreptunghiul rotunjit în poziție, astfel încât punctele sale verticale centrale să atingă marginea superioară a dreptunghiului, așa cum este arătat mai sus.
Asigurați-vă că atât stratul "panou de sticlă de fund" este selectat în panoul straturilor, cât și calea "mască panou" este selectată în panoul Căi.
În partea de jos a panoului de căi, faceți clic pe "Creați o nouă mască" pictograma o dată pentru a crea o mască de strat și apoi să o faceți din nou pentru a crea o mască vectorică care scoate o bucată din panoul nostru din partea de jos a sticlei. Panoul dvs. de straturi ar trebui să arate ca imaginea de mai sus.
Notă: Pentru că ne-am făcut timp să folosim căi vectoriale pentru a crea o mască în loc să folosim o imagine raster, ne-am dat posibilitatea să schimbăm, să edificăm, să adăugăm, să ștergem și să mascăm masca în orice moment fără a pierde calitatea în orice moment.
Dacă totul a fost planificat, munca voastră în curs ar trebui să pară ceva asemănător imaginii de mai sus.
Apoi, vom crea un fundal pentru butonul nostru.
Creați un nou strat (Ctrl + Shift + N) și denumiți-o "fundal buton". Utilizând instrumentul de formă setat la "Shape", creați un dreptunghi rotunjit 410px x 90px cu o rază de colț de 45px. Setați umplutura la #ffffff.
Centurați forma în mijlocul "lopatei" - lăsând 6px între fundul formei și marginea superioară a "panoului de sticlă de jos".
Deschideți panoul de efecte de strat pentru stratul "fundal cu butonul" și setați următoarele stiluri de straturi:
În opțiunile de amestecare, setați Opacitatea la 20%, modul de amestecare la Normal și Opacitatea umplere până la 30%.
Setați umbra interioară într-un mod de amestecare Linear Burn (# 000000) cu o opacitate de 9%. Setați distanța la 1px și dimensiunea la 0px.
Setați o umbră de picătură cu un mod de amestecare Linear Dodge (Add), (#ffffff) și Opacity la 34%. Setați distanța la 1px și dimensiunea la 0px.
Apoi, vom începe lucrul la butonul în sine.
Creați un nou strat numit "butonul principal". Desenați un dreptunghi rotunjit folosind instrumentul de formă setat la "Shape" 390px lățime de 70px înălțime și o rază de colț de 35px. Setați umplerea la # 007dba.
Aliniați centrele verticale și orizontale ale straturilor "buton principal" și "fundal buton".
Deschideți panoul de efecte de strat și aplicați următoarele setări:
Setați un curb în interior de 1px cu un mod de amestecare și un gradient liniar de 90 °, care rulează de la # 000000 la 0% până la #ffffff la 100%
Setați o Shadow Inner (#ffffff) cu un mod de amestecare Dodge Linear (Add) și o opacitate de 7%. Setați distanța la 2px și dimensiunea la 1px.
Adăugați un #ffffff Color Overaly setat la un mod liniar Dodge (Add) Blend Mode și formați opacitatea până la 13%.
Setați acoperirea cu gradient cu un mod de combinare a arderii liniare, o opacitate de 24% și un gradient liniar de 90 ° cu # 000000 la 0% și #ffffff la 100%.
Setați Umbra de Drop cu un mod Blend of Multiply, o opacitate de 30%, # 000000 și setați distanța la 2px și dimensiunea la 4px.
Notă: S-ar putea să fi observat că nu am setat suprapunerea gradientului ca albastru închis la albastru deschis (ceea ce ar fi avut ca efect un efect similar). Motivul pentru care se utilizează o formă și gradientul de ardere liniară alb-negru este că acum putem schimba culoarea butonului foarte ușor prin schimbarea umplerii acestuia. Încercați acum și experimentați modificarea umplerii la altă culoare.
Pentru a adăuga o anumită textură butonului, vom adăuga o suprapunere de zgomot.
Creați un strat nou și denumiți-l "zgomot".
Selectați întregul document (Ctrl + A) și umpleți fundalul cu #ffffff (Ctrl + Bkspace).
Asigurați-vă că fundalul dvs. este setat pe negru și că fundalul dvs. este setat pe alb (D), adăugați un zgomot uniform de 200%, asigurându-vă că este bifată caseta de validare "Monocromatic" (Filtrare → Zgomot → Adăugare zgomot ...).
Selectați stratul "Noise" și setați-l ca o mască de tăiere (Layer → Creare mască de tăiere), care limitează numai zgomotul la forma butonului.
Setați Modul de amestecare al măștii de tăiere la Multiplicare și Opacitatea la 5%.
Următorul pas este să adăugați un mic punct culminant în partea de sus a butonului (sunt lucrurile mici pe care le numără).
Duplicați stratul principal al butonului și trageți-l deasupra măștii de tăiere a zgomotului. Setați umplutura la 0%.
Faceți clic dreapta pe noul strat "evidențiere" și ștergeți stilurile de straturi selectând 'Clear Layer Style'.
Deschideți panoul de efecte de strat și aplicați următoarele setări:
În ecranul Opțiuni de amestecare, bifați caseta de selectare "Efectul ascunde mască strat".
Setați un curb în interiorul 2px setat la 0% opacitate.
Notă: Acest lucru "inserează" în mod efectiv următorul strat de stil departe de marginea butonului.
Setați o umbră interioară cu un mod de amestecare liniar Dodge (Adăugare), setat la Opacitate 18% și utilizând #ffffff.
Setați distanța la 4px și dimensiunea la 4px.
Selectați stratul "evidențiere" și adăugați o mască nouă (Layer → Layer Mask → Reveal All).
Utilizând instrumentul de gradient, trageți un gradient liniar peste buton, așa cum se arată mai sus. Setați gradientul folosind trei opriri 000000, opțiunea de oprire de 50% setată la 0% opacitate.
Dacă ați urmărit îndeaproape, butonul dvs. ar trebui să arate astfel:
Fără o sursă de lumină, accentul nostru arată puțin în afara locului. Vom adăuga un efect frumos de strălucire pentru a ridica butonul și fundalul.
Creați un strat nou și numiți-l "străluciți".
Utilizând instrumentul de gradient (G) setați la radial și alb până la transparent, trageți un gradient alb mare peste buton, așa cum se arată în imaginea de mai sus.
Efectuați o selecție de marcaj prin Ctrl + făcând clic pe miniatură "fundal de buton" din panoul straturilor.
Creați o mască de straturi (Layer → Mask Layer; Hide All).
În cele din urmă, schimbați modul de amestecare a stratului "strălucire" cu Linear Dodge și opacitatea de 50%.
Acum, că forma butonului a fost creată, să adăugăm un text de apel la acțiune.
Utilizând mânerele formei butonului ca puncte de referință, glisați trei ghidaje așa cum se arată pentru a vă ajuta să poziționați textul și forma pictogramei butonului.
Utilizând instrumentul Tip (T), introduceți în textul dvs. în fontul Ligii Gothic cu un kerning de 60, dimensiunea fontului de 14pt și o culoare de # dce2e5
Setați textul în ghidajul din stânga și aliniați textul la centrul vertical al formei butonului.
Deschideți fereastra cu efecte de strat și aplicați următoarele efecte:
Setați o Shadow Inner albă (#ffffff) cu un mod de amestecare "Lighten" și o opacitate de 100%. Setați distanța la 1px și dimensiunea la 0px.
Setați umbra picăturilor într-un mod Blend of Color Burn, o culoare de # 00022a și o opacitate de 24%.
Setați distanța la 2px și dimensiunea la 1px.
Pentru a termina butonul, trebuie să adăugăm pictograma și o linie de divizare. Să începem cu pictograma.
Selectați instrumentul de formă particularizată (U), faceți clic pe butonul de setări și selectați "Încărcați forme".
Navigați la fișierul "retro_hand.csh" furnizat în resurse și încărcați-l în lista de forme curente.
Creați un strat nou și denumiți-l "pictogramă de mână".
Cu forma mâinii selectată și asigurarea faptului că este aplicată setarea "Definiți proporții", desenați o formă de 19px înălțime și 34 de lat.
Umpleți forma cu culoarea # dce2e5.
Deschideți panoul de efecte de strat și aplicați următoarele efecte:
Setați o umbră interioară cu un mod de amestecare de Lighten (#ffffff) cu o opacitate de 100%. Setați distanța la 1px și dimensiunea la 0px.
Setați Umbra de Drop cu un mod Blend of Color Burn utilizând o culoare de # 00022a și o opacitate de 24%. Setați distanța de 2px și dimensiunea la 1px.
Următorul pas este să adăugați o linie care separă pictograma de text.
Desenați o linie neagră de 1px x 70px utilizând instrumentul de formă (U) și poziționați-o în centrul spațiului dintre text și pictograma de mână (utilizați panoul de informații pentru a vă ajuta aici).
Aplicați următoarele stiluri de straturi:
Setați Opacitatea de umplere a formei la 0% și bifați "Masca stratului ascunde efectele" Caseta de bifat.
Setați suprapunerea culorilor într-o culoare de # 044b71, un mod amestec de suprapunere și o opacitate de 73%.
Setați suprapunerea în gradient la un gradient linear de 90 ° cu # 000000 la 0% și #ffffff la 100%. Setați modul de amestecare la arderea liniară și reduceți opacitatea la 9%,
Setați strălucirea exterioară la #ffffff, modul Blend to Screen, Opacitatea la 26% și dimensiunea la 1px.
Apoi, avem nevoie de o mască de strat pentru a elimina marginile aspre ale liniei.
Adăugați o mască de strat pe stratul "separator de linii" făcând clic pe pictograma "Mască strat" din partea de jos a panoului straturilor.
Folosind o perie neagră moale (Dimensiune ~ 55px și duritate 0%), vopsiți ambele capete ale liniei. Veți căuta să creați un efect de decolorare subtilă. Zonele cu roșu din imaginea de mai sus pot fi folosite ca referință.
Grozav! Ne-am terminat butonul. Să aruncăm o privire la ceea ce am creat până acum:
Înainte de a trece la pașii finali ai proiectului, să luăm un moment pentru a ne asigura că toate straturile noastre sunt bine numite și grupate.
Panoul dvs. de strat ar trebui să arate astfel:
Sfat rapid: Vrei o modalitate ușoară de a restrânge toate efectele stratului pentru fiecare strat? Grupați straturile și pe stratul superior, Alt + Faceți clic pe săgeata de lângă pictograma fx. Toate efectele straturilor sub aceasta se vor prăbuși, de asemenea, o modalitate excelentă de a vă menține panoul straturilor ușor de manevrat!
Să trecem la componenta de tipografie a proiectului.
Utilizând instrumentul Tip (T), introduceți textul în două straturi separate cu setările prezentate mai sus.
Desenați două ghidaje, una la 130 de pixeli din partea de sus a documentului și a doua la 258 de pixeli. Poziționați marginea superioară a straturilor de text pe ghidaje.
Selectați ambele straturi în panoul Straturi (Ctrl + clic), faceți o selecție a întregului document (Ctrl + A) și alinierea centrelor orizontale (Layer → Aliniere straturi la selecție → Centre orizontale).
Acum, deschideți panoul fx pentru stratul "Servicii profesionale" și adăugați următoarele efecte:
Setați umbra interioară cu un mod Blend of Multiply, o culoare de # 585858 și o opacitate de 54%.
Setați unghiul la 135 ° (asigurându-vă că lumina globală este dezlipită) și setați distanța la 1px, Choke la 100% și dimensiunea la 0px.
Setați o strălucire interioară cu un mod de amestecare a ecranului, o opacitate de 59% și o culoare de #ffffff. Setați Choke la 100% și dimensiunea la 1px.
Setați acoperirea cu gradient cu un mod de amestecare al arderii liniare, o opacitate de 18% și un unghi de 90 °. Gradientul în sine este negru → negru transparent.
Setați o umbră de picătură cu un mod de combinare de ardere liniară, o culoare de 000000 și o opacitate de 24%. Setați distanța la 2px, Spread la 8% și Dimensiunea la 3px.
În panoul straturilor, plasați cursorul peste pictograma fx a stratului "servicii profesionale", țineți apăsat Alt + Faceți clic pe și trageți pictograma pe stratul "prețuri excepționale" pentru a copia stilul stratului.
Suntem pe punctul de acasă acum! Să terminăm elementul tipografic al proiectului.
Creați un strat nou și adăugați cuvântul "At" cu instrumentul Tip. În panoul Caracter, setați fontul la Wisdom Script AI, dimensiunea fontului la 12pt și culoarea albă.
Selectați toate cele trei straturi de text din panoul stratului (Ctrl + clic), comutați la instrumentul Mutare (V), și utilizați opțiunile de aliniere din bara de proprietăți pentru a centra în straturi (Alinierea straturilor orizontale) și apoi adăugați o cantitate uniformă de spațiu între cele trei linii de text (Distribuie centre verticale).
Deschideți panoul de efecte de strat și aplicați următoarele efecte:
Schimbați Opacitatea umplerii din panoul Opțiuni de amestecare la 42%.
Adăugați o albă (#ffffff) Shadow Inner cu un mod de amestecare setat pe ecran și o opacitate de 22%. Setați distanța la 1px și dimensiunea la 0px.
Adăugați o suprapunere de gradient liniară de 90 ° (#ffffff → #dedede) cu un mod de amestecare setat la Linear Dodge (Adăugare). Viteza opacității la 16%.
Adăugați o umbră de picătură neagră setată pentru arderea liniară și o opacitate de 8%. Setați distanța la 1px și dimensiunea la 0px.
Acum, să adăugăm câteva forme decorative în secțiunea de text a proiectului pentru a lega împreună toate elementele.
Trageți patru ghidaje noi de la riglă (Dacă nu vedeți rigla, selectați Vizualizare → Conducători) și aliniați-le la marginile textului, după cum se arată mai sus.
Acestea ne vor ajuta să ne aliniem barele în pașii următori.
Creați un nou strat numit "bare stânga".
Centralizat la bara transversală a stratului "A" din stratul de text "At", desenați un dreptunghi rotunjit de 275px lățime de 4px înălțime, cu o rază de colț de 4px. Setați umplutura în alb (#ffffff).
Asigurați-vă că setarea componentelor formei este setată la "Combine Shapes", trageți două forme mai identice și fixați unul deasupra și unul de sub primul dreptunghi rotunjit, așa cum este arătat mai sus.
Modelați formele în poziție folosind tasta săgeată pentru a pune un decalaj de 2px între fiecare dintre forme. Utilizați instrumentul de zoom (Z) și grila pixelilor (Vizualizare → Afișare → Grilă pixel) pentru a vă ajuta aici.
Asigurați-vă că grupul de forme este poziționat la 10px în partea stângă a ghidului, la marginea din stânga a stratului "At", după cum se arată mai sus.
Apropiați aproape de marginea din stânga a grupului nostru de forme (Z). Utilizarea instrumentului Direct Selection (A), selectați cele trei mânere de capăt ale dreptunghiului mijlociu și, ținând apăsată tasta Shift, apăsați de două ori tasta săgeată stânga pentru a reduce lățimea formei cu 20px (Shift + Arrow cheia mișcă orice element în incrementări de 10px).
Repetați acest proces pentru dreptunghiul inferior, reducând această lățime a formei cu 30 de pixeli.
Bacsis: Cea mai ușoară modalitate de a selecta mânerele este să glisați o cutie în jurul capătului formei cu instrumentul de selecție directă, așa cum se arată în imaginea de mai sus.
Deschideți panoul de efecte de strat pentru forma "barelor din stânga" și aplicați următoarele setări:
În panoul Opțiuni de amestecare, setați Opacitatea umplerii la 20%.
Setați o umbra interioară cu o culoare albă (#ffffff), un mod Blend of Screen și o opacitate de 22%. Setați distanța la 1px și dimensiunea la 0px.
Adăugați un gradient linear 0 ° la Linear Dodge (Adăugare) și o opacitate de 16%. Setați gradientul cu valorile #ffffff la 0% și #dedede la 100%.
Adăugați o Shadow Drop cu o distanță de 1px, cu o culoare de 000000 și cu un mod de amestecare a arderii liniare. Setați opacitatea la 9%.
Duplicați stratul "barele din stânga" (Faceți clic dreapta → Duplicat Layer ...) și denumiți noul strat "barele drepte".
Răsuciți stratul pe orizontală (Editare → Transformare → Flip orizontală) și poziționați stratul în partea dreaptă a stratului "At" așa cum se arată mai sus.
Felicitări pentru că ați făcut totul prin acest tutorial! Opriți ghizii (Ctrl + H), redimensionați zoom-ul la 100% (Ctrl + 1) și admirați munca voastră:
Să facem un moment pentru a revedea câteva dintre tehnicile-cheie pe care le-am abordat în acest tutorial:
Vă mulțumim că ați rămas cu mine până la capăt și sper că ați luat câteva trucuri photoshop și sfaturi de lucru care vă vor ajuta cu următorul proiect. Dacă vreunul dintre pași ți-a lăsat zgâriat capul, vă rugăm să lăsați un comentariu de mai jos - voi fi sigur că pentru a aborda orice întrebări pe care le-ați putea avea.
Accentsconagua