Share
În următorul tutorial veți afla cum să creați o bară de navigare stilizată. Veți învăța cum să utilizați panoul Aspect pentru a modela o bară de navigare și cum să utilizați instrumentul Slice pentru a reduce și exporta imaginile astfel încât acestea să poată fi utilizate ca parte a unui site Web. Sa incepem!
Apăsați Command + N pentru a crea un document nou. Introduceți 1025 în caseta de lățime și 53 în caseta de înălțime, apoi faceți clic pe butonul Avansat. Selectați RGB, Ecran (72ppi) și asigurați-vă că caseta "Align New Objects to Pixel Grid" nu este bifată înainte de a da clic pe OK. Activați Grilă (Vizualizare> Afișare Grilă) și Glisați în Grilă (Vizualizare> Adăugare la Grilă).
Apoi, veți avea nevoie de o rețea la fiecare 5px. Accesați Edit> Preferences> Guides & Grid, introduceți 5 în caseta Gridline în fiecare casetă și 1 în caseta Subdiviziuni. De asemenea, puteți deschide panoul Informații (fereastră> Info) pentru o previzualizare live cu dimensiunea și poziția formelor. Nu uitați să înlocuiți unitatea de măsură pixelilor din Editare> Preferințe> Unitate> Generalități. Toate aceste opțiuni vor crește semnificativ viteza de lucru.
Alegeți instrumentul dreptunghi (M), creați o formă de 1025 pe 50px, umpleți-o cu gradientul liniar prezentat mai jos și mergeți la Efect> Stylă> Colțuri rotunjite. Introduceți o rază de 3 pixeli, faceți clic pe OK și mergeți la Object> Expand Appearance.
Pentru pasul următor veți avea nevoie de o grilă la fiecare 1px. Deci, mergeți la Edit> Preferences> Guides & Grid și introduceți 1 în caseta Gridline în fiecare casetă. Focalizați pe partea stângă a formei create în pasul anterior. Alegeți instrumentul Pen (P), desenați o cale verticală de 50 px și plasați-o după cum se arată în imaginea următoare. Adăugați un curs 1pt, negru pentru această cale, pentru a face mai ușor să observați.
Resetați calea verticală creată în pasul anterior și trageți-o cu 128px spre dreapta. Puteți să o faceți manual sau prin accesarea opțiunilor Object> Transformare> Mutare. Pur și simplu, introduceți 128 în caseta orizontală, apoi apăsați enter.
Resetați acea cale verticală și treceți la Efect> Distort & Transform> Transform. Introduceți datele afișate în imaginea de mai jos, faceți clic pe OK și accesați Object> Expand Appearance.
Selectați grupul de căi verticale create în pasul anterior împreună cu dreptunghiul rotunjit creat în al doilea pas, deschideți panoul Pathfinder și faceți clic pe butonul Divide. Treceți la panoul Straturi, selectați grupul rezultat și deselectați-l (Shift + Control + G). Continuați să focalizați pe panoul Straturi și denumiți formele de la "1" la "8" (începeți cu forma stângă).
Dezactivați Snap to Grid (Vizualizare> Snap to Grid), apoi mergeți la Edit> Preferences> General și asigurați-vă că Incrementarea tastaturii este setată la 1px. Selectați forma "1" și faceți două copii în față (Control + C> Control + F> Control + F). Selectați copia de sus și mutați-o 1px spre stânga utilizând săgeata stânga de pe tastatură. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Aduceți forma rezultată în față (Shift + Control + Pătrat drept), umpleți-o cu negru și schimbați modul de amestecare cu Overlay.
Selectați forma "1" și faceți două copii noi în față (Control + C> Control + F> Control + F). Concentrați-vă pe panoul Straturi, selectați copia de fund și mutați 1px spre dreapta utilizând săgeata din dreapta de pe tastatură. Resetați ambele copii și faceți clic pe butonul Minus Front din panoul Pathfinder. Aduceți forma rezultată în față (Shift + Control + Square Right Bracket), umpleți-o cu alb și schimbați modul de amestecare cu Overlay.
Resetați cele două forme create în ultimii doi pași și grupați-i (Control + G). Faceți o copie a acestui grup (Control + C> Control + F), selectați-o și faceți clic pe butonul Unite din panoul Pathfinder. Umpleți forma rezultată cu gradientul liniar prezentat în a doua imagine.
Deschideți panoul Transparență. Resetați forma și grupul creat în etapa anterioară, deschideți meniul derulant al panoului Transparență și faceți clic pe Faceți opacitatea Mască. În cele din urmă, grupul dvs. mascat ar trebui să arate ca în a doua imagine.
Resetați grupul mascat creat în etapa anterioară și accesați Obiect> Transformare> Mutare. Introduceți 128 în caseta Orizontală și faceți clic pe butonul Copiere. Evident, acest lucru va adăuga o copie a grupului dvs. de 128px la dreapta. Selectați această copie și repetați comanda Mutare. Continuați să repetați această tehnică până când aveți șapte grupuri mascate.
Activați Snap to Grid (Vizualizare> Snap to Grid). Alegeți instrumentul Rectangle (M), creați patru pătrate de 3px și plasați-le ca în imaginea următoare. De asemenea, completați-le cu alb-negru, după cum se arată mai jos. Selectați toate cele patru forme și pur și simplu trageți-le în interiorul panoului Swatches pentru a le transforma într-un model. După ce ați obținut modelul, puteți șterge cele patru pătrate din panoul Straturi.
Dezactivați grila (Vizualizare> Afișare grilă) și Glisați în grila (Vizualizați> Snap la rețea). Reveniți la forma "1". Selectați-l, focalizați pe panoul Aspect și adăugați o a doua umplere utilizând butonul Adăugați umplere nouă. Selectați-l, setați culoarea la R = 28 G = 117 B = 188 și schimbați modul de amestecare în Color Burn.
Resetați forma "1", focalizați pe panoul Aspect și adăugați un al treilea umplutură. Selectați-l, micșorați opacitatea la 15%, schimbați modul de amestecare la Soft Light și adăugați modelul făcut în etapa a douăsprezecea.
Resetați forma "1", focalizați pe panoul Aspect, asigurați-vă că nu este selectată nicio umplere sau cursă și mergeți la Efect> Stylize> Drop Shadow. Introduceți datele afișate în fereastra de sus, faceți clic pe OK și reveniți la Efect> Stylize> Drop Shadow. Introduceți datele afișate în fereastra mediană, faceți clic pe OK și treceți din nou la Efect> Stylize> Drop Shadow. Introduceți datele afișate în fereastra de jos și faceți clic pe OK.
Acum trebuie să copiați proprietățile folosite pentru forma "1" și să le lipiți pe celelalte forme. Iată cum puteți să o faceți cu ușurință. Mergeți la panoul Straturi, concentrați-vă pe partea dreaptă și veți observa că fiecare formă are un cerc gri. Se numește o pictogramă țintă. Țineți apăsată tasta Alt, dați clic pe pictograma țintă care reprezintă forma "1" și trageți pe cercul care reprezintă forma "2". Utilizați această tehnică pentru a adăuga aceleași proprietăți pentru celelalte șase forme.
Selectați forma "2", focalizați pe panoul Aspect și adăugați a patra umplere. Selectați-l, albiți-l, micșorați opacitatea la 50% și schimbați modul de amestecare la Soft Light. Acesta va fi modul de navigare pentru bara de navigare.
Prindeți instrumentul Tip (T) și textul, după cum se arată în imaginea următoare. Utilizați fontul Calibri cu o dimensiune de 15pt, setați stilul îngroșat și culoarea la R = 0 G = 86 B = 140. Asigurați-vă că textul dvs. este selectat și mergeți la Efect> Stylize> Drop Shadow. Introduceți datele afișate mai jos și faceți clic pe OK.
Acum, hai să tăiem acest meniu. Concentrați-vă pe grupul mascat stâng și selectați instrumentul Slice (Shift + K). Mai întâi, desenați o felie de 6 cu 53px de-a lungul formei "1", după cum se arată în imaginea următoare. Continuați cu instrumentul Slice (Shift + K) și desenați oa doua fâșie de 6 x 53 pixeli de-a lungul formei "2" așa cum se arată mai jos.
Acum, dacă aveți primele tăi felii, mergeți la Fișiere> Salvare pentru Web și dispozitive (Alt + Control + Shift + S). Selectați instrumentul de selectare a plantei (K) și faceți dublu clic pe partea stângă, cu 6 bucăți de 53 pixeli. Introduceți nav în caseta de nume, apoi apăsați OK.
Concentrați-vă pe cel de-al doilea 6 cu felie de 53 pixeli. Faceți dublu clic pe el, introduceți "nav.hoover" în secțiunea Nume și apăsați OK. Selectați PNG-24 din meniul derulant Presetare și faceți clic pe Salvați. Alegeți o locație pentru imaginile pe care urmează să le salvați, apoi faceți clic pe Salvați. Mergeți în acea locație și veți găsi un nou dosar cu o grămadă de imagini noi. Trageți "nav.png" și "nav.hoover.png" în afara dosarului, apoi ștergeți dosarul.
Reveniți la fișierul Ai, selectați instrumentul Slice (Shift + K) și desenați o felie de 2 x 53 pixeli de-a lungul grupului mascat stâng. Deplasați-vă la panoul Straturi și dezactivați vizibilitatea pentru toate formele, cu excepția grupului stâng, mascat.
Mergeți din nou la Fișiere> Salvare pentru Web și dispozitive (Alt + Control + Shift + S). Luați instrumentul de selectare a plantei (K) și faceți dublu clic pe noua felie creată în pasul anterior. Denumiți-o "separator" și faceți clic pe OK. Asigurați-vă că PNG-24 este încă selectat din meniul derulant Presetare și faceți clic pe Salvați. Din nou, alegeți o locație pentru imaginile pe care urmează să le salvați, apoi faceți clic pe OK. Mergeți în acea locație, deschideți noul dosar, trageți "divider.png" în afara dosarului, apoi ștergeți dosarul. În final, ar trebui să aveți trei imagini simple: "nav", "nav.hoover" și "divider.png".
În cele din urmă, puteți schimba cu ușurință culorile utilizate pentru bara de navigare. Pur și simplu înlocuiți culoarea folosită pentru text și cea de-a doua umplere cu unele dintre culorile prezentate în imaginile următoare.
Acum munca ta este făcută, așa ar trebui să arate.
Accentsconagua