Share
V-ați întrebat vreodată cum să creați modele de fundal perfecte, fără probleme, care funcționează pe Photoshop și pe web? Nu te uita mai departe pentru că astăzi o vom rupe pentru tine - pas cu pas. Veți crea propriile modele de fundal în cel mai scurt timp!
Heya toată lumea! Astăzi vom continua seria de tutori despre crearea tiparelor de fundal care pot fi utilizate pe web (și în faza de proiectare) cu cea de-a doua ediție. Vom căuta cum să creați modelele de "zgomot" din ce în ce mai populare pe care le-au folosit atât de multe site-uri web în ultima vreme. Asigurați-vă că ați verificat primul post din seria dacă ați pierdut-o!
Obiectivul nostru este simplu: Pentru a învăța pe oricine cum să creeze modele de fundal care sunt destinate pentru web (dar care pot fi folosite și în timpul procesului de proiectare). Vom fi "program agnostic", ceea ce înseamnă că majoritatea sfaturilor vor funcționa atât în Photoshop cât și în Fireworks.
Astăzi este ziua a doua în seria noastră - dar merită menționat faptul că toate aceste tutoriale sunt "independente" - ceea ce înseamnă că ar trebui să puteți alege chiar partea a 4-a, chiar dacă ați pierdut primele două părți.
Modelul pe care îl vom acoperi astăzi este modul de a crea o "textură de zgomot" eficientă care poate fi folosită ca un model în Photoshop, precum și un fundal de tigla pe paginile dvs. web. Vom face acest lucru în 4 pași:
Gata? Să o facem!
Primul pas în tutorialul de astăzi este probabil cel mai important, pentru că am stabilit elementele fundamentale. Există o mulțime de moduri diferite de a crea aceste tipare de zgomot? dar am să vă arăt una dintre cele mai bune (și cele mai flexibile!) metode pentru a vă salva frustrarea și durerile de cap în jos.
Începeți prin deschiderea unui nou document. Dimensiunea nu contează prea mult (folosim 200px la 200px în demo), dar este mai bine să o păstrați peste 75px pentru a vă asigura că modelul dvs. de zgomot este credibil de aleatoriu. Documentele mai mici sunt susceptibile de a începe să arate ca "repetiții" - documente care sunt semnificativ mai mari vor mări dimensiunea fișierului fără prea multă valoare adăugată.
Să adăugăm o formă dreptunghiulară de bază și să o numim "Base Color" (organizarea va face viața mai ușoară mai târziu!). Puteți folosi orice culoare doriți (am folosit #EBEBEB), dar asigurați-vă că dreptunghiul ocupă întregul spațiu.
Acum, să deschidem un nou strat și să îl numim "stratul de zgomot". Este doar un strat gol acum?
Folosind instrumentul "Rectangular Marquee" (M), desenați o selecție în tot documentul în timp ce este selectat pe stratul de zgomot. Apoi selectați "Completați?" Din meniul contextual (Faceți clic dreapta când este selectată - sau este și sub panoul Editare) și completați-o cu culoarea Alb.
Bacsis: În continuare vrem să convertim "stratul de zgomot" într-un obiect inteligent. Puteți face acest lucru făcând clic dreapta pe strat și selectând "Conversia la Smart Object" sau selectând "Convert for Smart Filters" din meniul Filters.
De ce este un obiect inteligent? Pentru că acest lucru ne va permite să păstrăm capacitatea de a edita ulterior intensitatea texturii zgomotoase! S-ar putea să existe pași în viitor, în cazul în care vom ajunge nevoia de a aplatiza textură, dar este întotdeauna cel mai bine să păstreze lucrurile editabile atâta timp cât am putea.
Bine, Smart Object în mână, dorim să adăugăm textura zgomotului.
În cele din urmă, setați Modul de amestecare pe stratul de zgomot la "Multiplicare", astfel încât numai pixelii de zgomot mai întunecați să fie vizibili. Acum puteți schimba culoarea pe stratul de bază pentru o culoare diferită zgomotoasă.
Whallah! Am stabilit acum elementele fundamentale pentru modelul de zgomot de bază?
? și asta ar fi sfârșitul acestui tutorial umil dacă am fi leneși?
În următorii pași, totuși, vă vom arăta cum să inversați, să modificați și să adăugați profunzimea și vibrația credibile modelului dvs. de zgomot, pentru a face cu adevărat să iasă din pachet!
Înainte de a vă deplasa: Mergeți mai departe și grupați-vă straturile împreună (stratul de bază și stratul de zgomot) utilizând Ctrl + G pentru a crea un dosar de nivel. Duplicați-o o dată și ascundeți originalul, astfel încât să avem întotdeauna o copie a acestuia. Pentru fiecare nou pas, vom crea un nou grup duplicat. Acesta este doar un obicei bun de bază pe care trebuie să-l aveți pentru că vă asigură că aveți întotdeauna o copie de siguranță a modelului nostru fundamental.
Bine, haideți să răsuciți acest model de zgomot în ceva întunecat și delicios acum. Vă voi arăta cum să creați un model de zgomot inversat care pare să aibă o strălucire subtilă.
Începeți cu o copie a grupului original de zgomote (consultați sfârșitul pasului 01). Primul lucru pe care dorim să-l facem este să facem culoarea de fundal Negru, deci mergeți mai departe și faceți asta pe stratul de bază.
În continuare, deoarece modelul nostru de zgomot este compus numai din pixeli "întunecați", trebuie să îl inversăm în esență. Din păcate, nu putem face acest lucru ca un efect "inteligent", așa că trebuie să lărgim modelul de zgomot. Asigurați-vă că aveți nivelul de intensitate setat la ceea ce doriți, apoi "Rasterize" stratul. Puteți face acest lucru făcând clic dreapta pe strat și selectând Rasterize din meniul contextual sau din Strat> Rasterize> Rasterize Layer meniul.
Acum, că ne-am înlesnit în mod esențial modelul de zgomot, vrem să îl inversăm. Faceți acest lucru din "Imagine> Ajustări> Inversare"panou.
Ce s-a întâmplat? Nu mai puteți vedea modelul de zgomot?
Va trebui să facem mici modificări pentru a vedea modelul zgomotului inversat. Mai întâi, setați Modul de amestecare pe stratul de zgomot la "Ecran".
Apoi, ajustați "nivelurile" modelului de zgomot (Ctrl + Alt + L? Sau Imagine> Ajustări> Niveluri).
Metodă alternativă: De asemenea, puteți adăuga un strat de ajustare pentru nivelurile (Strat> Nivel de ajustare nou> Niveluri). S-ar putea să preferați acest lucru dacă doriți să modificați intensitatea mai târziu.
Presto! Acum avem un model de zgomot inversat. Evident, puteți ajusta acest lucru la conținutul inimii dvs. - fă-l mai întunecat și mai subțire - sau mai luminos și mai intens. Puteți chiar să modificați culoarea stratului de bază într-un albastru închis sau roșu pentru a obține alte efecte. A înnebuni!
Tine minte - salvați salvați-le ca "Modele" în Photoshop selectând "Editați> Definiți modelul"Faceți acest lucru și mai târziu veți putea să folosiți aceste modele din nou și din nou. Puteți chiar salva modelele dvs. ca biblioteci și le puteți împărtăși prietenilor și colegilor.
În continuare vă vom arăta cum să adăugați adâncimea și vibrația modelelor de zgomot?
Să adăugăm acum o culoare și vibrație modelului nostru de zgomot acum. Merită menționat faptul că în pașii următori vom folosi câteva tehnici generale? nu este nevoie să le urmați în scrisoarea - pur și simplu să vă păstrați în minte atunci când vă duceți să vă creați propriile modele personalizate.
Începeți prin adăugarea unor culori în stratul de bază.
Acum, creați o copie a stratului de zgomot și setați ambele moduri de amestecare în Color Burn. Stratul duplicat ne va ajuta să ajungem la stratul inferior. De asemenea, ne va da posibilitatea de a schimba opacitatea pe o scară mai fină mai târziu.
Creați încă o copie, dar de această dată o vom rasteriza și o vom inversa (consultați Pasul 2, Black Noise, pentru detalii dacă ați pierdut-o).
Setați modul de amestecare pe noul layer al ecranului. De asemenea, dorim să adăugăm un nou strat de ajustare (Straturi> Nivel de ajustare nou> Niveluri), astfel încât să putem controla intensitatea zgomotului de lumină.
Acum, să creăm o compensare subtilă prin împingerea stratului de lumină departe de stratul întunecat (1px în sus și 1px stânga) utilizând Instrumentul de mutare (V) și tastatura.
Apoi, adăugați o mască de strat peste stratul de zgomot al luminii, astfel încât să putem juca cu ea.
Folosind o perie grosier texturată (setată la aproximativ 130px și culoarea Negru), vrem să mascăm în esență un pic din zgomotul nostru de lumină prin pictarea departe de Masca stratului. Un accident vascular cerebral ar trebui să facă truc, dar utilizați propria judecată. Ideea de aici este de a crea un model dur, aleatoriu.
Setați Opacitatea stratului până la aproximativ 45%. Puteți face mai puțin sau mai mult în funcție de propriile dvs. preferințe? încercăm totuși să scădem puțin intensitatea contrastului.
Acum avem un model frumos, cu puțină adâncime. Dacă nu sapa adâncimea, totuși, puteți ușor de făcut cu acest lucru prin răsturnarea stratului de zgomot al lumina orizontal pentru a elimina offset și a crea un simplu "scânteie" efect.
Alacadabra! Nu e rău, nu? Iată ce textură finală ar fi:
Bonus Sfat: Dacă observați orice "cusături" subtile când utilizați noul model, încercați să tăiați modelul original cu 5 sau 10 px în jurul marginilor. Veți obține adesea cusături dacă Photoshop decide să adune pixeli de zgomot mai întunecați în jurul marginilor stratului tău de zgomot, așa că pur și simplu tăierea marginilor va duce la un model curat și fără cusătură.
Următorii doi pași vor merge repede. Până acum am stabilit principiile principale pe care trebuie să le creăm doar pentru orice model de zgomot pe care îl puteți imagina - așa că vă vom arăta cum poate să arate această textură atunci când începeți să jucați cu culoarea și intensitatea contrast. Hai să aruncăm o privire asupra versiunii verzi?
Începeți cu o copie a grupului de straturi Blue Noise. Continuați și schimbați culoarea stratului de bază pe verde.
Veți observa un lucru amuzant atunci când schimbați culorile în jur? contrastul provenit din zgomot tinde să treacă de la subtil la dramatic cu culori diferite. Acest lucru înseamnă în esență că vom dori să ajustăm opacitatea straturilor de zgomot pentru a ține cont de intensitatea de mișcare. Nu există o regulă stabilită pentru acest lucru - jucați doar cu setările de opacitate până când aveți aspectul pe care îl conduceți.
În cele din urmă, iată modelul de zgomot finit:
O să menționez încă o dată că sunt în siguranță - dacă observați cusături pe modelul dvs. atunci când utilizați o formă mai mare sau pe site-ul dvs., ceea ce trebuie să faceți este să cultivați în jur de 10px în jurul valorii de forma pentru a elimina pixelii "margini" care pot fi mai întunecați când Photoshop le adaugă în timpul primului pas "Filtrare> Adăugare zgomot".
Bine - deci am doar un ultim truc în mânecă pentru acest tutorial. Până acum, am ajustat numai stratul de bază când vrem o culoare nouă. Acest lucru este bine și bine când vrem un model de zgomot de bază? dar dacă vrem ceva cu o viață suplimentară?
Ei bine, ultimul pas, dacă pentru voi, care doriți doar asta - un strat de zgomot dublu care are o "scânteie".
Du-te și porniți-o prin schimbarea culorii de fundal. Reglați opacitatea nivelului de zgomot așa cum vă place (nu am mers cu ea deloc pentru acest demo particular).
Iată unde aruncăm mingea în curbă - adăugăm un nou strat de ajustare (Straturi> Nivel nou de ajustare> Nuanță / Saturație) și faceți o mască de tăiere peste stratul de "zgomot redus". Acum, faceți doar setările până când obțineți o culoare aurie frumoasă provenind de la stratul de zgomot redus.
Efectul final este aici:
Este subtil, dar lumina "strălucitoare" care vine de la acest strat de zgomot de top va adăuga o viață mare pentru orice proiecte pe care le utilizați inch Bucurați-vă de ea și de a crea propriile variante!
În regulă! Deci, sper că ați scăpat ceva din această a doua sesiune. Până acum ar trebui să aveți o bună înțelegere a tiparelor de zgomot și cum să le folosiți în propriile proiecte. Puteți salva toate fișierele pe care le-am creat aici ca fișiere .GIF, .PNG sau .JPG și le puteți folosi instantaneu și pe web? dar tocmai am început doar.
În următorul nivel al acestei serii, vă vom arăta cum să creați anumite modele texturate avansate, modele bazate pe forme, modele transparente și chiar mai multe în viitor.
Abonează-te sau verifică din nou pe site pentru a vedea toate actualizările acestei serii în momentul în care se întâmplă!
Accentsconagua