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 modelelor de fundal care pot fi utilizate pe web (și în faza de proiectare) cu a treia ediție: Carbon Fiber Textures. Vom analiza modul de creare a unor modele profesionale de fibre de carbon, incepand cu o abordare cu vanilie obisnuita, si apoi luand aceleasi 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 primul post din seria dacă ați pierdut-o!
Astăzi este ziua a treia î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 textura eficientă din fibră de carbon, 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!
Fibra de bază din fibră de carbon este de fapt destul de darned simplu de creat. Există tone de tutoriale pentru acest model de bază acolo pe web, deci nu vom rupe niciun alt teren aici. Ceea ce este important în acest prim pas este acela de a ridica principiile de bază pe care le vom folosi în etapele mai avansate. Principalele trucuri sunt:
Să începem versiunea noastră de bază creând un document 4x4:
Apoi, apucați o selecție de fundal 2x4 px (afișat) și creați un strat nou din acesta (Ctrl + J):
Pe noul strat 2x4px, adăugăm un gradient de bază din panoul Straturi strat (faceți dublu clic pe strat sau faceți clic dreapta pe acesta și selectați Stiluri de strat). Gradientul pe care îl vom adăuga va rula de jos în sus și va utiliza culorile Negre (# 000000) în partea de jos a gri închis (# 4f4f4f) deasupra:
Acest gradient va fi fundamentul fibrei de carbon? astfel încât să vă puteți întoarce întotdeauna la acest pas pentru a schimba rezultatul produsului final.
Apoi, să luăm o selecție de 1x4 pixeli a stratului de gradient folosind instrumentul Rectangular Marquee și să creăm un strat nou tăind-o (clic dreapta> Layer via Cut).
Acum setați opacitatea pe acest al doilea strat la 92%.
De ce? Încercăm să creăm variante foarte subtile în tonurile gri, astfel încât fibra de carbon pare să aibă o sursă de lumină credibilă. Evident, nu există o adevărată sursă de lumină și nu putem crea una fără a avea o imagine masivă (care învinge punctul unui model web), dar schimbări mici în umbrirea vor înșela ochiul în gândirea că există adâncime.
Mergeți împreună cele două straturi 1x4 px (de mai sus) și apoi, utilizând din nou instrumentul de marcare, selectați o selecție 2x2 din partea superioară a stratului nou:
Apoi, pentru a crea efectul de model, schimbați comanda celor două plăci 2x2 px de sus în jos și invers:
Modelul nostru este acum complet! Salvați-l simplu în biblioteca de modele folosind funcția Editați> Definiți modelul instrument. Dați-i un nume de alegere, iar acum va apărea ori de câte ori utilizați Stiluri de strat> Suprapunere model bibliotecă.
În regulă! Deci avem o fibră de carbon foarte de bază completă? să trecem la pasul următor, unde vom crea câteva modificări în această idee.
Fibra de carbon de bază poate fi manipulată destul de ușor. În acest scurt exemplu, vom folosi același proces și aceleași principii pentru a crea o textură fibră ușor mai mare.
Notă: În mod intenționat, voi trece peste câteva capturi de ecran repetate pe care le-am revizuit în ultimul pas, așa că voi sublinia doar tehnici noi.
Începeți acest timp cu un document de 8 x 8 pixeli.
În primul model de fibră de carbon pe care l-am creat, am făcut o scurtătură creând un singur gradient pentru întreaga stânga a documentului. Acest lucru a funcționat pentru că documentul a fost de numai 4x4 și într-adevăr nu se putea ocupa de mai multe detalii decât am trecut peste.
În cea de-a doua versiune vom obține un pic mai meticulos cu forma noastră. Începeți pe documentul dvs. adăugând un dreptunghi 4x4:
Adăugați un alt dreptunghi 4x4 pentru spațiul de fund (l-am colorat pentru a putea vedea mai bine):
Acum trebuie să adăugăm un gradient subtil în piața de jos. Amintiți-vă, regiunea din stânga jos este întunecată? aproape negru, deci folosiți un gradient foarte întunecat:
Repetați treapta de gradient pentru stratul superior de 4x4, dar de data aceasta va fi un gradient ușor:
Duplicați ambele straturi de 4x4 și executați trucul "fliperoo" în care schimbăm poziția fiecărui pătrat în colțurile opuse ale documentului.
Acum avem modelul nostru de fibre de carbon de bază, dar să adăugăm un nivel de personalizare prin adăugarea unui nivel de ajustare a nivelurilor. Faceți acest lucru din meniul Straturi din partea de sus; Căutați butonul "Nivel> Nivel nou de ajustare> Niveluri".
Nivelul de ajustare a nivelurilor ne va permite să ne jucăm cu luminozitatea și contrastul modelului de fibre. Când ați terminat, definiți modelul (Editați> Define Pattern) și veți fi setați să mergeți. Iată cum va arăta modelul dvs.:
Notă: Când încercați să utilizați instrumentul Definiți modelul, asigurați-vă că nu sunteți selectat în stratul de ajustare? pentru anumite motive, Photoshop nu vă va lăsa să utilizați "Define Pattern" atunci când vă aflați pe straturi ca acesta (acesta va fi lustruit până când veți selecta un alt strat).
Acum avem un al doilea model de fibră de carbon complet! Puteți folosi același proces de bază de mai multe ori pentru a vă crea propriile variante. Încercați diferite dimensiuni ale documentelor, adăugând culori, ajustând contrastul gradienților dvs. și orice altceva ce vă puteți gândi pentru a crea efecte unice.
Bine, deci ai pus jos elementele de bază? grozav! În acest pas următor, vom crea un model de fibră de carbon pe diagonală, folosind aceleași principii de bază pe care le-am folosit în primele două etape - dar vom folosi o răsucire radicală radicală în aspectul grilei modelului nostru pentru a crea o efect unic.
Începeți cu un document de 30 x 30 pixeli. Odată ce ați terminat acest pas, puteți repeta procesul folosind o dimensiune diferită a documentului, dar acesta ar trebui să fie un bun punct de plecare.
Vom lucra în celulele "5px" ca regulă generală de bază? astfel încât să începem modelul nostru prin crearea unui dreptunghi care este de 5px înălțime de 15px lungime.
Apoi, adăugați un gradient peste prima noastră formă:
Acum adăugați o formă pătrată de 5px și 5px cu culoarea # 191919 direct lângă forma noastră de dreptunghi.
Bacsis: Utilizați instrumentul "Convert Point Tool" (sub panoul Instrument Pen) în care trebuie să ajustați sau să ascuțiți orice margine. Formele dvs. ar trebui să se termine exact pe pixeli definiți, să nu apară niciun "pixeli jumătate".
Ceea ce avem aici este modelul nostru de bază pe care îl vom repeta de câteva ori? așadar, să transformăm aceste două forme într-un singur "obiect inteligent", astfel încât să ne putem întoarce întotdeauna la ele pentru a edita gradientul.
Notă: Puteți întotdeauna să vă întoarceți și să editați obiectele inteligente făcând clic dreapta pe strat și selectând "Editare conținut". Aceasta va edita fiecare instanță a obiectului inteligent? care face modificări rapide și ușoare atunci când aveți 10 sau mai multe duplicate plutitoare în jurul valorii.
Apoi, trebuie să duplicăm obiectul inteligent și să îl deplasăm cu 5px și spre stânga cu 5px.
Repetați același proces "Duplicat, apoi Nudge" mereu până când ați acoperit documentul. Consultați captura de ecran dacă se pierde, dar ar trebui să existe întotdeauna o unitate de măsură de 5 pixeli între toate părțile importante.
Acum, să adăugăm un strat de culoare de fundal. Am folosit un dreptunghi simplu pentru asta - setați culoarea la # 1e1e1e:
În cele din urmă, doar pentru a fi în siguranță, permiteți adăugarea unuia dintre acele niveluri de ajustare a nivelului de încredere, astfel încât să putem fi în siguranță cu întunericul și contrastul în zbor.
Whallah! Acum puteți utiliza din nou instrumentul Definire model și utilizați modelul oriunde doriți, cum ar fi:
Pentru ultimul pas, vom folosi din nou aceleași principii de bază? dar de data aceasta vom întoarce lucrurile cu 45 de grade pentru a crea un alt efect unic de fibră de carbon.
Acest model final este, de fapt, cel mai ușor dintre toate de a stăpâni, deci ar trebui să fie un cakewalk dacă ați reușit până acum!
Începeți cu un document de 8x8 și adăugați o culoare de fundal. Am folosit Negru (# 000000), puteți folosi orice doriți? păstrați pur și simplu culoarea exactă pentru următorul pas:
Acum adăugați un dreptunghi, măsurat la 4px lățime de 8px înălțime:
Totul ar trebui să fie familiar acum - adăugați un gradient subtil - culoarea finală ar trebui să se potrivească cu culoarea de fundal (gradientul meu aici este # 555555 la # 000000). Rețineți unghiul - setăm să fie 135 (sau -45 în funcție de modul în care doriți) astfel încât să se potrivească bine atunci când rotim stratul:
Bingo! Avem modelul nostru final? ajustați dimensiunea documentului și culorile gradientului pentru a obține propriile variații personalizate:
? și aici este:
Î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 de carbon - jucați în jur cu formele, culorile, dimensiunile documentelor și multe altele pentru a vă adăuga propria dvs. 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 texturate avansate, modele mai 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