Hvordan lage Web knapper med Illustrator

Adobe Illustrator er grafisk design industristandarden for vektorbasert illustrasjon. Illustrator er et effektivt program for å lage grafikk for web. Illustrator kan gjengi alle vanlige bildeformater, slik at for enkel integrasjon av vektorgrafikk i Web design. Utnytte andre Adobe-produkter, for eksempel Image Ready, for å optimalisere Illustrator-filer på riktig måte for web-klar grafikk.

Bruksanvisning

1 Bruk papir og blyant for å utforme ideer og planlegge Web knapper. Ta deg tid til å forstå hva knappene må brukes til og om alternative knapper må gjøres for en rollover image. Plukk skrifttyper, farger og teksturer som vil jobbe med nettstedets design.

2 Åpne Adobe Illustrator og opprette et nytt dokument. Sett måleenheten til piksler. Størrelsen vil avhenge av behov og begrensninger i webdesign. Sett farge modus til RGB-farge å garantere fargenøyaktighet.

3 Lag teksten for knappene ved hjelp av svarte bokstaver og en hvit bakgrunn. Juster font, høyde, vekt og avstand til teksten er estetisk tiltalende og tydelig å lese. Designing tekst i svart og hvitt gir mulighet for typografiske klarhet.

4 Legg farge til Web-knappen design. For et eksisterende nettsted, velg riktig fet og slående farger fra nettstedet eksisterende fargevalg. Hvis knappene er ikke for et eksisterende område, velg et populært fargevalg eller opprette en ny. Subtile variasjoner av fargen vil skape visuell interesse.

5 Lag en særegen form for knappene, slik at nettstedet navigasjon er enkel og grei. Avrunding ett, to eller fire hjørnene av et rektangel er en populær metode for å lage web-knapper.

6 Lag alternative farger og designelementer for roll knapper. En roll knappen er to bilder som utveksling når brukeren plasserer sin markøren på knappen. Velt brukes ofte for å indikasjon en aktiv side eller lenke i en web-design. Enkle velt, slik som tekst endre farge, er effektive.

7 Legg tekstur til knappene. Texture er en populær metode for å legge visuell interesse til et nettsted. Lag en tilpasset tekstur ved hjelp av en skanner eller et digitalt kamera.

8 Legg skygger, cross klekking, graderinger og andre finpuss til Web knapper.

9 Lag et nytt lag for hver ny knapp for å forenkle eksportprosessen. Navn lag for å skille lignende elementer.

10 Eksportere knappene ved å klikke på "File", "Export" og lagre til nett Bilder-mappen. Spar knapper som bruker gjennomsiktighet som Portable Network Graphics, eller .png. Spar knapper med store mengder detaljer som .jpeg og alle andre som .gif.

11 Legg knappene til nettstedet ditt via opplasting og koding. Test for å sikre at koblingene arbeid før du starter nettstedet offentlig.

Hint

• Planlegg utformingen så mye som mulig før du bruker datamaskinen.
• Adobe Illustrator gjengir all grafikk som overskrider grensene for kunst styret. Det kan være nødvendig å bruke Adobe Photoshop eller et annet bitmap editor for å trimme de endelige grafikk.