Adobe Illustrator är ett designprogram som skapar vektorgrafik för en mängd olika användningsområden inklusive tryck , rörelse och webb . Vektorgrafik använder matematiska formler för att presentera bilder , i motsats till andra format såsom GIF , som använder en samling prickar . Även om inte speciellt konstruerad som ett webbdesign program , har Illustrator avancerade verktyg för att exportera grafik som skapats inom programmet för användningen av webbplatsen och även genererar kod som behövs för visning i en webbläsare . Saker du behöver
Webbdesign redigeringsprogram
Visa fler instruktioner
Skapa en layout
1
Skapa ett Illustrator-dokument som är 960 pixlar bred med en höjd på du väljer beroende på innehåll och design som du har i åtanke . En plats 960 px bred uppfyller de mest populära bildskärmsupplösning bredd på 1024 px gång rullningslisten och kanter fönster beaktas .
2
Skapa en handritad skiss av grundläggande visuell layout din webbplats om du inte redan har gjort det . Detta kommer att ge dig en enkel sammanfattning för att skapa i Illustrator .
3
Skapa layouten med hjälp av bilden och verktyg text för en stiliserad header . Om din design innehåller utrymme för text såsom blogginlägg , lämna utrymmet i detta område tomt eller skapa en ram runt den för enkel gränsdragning .
4
Lägg guider till din design för att avgränsa de olika delarna av layouten . Detta är mycket viktigt eftersom du kommer att använda dessa guider för att göra skivor , som definierar gränserna för element på din webbplats . Guider kan hjälpa dig rada upp objekt med precision . Klicka på den vertikala eller horisontella linjalen och dra musen till där du vill att guiden ska placeras .
5
Dubbelkolla placeringen av dina guider för precision och noggrannhet . Rita mer om det behövs för att separera varje element , såsom navigering bilder som är länkar på din webbplats . Addera generera kod
6
Välj " Objekt " från menyn , välj sedan " Slice " och välj " Skapa från stödlinjer . " När skivorna skapas kommer du att se små svarta lådor inuti varje skiva med ett motsvarande antal . Välj " File " i menyn och välj " Spara för webben och enheter . " Välj slice -verktyget , vilket är den andra ikonen i verktygsmenyn till höger på skärmen under handen ikonen . Markera alla segment .
7
Välj optimeringsinställningarna från alternativen på höger sida av skärmen . Du kan välja förinställda inställningar eller skapa en anpassad profil beroende på om du vill att dina bilder är JPEG, GIF och PNG-filer . Du kan också justera kvaliteten på bilderna .
8
Förhandsgranska olika inställningar genom att klicka på " 2 - up " och " 4 - upp " flikar . Längst ner hörnet av varje förhandsvisning kan du visa optimering information såsom filstorlek och webbläsare rendering tid . Klicka på knappen "Spara" . Bestäm var du vill att dina bilder och kod ska sparas och navigera till området med " Var : " knappen
9
Välj format för ditt arbete . . Om du har kunskaper i HTML och bara vill att bilderna eftersom du kommer att lägga till kod för dem senare , väljer du " Endast bilder . " Om du är nybörjare eller föredrar att ha HTML genereras för dig , välj " HTML och bilder " alternativet . Om du föredrar för placering av de element som skall anordnas med Cascading Style Sheets stället för i tabeller , välj " Default Settings " knappen och välj " Exportera som CSS-lager " i "Lager "-fliken .
10
Öppna HTML- fil inifrån en webbläsare för att visa ditt arbete . Redigera filerna med ett webbdesign program .
