Share
Astăzi vom merge prin crearea propriei dvs. vectori Buddy Icons cu un bonus frumos - un set gratuit de icoane Envato ™ Marketplace pentru a fi utilizate pe site-ul dvs.!
Despre autor: Orman Clark este un Web Designer din Marea Britanie, specializat în pixeli drăguți și dezvoltări front-end. El își petrece cea mai mare parte a timpului proiectând teme WordPress și alte resurse gratuite pentru designeri la PremiumPixels.com. Fiți la curent cu Orman și PremiumPixels pe Twitter, Dribbble și Forrst.
Deschideți Adobe Illustrator și creați un document nou cu următoarele setări: 800x600 pixeli, 72dpi, culoare RGB, unități în pixeli și un fundal alb
Cu noul dvs. document creat, deschideți paleta Straturi accesând fereastra> Straturi dacă nu este deja vizibilă și creați 4 straturi noi. Apelați-le "bază", "pictogramă", "lumină" și "suprapunere"
Lucrând pe stratul "de bază" pe care tocmai l-ați creat, selectați Instrumentul rotunjit dreptunghi, alegeți o culoare gri deschis și faceți clic oriunde pe pânză. În caseta de dialog care apare, selectați următoarele: Lățimea "42px", Înălțimea "42px", Rândul de colț "10px" și faceți clic pe OK.
Asigurați-vă că vă aflați în stratul "lumină", selectați încă o dată instrumentul Rounded Rectangle, selectați un gri mai închis și faceți clic pe pânză. De data aceasta alegeți: Lățimea "38px", Înălțimea "38px", Radiajul colț "8px" și faceți clic pe OK.
Păstrați pe stratul "lumină", selectați Instrumentul rotunjit dreptunghi pentru o ultimă oară, selectați un gri chiar mai întunecat și faceți clic pe pânză. De această dată alegeți: Lățimea "34px", Înălțimea "34px", Raza colțurilor "6px" și faceți clic pe OK.
Țineți apăsată tasta Shift și faceți clic pe cele două dreptunghiuri cele mai interioare pentru a le selecta pe amândouă. Cu ambele acestea selectați paleta Pathfinder deschizând fereastra> Pathfinder dacă nu este deja vizibilă și faceți clic pe pictograma "Minus Front". Acest lucru vă va lăsa cu un dreptunghi gol.
Cu dreptunghiul gol selectat, trageți spre paleta Gradient (Window> Gradient) și selectați un gradient liniar, de la alb la alb, setat la 90 de grade, cu ancora de gradient stâng setată la opacitate 0%, ancorarea corectă pentru gradient setată la 80% opacitate și localizarea gradientului la 80%
Deschideți paleta Transparență (fereastră> Transparență) și setați Modul de amestecare pe "Lumină ușoară".
Treceți la stratul "suprapus", alegeți orice culoare și creați încă un dreptunghi rotunjit folosind: Lățimea "38px", Înălțimea "38px", Raza de colț "8px". Utilizând instrumentul Elipse, creați o elipsă și poziționați-o peste dreptunghi, după cum se arată.
Țineți apăsată tasta Shift și faceți clic pe elipsă și dreptunghi pentru a le selecta pe ambele. Utilizând paleta Pathfinder ca mai înainte, faceți clic pe pictograma "Minus Front". Acest lucru vă va lăsa în forma suprapunerii.
Cu forma de suprapunere selectată, treceți pe paleta Gradient și selectați un gradient liniar, de la alb la alb, setat la 0 grade, cu ancora gradientului stâng setat la 25% opacitate, ancorarea gradientului drept setată la 0%, și gradient locație la 50%. Setați Modul de amestecare în "Lumină ușoară".
Credeți sau nu, acum suntem terminați cu configurarea de bază și acum aveți libertatea de a juca cu culoarea!
Acum că am terminat cu configurarea de bază, putem începe să facem icoane individuale. De exemplu, voi merge prin crearea unei pictograme Vimeo. Scopul aici este să vă arătați cât de ușor este să creați propria pictogramă după ce ați configurat un șablon de bază!
Creați două mostre noi făcând clic pe pictograma "Swatch New" din paleta Swatches (Window> Swatches). Definiți eșantioanele după cum urmează:
Mergeți înapoi la stratul "bază", selectați dreptunghiul de bază și aplicați un gradient folosind noi elemente de gradient pe care tocmai le-am creat.
Din fericire, sigla Vimeo se bazează pe fontul Black Rose. Descărcați fontul și tastați litera "v" asigurați-vă că lucrați în stratul "icon". Mi-am scris textul la 55pt cu o culoare foarte deschisă. Transformați textul în contururi (Tip> Creare contururi) și poziționați v în centrul dreptunghiului.
Selectați forma logo-ului și apăsați CTRL / CMD + C pentru a face o copie. Apăsați CTRL / CMD + B pentru a lipi copia din spatele originalului. Cu forma selectată încă copiată, apăsați enter pentru a regla poziționarea. Modificați poziționarea orizontală la 0,5px și poziționarea verticală la -0,5px și faceți clic pe OK.
Modificați culoarea formei copiate în negru, setați Modul de amestecare la "Lumină moale" și modificați opacitatea la 50%
Un pas opțional ar putea fi crearea unei umbre pentru întreaga pictogramă. Lucrând în stratul "bază", creați o elipsă mică la poalele pictogramei. Completați această pictogramă cu un gradient radial, de la negru la negru, setat la 0 grade, cu ancora gradientului stâng setat la 60% opacitate, ancorarea corectă a gradientului setată la 0%, raportul de aspect setat la 8% și locația de gradient la 60%.
Cam despre asta e! Urmând liniile directoare de bază stabilite în acest tutorial puteți crea cu ușurință propriile icoane scalabile pentru aproape orice aplicație sau site. Doar deschideți șablonul icoanei și plasați propriul logo!
Deoarece acest tutorial este pentru Envato ™, m-am gândit să-mi dau timp pentru a crea un set de BuddyIcons pentru piețele Envato ™. Sunt incluse în pachet pictogramele pentru ThemeForest, GraphicRiver, AudioJungle, ActiveDen, VideoHive, 3DOcean și CodeCanyon. Brandon (editorul site-ului aici) chiar a luat câteva minute să urmeze tutorialul și să-și creeze propria contribuție: 2 flashy Webdesigntuts + icons.
Pachetul conține pictogramele în format transparent .png în trei dimensiuni; 32x32px, 64x64px, 128x128px împreună cu lucrările originale (.ai)
Lucru frumos de a avea propriul set de BuddyIcons este că funcționează atât de bine atunci când vine vorba de integrarea social-media și a altor legături în propria dvs. desene sau modele. Fiecare pictogramă este uniformă și puteți să o utilizați într-o varietate de situații. Mai jos sunt doar câteva idei rapide:
Când luați în considerare conceptul de icoană din punct de vedere teoretic, există destul de puține beneficii pentru utilizarea unui set uniform, în loc să folosiți bucăți de biți din toate locurile. Icoanele atrag atenția spectatorilor, încurajează accesul prin clicuri și sunt o modalitate excelentă de a aduce un design de culoare și stil strălucitor. Un set de pictograme uniforme poate merge cu un pas mai departe, prin crearea unui element coerent, echilibrat și artistic la un design. Folosirea mai multor icoane într-un singur loc poate chiar ajuta la crearea unui site ca și cum ar fi activ și implicat în comunitate ... cu atât mai mult motiv pentru a include un pic de dragoste BuddyIcon undeva pe site.
Asta este tot pentru acum; Sperăm că v-ați bucurat de tutorial și freebie! Puteți verifica setul complet BuddyIcon fără pictogramele exclusive Envato ™ la PremiumPixels. Asigurați-vă că verificați aici (sau abonați) la Webdesigntuts + pentru mai mulți extraordinari de mare ca acesta în viitor!
Accentsconagua