Adobe Illustrator er et design program, der skaber vektorgrafik for en bred vifte af anvendelser , herunder print, bevægelse og web . Vektorgrafik anvende matematiske formler til at præsentere billeder, i modsætning til andre formater såsom GIF , som bruger en samling af prikker . Selvom det ikke er specielt konstrueret som en web-design program , er Illustrator har avancerede værktøjer til at eksportere grafik skabt inden for programmet for hjemmesiden brug og genererer også koden er nødvendig for visning i en browser . Ting du skal
Webdesign redigeringssoftware
Vis Flere Instruktioner
Oprettelse af et layout
1

Opret et Illustrator-dokument , der er 960 pixels bred med en højde på dit valg , afhængigt af indhold og design, du har i tankerne. Et websted 960 px bred overensstemmelse med de mest populære skærmopløsning bredde på 1024 px når rullepanelet og vinduet kanter er taget i betragtning.
2

Opret en håndtegnet skitse af det grundlæggende visuelle layout dit websted, hvis du ikke allerede har gjort det . Dette vil give dig en handy reference for at skabe inden Illustrator.
3

Opret dit layout ved hjælp af billede og tekst-værktøjer til en stiliseret header. Hvis dit design inkluderer plads til tekst , såsom blogindlæg , forlader rummet i det pågældende område tom eller oprette en ramme omkring det for nemt afgrænsning .
4

Tilføj guider til dit design for at afgrænse de forskellige dele af layoutet . Dette er meget vigtigt , fordi du vil bruge disse vejledninger til at gøre skiver , der definerer grænserne for elementer på dit website. Guider kan hjælpe dig line up objekter med præcision. Klik på den lodrette eller vandrette lineal og trække musen , hvor du ønsker vejledning skal placeres.
5

Dobbelt -tjek placeringen af ​​dine guider til præcision og nøjagtighed. Trække mere hvis det er nødvendigt for at adskille hvert element, såsom navigation billeder, der vil være links på dit websted .
Generering Code
6

Vælg " objekt" fra menuen, vælg derefter " Slice " og vælg " Opret fra hjælpelinjer. " Når skiverne er skabt , vil du se små sorte bokse i hver skive med et tilsvarende antal . Vælg "File " i menuen og vælge "Gem til web og enheder . " Vælg Udsnitsmarkering værktøj, som er det andet ikon i værktøjet menuen til højre på skærmen under hånden ikon. Vælg alle skiver.
7

Vælg optimeringsindstillingerne fra indstillingerne på højre side af skærmen. Du kan vælge forudindstillede indstillinger eller oprette en tilpasset profil , alt efter om du vil have dine billeder til at være JPEG , GIF eller PNG -filer . Du kan også justere kvaliteten af ​​billeder .
8

vist forskellige indstillinger ved at klikke på " 2 -up " og " 4- up " faner. Nederst hjørne af hver forhåndsvisning kan du se optimeringen oplysninger såsom filstørrelse og browser rendering tid. Klik på "Gem " knappen. Beslutte, hvor du vil have dine billeder og kode for at blive frelst, og navigere til dette område ved hjælp af " Hvor: " knappen
9

Vælg det format til dit arbejde . . Hvis du er godt inde i HTML og kun ønsker at billederne fordi du vil føje kode for dem senere , skal du vælge " kun billeder ". Hvis du er nybegynder eller foretrækker at have HTML genereret til dig , skal du vælge " HTML og billeder " valgmulighed. Hvis du foretrækker til placering af de elementer , der skal organiseres med Cascading Style Sheets i stedet for tabeller , skal du vælge "Standard Settings" knappen og vælg " Eksporter som CSS-lag " i " Lag " fanen.
10 < p> Åbn HTML-filen fra i en browser for at se dit arbejde. Redigere filerne med en web -design program .