Hurtig Tips Hvordan lage en gjenbrukbar ikonstil med Utseendepanelet

I den følgende Quick Tips lærer du hvordan du lager en søt, avrundet ikonstil. Du vil bruke grunnleggende former og Pathfinder-alternativer for å lage glyph-ikoner og Utseendepanelet for å lage en stil som kan brukes på alt fra ikoner til tekst. La oss begynne!


Trinn 1

Fordi dette designet er ment å bli brukt som et webikon, begynner du med å lage et 96x 96 pikslers tavla. Andre populære størrelser for webikoner er 48px og 16px. Når du lager ikoner, husk å sette rutenettet til piksler. Gå til Preferanser> Guides & Grid, og endre innstillingene for å ha en rutenett hver 10.px med 10 underavdelinger. Dette vil gi deg et pikselformet rutenett for å jobbe med.


Steg 2

Som et eksempel skal jeg vise deg hvordan du lager et enkelt forstørrelsesglass ved hjelp av Pathfinder-alternativene og noen former. Du kan lage hvilken form du liker.

For å lage et forstørrelsesglass, kommando + klikk på tavla med Ellipseverktøyet (L) for å få fram Ellipse-valgdialogen og skriv inn 42px for både bredden og høyden. Klikk på OK for å opprette en sirkel.


Trinn 3

Med Rektangulærverktøyet (L), Kommando + Klikk på tavla for å få opp dialogboksen Rektangelvalg og skriv inn 12px for bredden og 40px for høyden. Dette vil være håndtaket av forstørrelsesglasset.


Trinn 4

Plasser rektangelet nederst på Ellipse slik at det er litt overlappende og juster de to formene Horisontalt. Du kan finne justeringsalternativene øverst i programvinduet eller ved å gå til vindu> justere.


Trinn 5

Velg begge figurene, og hold nede Skift, Rotér formen til venstre slik at den sitter diagonalt. Grupper de to figurene med kommandoen + G og juster dem til Artboard. Du kan justere objekter til kunstglasset ved å klikke på "Juster til" -alternativer på Justeringspanelet. Når alternativet er valgt, vil alt som er justert på tavlen justere seg med selve tavlen og ikke de gjenstandene det er valgt med.

Merk: Et annet praktisk verktøy er alternativet Juster til Pixel Grid som er i Illustrator CS5. Dette vil sørge for at figurene eksporteres fra Illustrator med de skarpeste linjene som er mulig. For å finne alternativet Juster til pixelgitter, gå til Vindu> Forvandle og det vil være en avkrysningsboks nederst på Transform Panel.


Trinn 6

Velg Ellipse og gå til Objekt> Path> Offset Path og i dialogboksen skriv inn -6px. Dette vil skape en mindre Ellipse. Velg den nye Ellipse og fyll den med en farge som er forskjellig fra hovedobjektet, slik at du kan se det.


Trinn 7

Velg den store ellipsen og rektangelet og i Pathfinder-panelet, Alternativ + Klikk på Unite-knappen for å opprette en sammensatt form. Jeg liker dette alternativet fordi det ikke kombinerer og utvider objektet helt, og gir deg muligheten til å finjustere figurene senere uten å måtte trekke dem igjen..

Med gjenstandene fremdeles valgt, send dem til baksiden med "Kommando + Skift + Venstre firkantbrakett".


Trinn 8

Velg Mindre Ellipse og Kopier den (Command + C) og slett den. Klikk inn i sammensatt form av forstørrelsesglassform og lim inn den mindre ellipse på plass (kommando + f). Velg både Ellipsis og Option + Klikk på Ekskluder-knappen for å kutte et hull i hoved ellipsen. Igjen, fordi det er en sammensatt form, er det enkelt å redigere senere.


Trinn 9

Nå begynner vi å lage ikonstilen. Velg objektet du jobber med, og gå til Utseendepanelet. Velg Fyll laget og klikk på Effects-ikonet nederst i dialogboksen. Gå til Stylize> Round Corners og skriv inn 2px som radien, klikk OK.

Merk: Du kan forhåndsvise effekten ved å velge forhåndsvisningsboksen nederst i dialogruten for Round Corner. Dette kan være nyttig hvis du ikke er sikker på skalaen.


Trinn 10

Lag et nytt fylllag i Utseendepanelet (du kan gjøre dette ved å klikke på ikonet nederst i panelet) og velge hvilken som helst farge du vil. Jeg har brukt Blue og endret hovedikonet til White. Gå tilbake til kategorien Effekter og velg Konverter til Form> Ellipse. Dette vil dynamisk lage en sirkel bak ikonet.

Skriv inn bredden og høyden du vil gjøre ikonet. Jeg har valgt 93px for begge, slik at det er noen piksler igjen hver side av 96px-ikonet.


Trinn 11

Med det blå fyllestykket valgt i Utseendepanelet og hovedformen fremdeles valgt, gå tilbake til fanen Effekter og velg Distort & Transform> Zig Zag. Vi vil sette den relative størrelsen på Zig Zags til 1% (dette vil gjøre dem i stand til å skalere med objektet), Ridges per Segment til 15 og Points to Smooth. Du kan leke med disse innstillingene til du ser en titt.


Trinn 12

For den endelige berøringen, legg til en subtil korneffekt. Igjen, dette brukes i Effects Menu ved å gå til Texture> Grain. Spill med Intensity and Contrast innstillingene til du finner en stil du liker, jeg gjorde min subtile med mørke lapper ved hjelp av en intensitet på 12 og en kontrast på 64. Innstillingene vil variere avhengig av hvor mørkt eller lys fargen din er. Klikk på OK og beundre resultatene.

Merk: Fordi kornet er en rastereffekt, kan det hende du får noen skarpe kanter. Dette skyldes at standardinnstillingene for Raster Effect er satt til 72dpi for å lagre gjenopprettingstid. Hvis du vil øke visningsoppløsningen, kan du gjøre det ved å gå til Effect> Document Raster Effect Settings. Jeg vil anbefale å gjøre dette på slutten av et prosjekt, da en høy innstilling kan bremse Illustrator.

Ta deg tid til å gjøre noen variasjoner på stilen og test dem på forskjellige former og bokstaver. Jeg har gjort noen tilpasninger til hovedtemaet ved å skape en lysere farge med en annen korninnstilling og noen firkantede former i stedet for sirkler som jeg har brukt på en fet skrift. Når du er fornøyd med resultatene, lagre dem i panelet Grafisk stil for fremtidige prosjekter. Du kan gjøre dette ved å velge objektet og klikke på Ny grafisk stil-knapp nederst på panelet.


Konklusjon

Der har du det. En enkel måte å lage noen få forskjellige effekter på som vil hjelpe deg med å lage noen søte utseende ikoner. Nå har du lært hvordan effekter kan komme til nytte når du oppretter egendefinerte ikonsett, alt du trenger er et sett med symboler og noen få stiler, og du kan lage hundrevis av forskjellige design. Jeg håper du likte denne tut.