Share
I dag skal vi gå gjennom etableringen av dine egne vektorbaserte Buddy-ikoner med en fin bonus - et gratis sett med Envato ™ Marketplace-ikoner for bruk på ditt eget nettsted!
Om forfatteren: Orman Clark er en britisk basert webdesigner som spesialiserer seg på flotte piksler og front-end-utvikling. Han tilbringer mesteparten av sin tid på å designe WordPress-temaer og andre gratis ressurser for designere på PremiumPixels.com. Hold deg oppdatert med Orman og PremiumPixels på Twitter, Dribbble og Forrst.
Åpne Adobe Illustrator og opprett et nytt dokument med følgende innstillinger: 800x600 piksler, 72dpi, RGB-farge, enheter i piksler og en hvit bakgrunn
Med ditt nye dokument opprettet, åpner du paletten Lag ved å gå til Vindu> Lag hvis det ikke allerede er synlig, og opprett 4 nye lag. Kall dem "base", "icon", "light" og "overlay"
Arbeide med "base" -laget du nettopp har opprettet, velg det avrundede rektangelverktøyet, velg en lysegrå farge, og klikk hvor som helst på lerretet ditt. I dialogboksen som vises, velg følgende: Bredde "42px", Høyde "42px", Hjørne Radius "10px" og klikk OK.
Forsikre deg om at du er på "lys" -laget, velg det avrundede rektangelverktøyet igjen, velg et mørkere grå, og klikk på lerretet. Denne gangen velger du: Bredde "38px", Høyde "38px", Hjørne Radius "8px" og klikk OK.
Hold på "lys" -laget, velg det avrundede rektangelverktøyet en sluttid, velg en enda mørkere grå, og klikk på lerretet. Denne gangen velger du: Bredde "34px", Høyde "34px", Hjørne Radius "6px" og klikk OK.
Hold nede Skift og klikk de to innerste rektanglene for å velge dem begge. Med dem begge valgte åpne Pathfinder-paletten ved å gå til Vindu> Pathfinder hvis den ikke allerede er synlig og klikk på "Minus Front" -ikonet. Dette vil gi deg et hul rektangel.
Med det valgte hule rektangelet, gå over til Gradient-paletten (Vindu> Gradient) og velg en lineær gradient, fra hvit til hvit, satt til 90 grader, med venstre gradientanker satt til 0% opasitet, høyre gradientanker satt til 80% opasitet og gradientplassering ved 80%
Åpne gjennomsiktighetspaletten (Vindu> Gjennomsiktighet) og angi blandemodus til "mykt lys".
Bytt til "overlegg" -laget, velg hvilken som helst farge, og opprett enda et avrundet rektangel ved hjelp av: Bredde "38px", Høyde "38px", Hjørne Radius "8px". Bruk Elipse-verktøyet, opprett en elipse og plasser den over rektangelet som vist.
Hold nede Skift og klikk på elip og rektangel for å velge dem begge. Bruk Pathfinder-paletten som før, ved å klikke på "Minus Front" -ikonet. Dette vil etterlate deg med formen på overlegget.
Med overleggsformen valgt, gå over til Gradient-paletten og velg en lineær gradient, fra hvitt til hvit, satt til 0 grader, med venstre gradientanker satt til 25% opasitet, høyre gradientanker satt til 0% og gradient sted på 50%. Still blandemodus til "mykt lys".
Tro det eller ei, vi er nå ferdige med grunnoppsettet og er nå fritt til å spille med farge!
Nå som vi er ferdige med grunnleggende oppsettet, kan vi begynne å lage individuelle ikoner. Som et eksempel skal jeg gå gjennom etableringen av et Vimeo-ikon. Hensikten her er å vise deg hvor lett det er å lage ditt eget ikon når du har en grunnleggende mal opprettet!
Opprett to nye fargeprøver ved å klikke på "New Swatch" -ikonet i fargepaletten (Vindu> Fargeprøver). Definer fargene som følger:
Gå tilbake til "base" -laget, velg basisrektangel og bruk en gradient ved hjelp av de nye gradientprøver vi nettopp har opprettet.
Heldigvis er Vimeo-logoen basert på Black Rose-fonten. Last ned skrifttypen og skriv bokstaven "v" for å sikre at du jobber i "ikonet" -laget. Jeg har skrevet min tekst på 55pt med en veldig lys grå farge. Konverter teksten til konturer (Type> Opprett oversikter) og plasser v inn i midten av rektangelet.
Velg logoformen og trykk CTRL / CMD + C for å lage en kopi. Trykk CTRL / CMD + B for å lime inn kopien bak originalen. Med den kopierte formen som fortsatt er valgt, trykk enter for å justere posisjoneringen. Endre den horisontale posisjoneringen til 0.5px og den vertikale posisjoneringen til -0.5px og klikk OK.
Endre fargen på den kopierte formen til svart, sett blandemodus til "mykt lys" og endre opasiteten til 50%
Et valgfritt trinn kan være å skape en skygge for hele ikonet. Arbeide i "basen" laget, lag en liten ellipse ved foten av ikonet. Fyll dette ikonet med en radial gradient, fra svart til svart, satt til 0 grader, med venstre gradientanker satt til 60% opacity, høyre gradientanker satt til 0%, aspektforholdet satt til 8% og gradientstedet på 60%.
Det er alt der er til det! Etter de grunnleggende retningslinjene som er angitt i denne opplæringen, kan du enkelt lage dine egne skalerbare ikoner for nesten alle applikasjoner eller nettsteder. Bare åpne din ikonmal og slipp i din egen logo!
Siden denne opplæringen er for Envato ™, trodde jeg at jeg ville ta deg tid til å lage et sett med BuddyIcons for Envato ™ -markedsplassene. Inkludert i pakken er ikoner for ThemeForest, GraphicRiver, AudioJungle, ActiveDen, VideoHive, 3DOcean og CodeCanyon. Brandon (stedet redaktør her) tok et par minutter å følge opp veiledningen og skape sitt eget bidrag: 2 prangende webdesigntuts + ikoner.
Pakken inneholder ikonene i gjennomsiktig .png-format i tre størrelser; 32x32px, 64x64px, 128x128px sammen med det opprinnelige kunstverket (.ai)
Den vakre tingen om å ha ditt eget sett med BuddyIcons er at de jobber så bra når det kommer tid til å integrere sosiale medier og andre lenker til dine egne design. Hvert ikon er jevnt i størrelse, og du kan bruke dem i en rekke situasjoner. Nedenfor er bare noen få raske ideer:
Når du ser på begrepet et ikon fra teoretisk synspunkt, er det ganske mange fordeler med å bruke et ensartet sett i stedet for å bruke biter og biter fra hele stedet. Ikoner tiltrekker oppmerksomheten til seerne, oppfordrer klikkfrekvenser, og de er en fin måte å bringe et splash av farge og stil på dine design. Et ensartet ikonsett kan gå et skritt videre ved å skape et sammenhengende, balansert og kunstnerisk element i et design. Å bruke flere ikoner på ett sted kan til og med bidra til å gjøre et nettsted ser ut som det er aktivt og engasjert i fellesskapet ... jo mer grunn til at design inkluderer en liten BuddyIcon-kjærlighet et sted på nettstedet.
Det er alt for nå; Vi håper du likte opplæringen og freebie! Du kan sjekke ut hele BuddyIcon-settet uten de eksklusive Envato ™ -ikonene på PremiumPixels. Husk å sjekke tilbake her (eller abonnere) på Webdesigntuts + for flere flotte freebies som dette i fremtiden!
Accentsconagua