Hvordan bygge en nettside i Illustrator

Adobe Illustrator er et designprogram som skaper vektorgrafikk for et bredt spekter av bruksområder, inkludert print, bevegelse og web. Vektorgrafikk bruke matematiske formler for å presentere bilder, i motsetning til andre formater som GIF, som bruker en samling prikker. Selv om det ikke er spesielt utformet som et webdesign program, gjør Illustrator har avanserte verktøy for å eksportere grafikken er opprettet i programmet for bruken av nettstedet og også genererer koden som trengs for visning i en nettleser.

Bruksanvisning

Opprette et oppsett

1 Lag en Illustrator-dokument som er 960 piksler bred med en høyde som du selv velger, avhengig av innhold og design du har i tankene. Et nettsted 960 px bredt samsvar med de mest populære skjermoppløsningen bredde på 1024 piksler når rullefeltet og vinduskantene blir tatt hensyn til.

2 Lag en håndtegnet skisse av den grunnleggende visuelle utformingen av nettstedet ditt hvis du ikke allerede har gjort det. Dette vil gi deg en praktisk referanse for å skape innenfor Illustrator.

3 Lag din layout ved hjelp av bilde- og tekst verktøy for en stilisert spissen. Hvis din design inneholder plass til tekst, for eksempel blogginnlegg, forlate plassen i det området tomt eller opprette en ramme rundt det for enkel avgrensing.

4 Legg guider til design for å avgrense de ulike delene av oppsettet. Dette er veldig viktig fordi du vil bruke disse guider for å lage skiver, som definerer grensene av elementene på ditt nettsted. Guider kan hjelpe deg med å sette objekter med presisjon. Klikk på vertikal eller horisontal linjal og dra musen til der du vil at guiden skal ligge.

5 Dobbeltsjekk plassering av guider for presisjon og nøyaktighet. Trekke mer hvis det er nødvendig å skille hvert element, som for eksempel navigasjons bilder som vil være koblinger på nettstedet ditt.

Generering av kode

6 Velg "Object" fra menyen, velg deretter "Slice" og velg "Opprett fra Guides." Når skivene er opprettet vil du se små svarte bokser inne hver skive med et tilsvarende antall. Velg "File" fra menyen og velg "Lagre for Web og enheter." Velg stykket velger verktøyet, som er det andre ikonet i verktøymenyen på høyre side av skjermen under hånden ikonet. Velg alle skiver.

7 Velg de optimalisering innstillinger fra alternativene på høyre side av skjermen. Du kan velge forhåndsinnstillinger eller opprette en tilpasset profil, avhengig av om du vil at bildene dine skal være JPEG, GIF eller PNG-filer. Du kan også justere kvaliteten på bildene.

8 Forhåndsvisning forskjellige innstillinger ved å klikke på "2-up" og "4-up" tabs. Nederst hjørnet av hvert forhånds du kan vise optimalisering informasjon som filstørrelse og leseren rende tid. Klikk på "Lagre" -knappen. Bestem hvor du vil at bildene og kode for å bli frelst og navigere til dette området ved hjelp av "Hvor:" -knappen.

9 Velg format for arbeidet ditt. Hvis du er dyktig i HTML og bare vil at bildene fordi du vil legge til kode for dem senere, velg "bilder bare." Hvis du er nybegynner eller foretrekker å ha HTML generert for deg, velg "HTML og bilete". Hvis du foretrekker for plassering av elementene som skal organiseres med Cascading Style Sheets i stedet for tabeller, velger du "Default Settings" -knappen og velg "Eksporter som CSS-lag" i "Lag" -kategorien.

10 Åpne HTML-fil fra en nettleser for å vise arbeidet ditt. Redigere filene med et webdesign program.