Share
Urmați acest tutorial și aflați cum să creați un set de etichete lucioase și, de asemenea, o stare de răsturnare. Vom folosi mai multe apariții și perii Art personalizate pentru a obține aspectul lucios și când vom termina, vom analiza opțiunile Salvare pentru Web. Vom vorbi despre setări și de a compara diferite formate de fișiere pentru a obține cea mai bună imagine pentru pagina dvs. web. Multe variante de culori vă așteaptă, așa că să începem!
Mai întâi deschideți un nou document web. Luați instrumentul dreptunghiului (M), faceți clic oriunde pe tabloul de bord pentru a deschide fereastra dreptunghiulară și introduceți dimensiunile afișate. Cu acest dreptunghi selectat, mergeți la meniul Obiect> Cale> Adăugați puncte de ancorare. Ca rezultat veți obține un punct suplimentar în mijlocul fiecărei părți. Acum, selectați utilizând Instrumentul de selecție directă (A) numai punctul de jos, accesați meniul Obiect> Transformare> Mutare, sub Tip vertical, minus 55 px și apăsați OK.
De asemenea, folosind Instrumentul de selecție directă (A) și în timp ce apăsați tasta Shift, selectați cele două puncte indicate apoi mergeți la meniul File> Scripts> Round Any Corner. Rulați scriptul și selectați un Radius 10. Dacă nu ați instalat încă acest script, mergeți aici și obțineți-l.
Acum, selectați punctul din vârf și rulați scriptul din nou. De data aceasta selectați un Radius 15.
Umpleți forma etichetei cu gradientul liniar afișat și schimbați unghiul la minus 90 de grade. Având acest atribut de umplere selectat în panoul Aspect, apăsați pictograma Duplicare element selectat din partea de jos și completați obțineți oa doua umplere. Înlocuiți gradientul albastru cu un model numit Mezzotint Dot pe care îl puteți găsi în meniul Swatch Libraries sub Patterns> Basic Graphics> Basic Graphics_Textures. Setați modelul la ecran și reduceți Opacitatea la 70%.
Apoi, selectați un curs albastru, apoi mergeți la meniul Efect> Cale> Cale de decalare și aplicați o deplasare minus 7 px. În panoul Stroke verificați opțiunea Line Dashed și selectați o linie de 5 pt.
Adăugați un alt curs, apăsând pictograma Duplicare selectată pentru element în partea de jos a panoului Aspect și modificați culoarea de la albastru la alb. Valorile liniuței și valorii offset rămân aceleași. Accesați meniul Efect> Distort & Transformare> Transformare și în secțiunea Mutați în meniul Orizontal selectați minus 1 px. Schimbați modul de amestecare la lumină ușoară, dar numai pentru acest curs albe.
Acum, să creăm o nouă perie Art. Luați instrumentul Ellipse (L), faceți clic oriunde pe tabloul de bord pentru a deschide fereastra Elipsă și introduceți dimensiunile afișate. Utilizați Instrumentul de selecție directă (A) pentru a selecta doar punctele din stânga și din dreapta acestei elipse și faceți clic pe opțiunea Convertește punctele de ancorare selectate la colț. Selectați forma rezultată, apoi mergeți la meniul Obiecte> Cale> Cale de decalare și aplicați un decalaj minus 0,7 px pentru a obține o formă mai mică în mijloc.
Ambele forme sunt pline cu alb. Reduceți Opacitatea pentru forma mai mare la 0%, apoi selectați-le pe ambele și accesați meniul Obiect> Blend> Blend Options. Acolo, selectați 25 de pași specificați și apăsați OK apoi reveniți la meniul Obiect> Blend> Marcați. Glisați grupul de amestec rezultat în panoul de perforețe și alegeți Pensulă nouă pentru artă.
Copiați și lipiți în față forma de etichetă, îndepărtați umplutura de gradient și dați-i un clic. Trebuie să tăiem această formă, deci să luăm Instrumentul pentru foarfece (C) și să dăm click pe punctele indicate. Mențineți numai cele trei căi (negru, roșu și purpuriu) și ștergeți celelalte segmente. Îndoițiți aceste căi cu peria de artă salvată la pasul anterior, apoi setați greutățile Stroke așa cum este indicat. Modificați modul Blending la Overlay pentru toate cele trei.
Acum, să adăugăm umbra. Duplicați gradientul de umplere apoi schimbați culoarea în negru. Cu acest atribut selectat, mergeți la meniul Effect> Warp și aplicați efectul Inflate pentru a face partea superioară mai mare (imaginea 1). Apoi, mergeți la meniul Efecte> Blur> Gaussian Blur și aplicați un rază de 6 px (imaginea 2) apoi mergeți la meniul Effect> Distort & Transform> Transform. Alegeți să mutați această umplere neagră, minus 5 px vertical, apoi apăsați OK (3) și setați modul de amestecare pe Soft Light (Lumină moale) (4).
Iată setările pentru efectele Inflate și Transform:
La acest pas vom masca partea de sus a etichetei. Luați instrumentul Rectangle (M) și trageți un dreptunghi peste etichetă ca în imagine. Acum, selectați ambele forme (dreptunghi + etichetă) și accesați meniul Obiecte> Masca de tăiere> Marcați.
Apoi, luați instrumentul Ellipse (L) și desenați două elipse având dimensiunile indicate. Asigurați-vă că acestea sunt centrate apoi puneți-le în partea de sus a etichetei. Punctele de ancorare din stânga și din dreapta ale elipsei trebuie să fie aliniate cu dreptunghiul utilizat pentru mascarea mai devreme. Ambele elipse sunt umplute cu negru, doar că cel mai mare are opacitatea setată la 0%. Selectați-le apoi mergeți la meniul Obiect> Blend> Blend Options și selectați 30 de pași specificați. Apoi, reveniți la meniul Obiecte> Blend și alegeți Efectuați. Grupul de amestecuri rezultat ar trebui să fie în spatele etichetei.
Trebuie să facem o altă mască. Desenați cu instrumentul Rectangle (M) un dreptunghi ca cel negru din partea de jos și trimiteți-l în spatele etichetei, dar în fața grupului Blend. Înainte de a continua, aliniați-l în partea de sus cu celălalt dreptunghi utilizat anterior. Acum, selectați grupul Blend și acest dreptunghi și accesați meniul Object> Mască de tăiere> Make.
Luați Instrumentul Pen (P) sau Instrumentul pentru Segmente de Linie (\) și trageți o cale dreaptă exact pe marginea superioară a etichetei, ca în cele de mai jos. Împingeți-l cu peria Art salvată la pasul 5 și setați greutatea la 0,25 pt. Reduceți opacitatea la 80%.
Trageți o altă cale dreaptă peste etichetă și o trageți cu o perie de artă numită Dry Brush 5 pe care o puteți găsi în meniul Brush Libraries sub Artistic> Artistic_Paintbrush. Setați greutatea Stroke la 1,5 pt apoi selectați Expand Appeare and Ungroup din meniul Object. Umpleți forma rezultată cu gradientul liniar prezentat și setați unghiul la 90 de grade.
Copiați și lipiți în fața formei de etichetă și, înainte de a continua, ștergeți toate aparițiile existente. Selectați forma obținută la pasul anterior și copia etichetei, care trebuie să fie în față și să accesați meniul Object> Mask Clipping> Make (imagine 1). Pentru a obține aspectul lucios, schimbați modul de amestecare la ecran și reduceți opacitatea la 70% pentru forma obținută la pasul anterior (imaginea 2). Dacă credeți că marginile sunt prea clare, puteți aplica un Blur Gaussian de 1 px (imaginea 3).
Desenați un triunghi mic și apoi mergeți la meniul File> Scripts> Round Any Corner. Rulați scriptul și selectați un Radius 5.
Puneți triunghiul în partea de jos a etichetei și selectați culoarea albastră ca culoarea de umplere (imaginea 1). Accesați meniul Effect> Stylize și aplicați efectul Inner Glow (2), apoi aplicați efectul Drop Shadow (3) utilizând setările afișate.
Ultimul lucru pe care trebuie să-l faceți este textul. Luați Instrumentul Tip (T) și scrieți un text și folosiți un font numit Devinne Swash pe care îl puteți găsi aici. Selectați Expand din meniul Obiect pentru a transforma textul în forme și pentru a păstra umplutura neagră. Accesați meniul Efect> Stylize și aplicați efectul Drop Shadow folosind setările afișate. Schimbați modul de amestecare la Overlay.
În acest moment eticheta este gata și vom continua cu starea de răsturnare.
Faceți o copie a etichetei și vom schimba doar câteva lucruri. Unele forme sunt ascunse în următoarele imagini și vom vorbi despre ele la momentul potrivit. Să ne concentrăm asupra formei etichetei și să schimbăm mai întâi umplutura de gradient. Modificați, de asemenea, umbra albastrului utilizat pentru primul curs.
Acum vom modifica umbra. Faceți dublu clic pe Gaussian Blur în panoul Aspect pentru a deschide fereastra Gaussian Blur și a reduce raza de la 6 la 4 px. Apoi, faceți dublu clic pe efectul Inflate aplicat pentru a deschide fereastra Options Warp și modificați valoarea Bend de la 5 la minus 5%.
Selectați umplutura de gradient în panoul Aspect și apăsați pictograma Duplicați elementul selectat din partea de jos. În consecință, veți primi o altă completare de mai sus. Păstrați același gradient și mergeți la meniul Efecte> Cale> Cale de decalare și aplicați o deplasare minus 6,5 px. Apoi, accesați meniul Effect> Stylize și aplicați efectul Inner Glow utilizând setările afișate.
Să creăm o nouă perie de artă similară cu cea salvată la pasul 5. Folosiți instrumentul Ellipse (L) pentru a desena o elipsă plană de 100 x 3 px, apoi transformați punctele stânga și dreapta de la puncte netede la colț folosind Convertizorul punctelor de ancorare selectate colț opțiune. Accesați meniul Obiecte> Cale> Cale de decalare și aplicați o deplasare minus 1,2 px pentru a obține forma mai mică în centru. Reduceți Opacitatea pentru elipse mai mari la 0%, apoi selectați-le pe ambele și accesați meniul Obiect> Blend> Blend Options. Alegeți 25 de pași specifici, apoi reveniți la meniul Obiect> Blend> Marcați. Glisați grupul de amestec rezultat în panoul de perforețe și selectați Perie de artă nouă.
Acum, aplicați cele trei căi cu noua perie Art. Setați greutatea la 0,25 pt și modul de amestecare la Lumină moale pentru toate cele trei.
În acest caz dorim ca forma lucioasă să fie mai puțin vizibilă, reducând astfel Opacitatea de la 70 la 25%.
Modificați nuanța albastră utilizată pentru a umple triunghiul, apoi faceți dublu clic pe efectul Drop Shadow aplicat în panoul Aspect. În fereastră reduceți opacitatea de la 80 la 50%. Efectul Inner Glow rămâne același.
Pentru text, înlocuiți umplutura neagră cu albastru, apoi schimbați modul de amestecare din Overlay înapoi la Normal și reduceți opacitatea la 80%.
Iată starea finală de răsturnare a etichetei:
Acum că totul este gata, vom trece la salvarea lor pentru web. Luați instrumentul dreptunghiului (M) și trageți un dreptunghi în jurul etichetei, apoi mergeți la meniul Obiect> Zona de decupare> Marcați. Veți obține același rezultat dacă utilizați instrumentul Crop Area sau Instrumentul Artboard (Shift + O).
Accesați meniul Fișier> Salvare pentru Web și dispozitive. Această fereastră oferă patru moduri de a compara eticheta originală cu cea pe care o vom optimiza: Original, Optimizat, 2-Up și 4-Up. Cred că cea mai bună este vizualizarea 4-Up deoarece poți să te joci cu setări diferite, să testezi patru versiuni ale etichetei, apoi să alegi cel mai bun bazat pe dimensiunea fișierului și timpul de descărcare. În partea din stânga sus sunt instrumentele, din colțul din dreapta sus puteți selecta o altă viteză de descărcare, iar în colțul din dreapta jos aveți opțiunea de a previzualiza imaginea din browserul implicit.
Acum, să schimbăm câteva setări și să le comparăm. Din cele șapte formate de fișiere disponibile pentru salvare, vom încerca doar JPEG, PNG-8 și PNG-24. Formatul GIF este cel mai potrivit pentru imaginile cu zone plate de culoare, mai degrabă decât pentru cele cu umpluturi de gradient și detalii ca aceste etichete. Am incercat si nu au aratat prea bine.
Primul format este JPEG. Cu toate că, cu cât calitatea este mai slabă, cu atât dimensiunea fișierului este mai mică, nu trebuie să scăpați prea mult calitatea. Pentru o calitate de 60%, dimensiunea fișierului este de 7,77K, dar eticheta începe să nu arate atât de bine și pentru maximum (100% calitate) dimensiunea fișierului este 26.11K (!!). 70% este bine. Dacă bifați opțiunea Optimizată, reducerea dimensiunii fișierului este foarte mică, prin urmare, o să omitem de această dată. Verificați progresiv dacă doriți ca imaginea să se încarce.
Dacă știți exact care va fi culoarea de fundal, puteți alege o culoare mată. Fundalul va fi umplut cu culoarea selectată, în acest caz roz și imaginea se va comporta ca un GIF transparent, dar folosind în continuare milioane de culori pe care JPEG-urile le pot afișa în avantajul nostru. Dimensiunea fișierului va fi însă ceva mai mare.
Doar pentru curiozitate am încercat formatul PNG-8 și puteți vedea mai jos setările diferite. Dacă alegeți Selectiv, Illustrator alege culorile pe care ochiul le poate vedea, dar include nuanțe mai colorate. Alternativele sunt: Perceptual (culorile văd ochii cel mai bun) și Adaptive (culorile care sunt de fapt în imagine). Să vorbim despre Dither. Aceasta distribuie pixeli de culori diferite una lângă cealaltă pentru a face ochiul să creadă că vede mai multe culori care există de fapt în imagine. Dezavantajul este că mărește dimensiunea fișierului, după cum puteți vedea mai jos, 0% dither vs. 100% dither. Intercalat este echivalentul Progressive din format JPEG. Cu toate acestea, niciuna dintre imagini nu arata bine, asa ca vom trece la urmatorul format.
Veți obține o imagine mai bună dacă selectați o culoare mată, în cazul în care știți exact care va fi culoarea de fundal a paginii web. De asemenea, selectați Fără transparență.
De departe cel mai bun rezultat va fi obținut cu formatul PNG-24, deși dimensiunea fișierului este destul de mare. Din cauza umbrei din jurul etichetei, trebuie să verificați opțiunea Transparență.
În acest moment, puteți previzualiza eticheta într-un browser apăsând pictograma prezentată la pasul 24. Veți primi, de asemenea, un cod HTML pe care îl puteți adăuga la pagina dvs. de Web.
Dacă ați decis asupra unui anumit format, apăsați butonul Salvare, selectați Numai imagini și un dosar de destinație, apoi apăsați din nou pe Salvare.
Repetați acest proces pentru starea de răsturnare a etichetei. În imaginea de mai jos puteți vedea cele trei versiuni pe care le-am ales.
Acesta este dosarul cu imaginile salvate și în acest moment le puteți utiliza după cum doriți.
Ca un bonus aici sunt câteva variații de culoare ale etichetei. Tot ce trebuie sa faceti este sa schimbati cateva lucruri cum ar fi: umplutura de gradient pentru forma etichetei, culoarea stroke punctata, gradientul pentru forma lucioasa si culoarea de umplere pentru triunghi. Asta e!
Aceasta este eticheta verde:
Aici este eticheta purpurie:
versiunea portocalie ...
roșu…
și galben:
Accentsconagua