Adobe Illustrator er et design program 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 av punkter. Selv om det ikke er spesielt utformet som en web- design program , har Illustrator 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 . Du trenger en Web utforming redigering programvare
Vis flere instruksjoner
Opprette en Layout
en
Lag et Illustrator-dokument som er 960 piksler bred med en høyde på du selv velger avhengig av innhold og design du har i tankene . Et område 960 px bredt tilfredsstiller den mest populære skjermoppløsning bredde på 1024 px gang rullefeltet og vinduet kantene blir tatt hensyn til .
2
Opprett en håndtegnet skisse av grunnleggende visuelle utformingen av nettstedet ditt hvis du ikke har gjort det allerede. Dette vil gi deg en praktisk referanse for å skape innenfor Illustrator .
3
Lag din layout med bilde og tekst verktøy for en stilisert spissen. Hvis design inkluderer plass til tekst, for eksempel blogginnlegg, la plassen i det området blank eller lage en ramme rundt den for enkel avgrensing .
4
Legg guider til design for å avgrense de ulike delene av oppsettet . Dette er svært viktig fordi du vil bruke de guider for å lage skiver , som definerer grensene av elementene på nettstedet ditt . Guider kan hjelpe deg med å sette gjenstander med presisjon . Klikk på vertikal eller horisontal linjal og dra musen til der du vil guiden skal ligge.
5
Dobbeltsjekk plassering av dine guider for presisjon og nøyaktighet. Trekke mer hvis det er nødvendig å skille mellom hvert element , som for eksempel navigasjon bilder som vil være linker på nettstedet ditt.
Generating Code
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 til høyre på skjermen under hånden ikonet. Velg alle skivene .
7
Velg optimalisering innstillinger fra alternativene på høyre side av skjermen . Du kan velge forhåndsinnstilte innstillinger eller opprette en tilpasset profil, avhengig av om du vil at bildene skal være JPEG , GIF eller PNG- filer. Du kan også justere kvaliteten på bildene .
8
Preview ulike innstillinger ved å klikke på " to -up " og " 4 -up " tabs . Nederst i hjørnet av hvert forhåndsvisning kan du se optimalisering informasjon som filstørrelse og nettleser rendering tid . Klikk på " Lagre"-knappen . Bestem hvor du vil at bildene og kode for å bli frelst og navigere til dette området ved å bruke " Hvor: " knappen
9
Velg formatet for arbeidet ditt. . Hvis du er dyktig i HTML og bare vil at bildene fordi du vil legge til kode for dem senere , velger du « bare bilder . " Hvis du er nybegynner eller foretrekker å ha HTML generert for deg , velg " HTML og bilder " alternativet. Hvis du foretrekker for plassering av elementene å være organisert med Cascading Style Sheets stedet for tabeller , velg " Standard Settings"-knappen og velg " Eksporter som CSS Layers " i " Lag" -kategorien.
10 < p> Åpne HTML -fil fra en nettleser til å vise arbeidet ditt . Redigere filene med en web- design program .