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 folosite pe web (și în faza de proiectare) cu ediția a patra: Texturi din fibre sintetice. Vom analiza modul de creare a unor modele credibile de țiglă, pornind de la o abordare pură cu vanilie și apoi luând aceleași principii pentru a crea versiuni avansate.
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.
Asigurați-vă că ați verificat restul seriei, inclusiv Fiber Carbon, Backgrounds zgomotoase și postul Intro to Patterns!
Astăzi este ziua a patra î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 4, 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ă textilă textilă 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:
În ultimele luni, texturile subtile, zgomotoase au fost foarte populare cu designerii web (consultați tutorialul nostru despre crearea acestora aici). În ultimele săptămâni, am observat din ce în ce mai multe texturi de zgomot "avansate"? ceea ce înseamnă că oamenii merg dincolo de abordarea simplă a modelului de zgomot și de a încerca efecte funcționare. Există două lucruri principale pe care aș vrea să le subliniez:
1: Texturile pe care le vom acoperi astăzi sunt create cu 100% în Photoshop. Vom aborda cum să creați texturi fotografice în următorul nostru tutorial.
2. Aceste texturi ar trebui să fie subtile și folosite cu ușurință. Nimic nu plânge din 1995 ca o textura de fundal fugly folosind filtrele Photoshop grele de mână.
În regulă? ați fost avertizați. Să o facem!
Această textură introductivă este incredibil de simplă de creat, dar poate fi utilizată pentru unele rezultate extrem de profesionale atunci când este utilizată corect.
De exemplu, verificați textura din spatele subsolului temei "qop" WordPress:
Nu-i rău? Vom începe cu o pânză neagră. Setați dimensiunea la 400 x 400 deocamdata. Dimensiunea poate fi modificată mai târziu, dar nu doriți să fie prea mică pentru că vom avea nevoie de puțin spațiu în jurul marginilor pentru a lucra cu.
Creați un strat nou și completați-l cu Negru culoare.
Mergeți și denumiți-o pe Layerul Negru doar de dragul organizării.
Acum vrem să aplicăm un filtru rapid pentru a stabili fundamentul texturii noastre liniare. Pe durata stratului negru, aplicați următorul filtru: Filtre> Schiță> Hârtie pentru apă.
Puteți ajusta setările până când aveți propriul efect personalizat dorit, însă textura demonstrativă folosește următoarele setări:
Setați modul de amestecare a stratului negru la Ecran astfel că numai liniile albe arată prin. În acest moment, puteți adăuga un dreptunghi de fundal pentru a stabili o culoare pentru textura dvs. Rețineți că puteți schimba culoarea în orice moment al acestui proces.
Nu putem vedea nimic altceva decât alb acum? astfel încât să adăugăm un dreptunghi simplu colorat și să-i numim culoarea de fundal. Am folosit culoarea # 242d34, dar nu ezitați să folosiți orice doriți.
Ahh, mult mai bine! Acum vedem textura noastră. E un pic cam plat. Deci, să adăugăm puțină profunzime texturii noastre - vom face acest lucru creând un strat nou și completat cu Black (din nou). Denumiți acest strat "alb" (veți vedea de ce în pașii următori).
Acum o să adăugăm Filtre> Schiță> Hârtie pentru apă efect din nou, dar de data aceasta vrem să adăugăm mult mai mult Luminozitate și Contrast setărilor:
Acum, inversați culorile pentru același strat (Imagine> Ajustări> Inversare) și setați modul de amestecare la Multiplica. Aduceți opacitatea stratului la aproximativ 90%, astfel încât efectul să nu fie prea abraziv.
Whallah! Nu prea bine?
Următorul pas este să trageți marginile acestui model, deoarece Photoshop tinde să obțină un pic mai greu în jurul marginilor. Decupați în jur de 50 de pixeli de la fiecare margine folosind A decupa instrument.
De ce am făcut asta? Deoarece Photoshop tinde să obțină puțină greutate în jurul marginilor filtrului de hârtie pentru apă, ceea ce înseamnă că dacă încercăm să o transformăm într-un model, vom obține "cusături" evidente. Decuparea de la muchie ne ajută să eliminăm aceste cusături vizibile atunci când mergem să le folosim ca pe un model sau pe web.
Pasul final este simplu - setați culoarea de fundal la culoarea dorită, ajustați opacitatea fiecărui strat de filtru până când atingeți nivelul dorit de textură, apoi faceți-o într-un model (Editare> Definire model). Totul este gata!
Și, produsul final ar trebui să arate astfel atunci când este folosit ca model:
Acest lucru ar putea fi un pic prea dramatic în ceea ce privește contrastul cu utilizarea (de obicei, formez intensitatea pentru tutoriale pentru a face efectele evidente), așa că nu ezitați să jucați cu opacitatea straturilor de textură pentru ao obține "just right" pentru propriul design special.
Pentru a personaliza acest efect: Principalele lucruri pe care s-ar putea să te intereseze în ajustarea sunt "lungimile fibrelor" ale filtrului de hârtie pentru apă și culoarea de fundal. În plus, poate fi, de asemenea, distractiv să mizerie în jurul cu scara modelului final. Odată ce ați recoltat, încercați să redimensionați întreaga imagine pentru a modifica densitatea texturii (și utilizați instrumentul Sharpen pentru a modifica cât de precis este).
Această textura următoare este probabil cea mai simplă dintre toate cele patru astăzi. Trei pași simpli vor completa efectul:
Mai întâi, creați un document nou (400 x 400) și desenați un dreptunghi colorat pe document. Vom folosi mai târziu pentru a regla culoarea modelului final.
Apoi, creați un strat nou, completați-l cu Black și adăugați filtrul: Filtru> Textură> Textură. Utilizați următoarele setări:
Setați modul de amestecare pe stratul respectiv pe Ecran.
Apoi, creați un nou strat, completați-l cu alb de această dată. Adăugați același filtru exact: Filtru> Textură> Textură. Utilizați următoarele setări:
Acum, setați modul de amestecare a stratului respectiv la Color Burn astfel încât să puteți vedea culoarea de fundal.
În cele din urmă, să ajustăm culoarea de fundal la ceva mai subtil. Rețineți că, pe măsură ce ajustați culoarea de fundal, este posibil să doriți să ajustați opacitatea și modurile de amestecare ale primelor două straturi până când efectul este așa cum doriți.
Modelul final, după cum se arată în demo:
Puteți crea modelul de aici (Editați> Define Pattern) sau puteți reda cu culoarea de fundal, opacitatea straturilor de filtrare și decuparea până când aveți un model care este perfect și se potrivește designului dvs..
Următoarea textură este puțin mai avansată, deci acordați o atenție specială dacă doriți să recreați acest efect.
Începeți cu un nou document (400 x 400) și începeți prin desenarea unui dreptunghi albastru (# 2b4891) ca fundal. Puteți alege de fapt orice culoare, dar suntem obișnuiți să vedem denim albastru, așa că vom rămâne cu asta pentru moment.
Apoi, creați un nou strat și Completati cu 50% Grey (puteți utiliza tasta rapidă Shift + Backspace / Ștergere). Dați-i numele stratului orizontal pentru moment.
Apoi, setați Prim plan și fundal color la alb-negru implicit apăsând D. Trebuie să adăugăm fundația modelului denim. Pe stratul nostru gri, aplicați filtrul: Filtru> Schiță> Model halftone.
Utilizați următoarele setări:
Acest lucru ar trebui să producă un model de linie de bază? dar denimul este "fuzzy", așa că vom dori să ne amestecăm un pic folosind un alt filtru: Filtru> Pixel> Mezzotint. Setați tipul la Puncte fine.
Acum creați o copie duplicată a acestui strat (Cntrl + J) și denumiți-o "Strat vertical".
Utilizați Free Transform Tool (Cntrl + T) să îl rotească 45 de grade și să-l scalzi atât de departe încât să se întâlnească cu fiecare colț al documentului nostru. Mi sa întâmplat să scump până la 145% în cazul în care încerci să îți potrivesc exact cu mine.
Nu vă faceți griji că scalarea modelului atât de mare va crea unele imperfecțiuni raster. Vrem de fapt asta. De fapt, continuați și adăugați o estompare suplimentară (Filtru> Gaussian Blur setat la 0,3) atât la acest strat, cât și la primul strat netransformat.
În cele din urmă, setați modul de amestecare pe stratul diagonal la Multiplu cu 70% opacitate -- și setați modul de amestecare pe stratul de benzi orizontale la Lumina slaba cu 60% opacitate.
Acest lucru completează efectul denim! Aveți posibilitatea să dărâmați cu culorile de fundal și apoi să faceți modelul (Editați> Definiți modelul).
Notă: Dacă observați cusături evidente în modelul dvs., va trebui să jucați un pic cu trunchiul. Trick-ul aici este să vă asigurați că nu există linii strălucitoare sau luminoase în mod natural în apropierea oricăruia dintre margini. Încercați câteva decupări diferite până când modelul este fără sudură.
Dacă ați urmat demo-ul scrisorii, puteți să decupați înălțimea documentului la 400px de 396px. Acest lucru va îndepărta cusăturile (de mai jos):
Whallah! Cum funcționează asta? Dacă vă amintiți din nou în primul nostru tutorial de tipar, ideea generală aici este că ultimii câțiva pixeli din partea dreaptă și din partea inferioară a modelului nostru vor fi întotdeauna legați de partea stângă și de sus a documentului. Decuparea celor 4 pixeli în acest caz ajută partea de jos de la partea de sus. Din moment ce dreapta și stânga se potrivesc deja, suntem bine să mergem!
În regulă! Am ajuns la textura finală a zilei. Până acum am angajat câteva tehnici destul de complicate, deci acest ultim pas va părea destul de simplu.
Creeaza o 200 x 240 document. Mergeți mai departe și trageți în cele trei straturi brute pe care le-am folosit pentru modelul denim (cele două straturi de textura + culoarea de fundal).
Grupați aceste straturi împreună (Ctrl + G) și setați o mască de 50 de grade pe întregul dosar al grupului. Dacă nu ați creat o mască de grup ca înainte, este ușor: Pur și simplu utilizați Rectangular Marquee instrument de selecție pentru a desena o selecție largă de 50px care umple documentul de sus în jos (vedeți Info pentru a verifica măsurarea). Apoi apăsați butonul "Add Vector Mask" din partea de jos a panoului de straturi:
De ce 50px? Deoarece, cu un document de 200px lățime, vom dori să se potrivească 4 dungi de 50px.
Apoi duplicați acest grup de straturi, mutați-l în partea dreaptă a primului grup, apoi (opțional) îl îndoiți orizontal pentru a crea un model diagonal opus.
Pentru a adăuga un anumit contrast în dungi, schimbați pur și simplu culoarea de fundal (modificările subtile sunt cele mai bune aici) la ceva mai luminos sau mai întunecat decât culoarea originală).
În cele din urmă, duplicați ambele grupuri de benzi și le deplasați în spațiul gol din documentul nostru.
Încă nu am observat - pentru a adăuga un interes vizual, să deconectăm măștile de grup pentru ultimele două dungi, apoi să mutăm straturile de 3 denimuri în interiorul peste 100 de pixeli pentru a crea un striat ușor diferit. Rezultatul final nu este dramatic diferit, dar oamenii care caută cusături în modelul dvs. vor fi aruncați de acest pas final.
Felicitări! Selectați Editați> Definiți modelul, și începeți să utilizați acest lucru în propriile proiecte. Ca un gând final, puteți face în mod evident mult mai mult cu acest lucru prin adăugarea propriilor personalizări. Exemplul de mai jos schimba culorile până la o nuanță brună și, de asemenea, a redus "tricotul" modelului prin reducerea dimensiunii imaginii. Consultați exemplul nostru final:
În regulă! Deci, acum ar trebui să aveți o înțelegere de bază suficient de bună pentru a vă crea propriile variante personalizate ale acestor modele de fibre sintetice - jucați-vă cu nivelurile, culorile, dimensiunile documentelor și multe altele, pentru a vă adăuga propria lor răsucire personală. Heck, puteți chiar să inversați umbrirea pentru a crea modele subtile, de culoare deschisă.
În următoarele părți ale acestei serii vă vom arăta cum să creați câteva modele avansate de textură pe bază de fotografii, modele mai bazate pe forme, modele transparente și chiar mai mult î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