Hvordan lage Web Ikoner Med Adobe Illustrator

Du kan lage din egen web ikoner for hvilken som helst nettside ved hjelp av Adobe Illustrator. Bruke Pathfinder å kombinere to objekter lar deg lage figurer mer interessant for øyet enn en vanlig sirkel eller rektangel. Denne opplæringen bruker et rektangel og sirkel, men du kan bruke de samme trinnene med forskjellige former for å lage ditt eget ikon. Når du lager flere ikoner for samme side, kan du bruke den samme formen, eller samme farge for å holde noen samhold til siden.

Bruksanvisning

1 Åpne Adobe Illustrator, og skape en ny web-dokument. Størrelse dokumentet til størrelsen på ikoner, for eksempel 100 av 100 piksler.

2 Velg "Avrundet rektangel Tool" fra verktøykassen. Dra verktøyet over dette dokumentet, og skaper et rektangel som er i flukt med toppen og til høyre i dokumentvinduet, og ca 15 piksler i dokumentet grenser på bunnen og venstre. Dette er for å gjøre plass til ikonet skygge.

3 Dobbeltklikk på fargevelgeren, og velg en farge for ikonet.

4 Velg "Ellipse Tool" for å lage en sirkel som dekker nedre venstre hjørne av rektangelet. For å gjøre dette, plasserer verktøyet i midten av rektangelet. Hold nede "Shift" tasten mens du flytter verktøyet diagonalt forbi nederst i høyre hjørne av rektangelet til "Center" guide av Ellipse ligger på hjørnet av rektangelet.

5 Klikk på "Pathfinder" panel. Hvis det ikke er synlig, klikker du på "Window" menyen og velg "Pathfinder". Trykk "Ctrl-A" for å velge begge stedene. Klikk på "Minus Front" -knappen i Pathfinder-panelet. Sirkelen forsvinner og etterlater en sirkel-formet "bite" i rektangelet.

6 Klikk på "Effect" -menyen, velg "Stylize" og klikk "Drop Shadow". Sett Opacity på "75" X Offset på "-3 px," Y Offset på "7 px" og uskarphet ved 5 "px". Klikk på "Preview" boksen for å sikre skyggen faller ikke utenfor dokumentet grensen. Du kan justere skygge, eller redusere størrelsen på boksen hvis den gjør det.

7 Klikk på "Type Tool" i verktøykassen og dra markøren over rektangelet for å lage en tekstboks. Skriv inn teksten du ønsker for ikonet. Trykk "Ctrl-A" for å markere all teksten. Endre skrifttype, skriftstørrelse og farge etter ønske fra alternativlinjen. Sentrer tekst ved å klikke på "Center" punkt-knappen. Alternativt kan du plassere et bilde på ikonet i stedet for å bruke tekst.

8 Klikk på "File" -menyen, og velg "Lagre for Web og enheter." Endre formatet til "PNG-24" og kontroller at "Transparency" er krysset av for å holde bakgrunnen transparent, klikk på "Lagre".

9 Slett tekst eller bilde i ikonet og bruke bakgrunnen for å opprette flere ikoner.