Share
Denna handledning är perfekt för början till mellanliggande Adobe Illustrator-användare. Vi täcker hur du utformar en webbplats och förbereder den för användning på webben. Vi använder också den nyligen släppta Website Element Freebie för att mocka upp designen också.
Starta ett Ny dokument med en bredd av 960 x och en höjd av ditt val. Jag har valt denna bredd eftersom den här webbplatsen sannolikt kommer att medföra internettrafik som har genomsnittliga till stora skärmar. En bredd på 960 pixlar är en säker storlek som gynnar majoriteten av besökarna. Sista, sätt din Färg läge till RGB.
Den svarta gränsen visar dokumentstorleken (kallad Artboard) som vi skapade. Jag gillar att placera en tom skärmdump av ett webbläsarfönster på eget lager när jag designar för att få en bra bild av hur min webbplats kommer att se ut när den är klar.
Detta nästa steg är väldigt viktigt. Se till att du är medveten om vilken zoom du tittar på dokumentet på. När allt är sagt och gjort kommer din webbplats att ses på 100%. Tänk på att zooma in och ut medan du arbetar på din layout, men var säker på att all text och designelement är läsbara när de ses på 100%. Använd nedrullningen nedanför (eller skriv in den procentandel du vill ha) för att ändra zoomningen till.
Sidenote: Ibland blir Adobe Illustrator testy och visar inte siffrorna när du skriver dem in i zoomområdet som markeras nedan. Om du till exempel skriver 58% ibland ändras inte siffrorna när du skriver. Om så är fallet, tryck helt enkelt på Retur efter att du har angett dina värden, och ditt dokument kommer att ändras till det nummer du angav.
Artboard kan bytas mellan synligt och osynligt genom att gå till Visa> Dölj Artboard. Problemet med detta är att det tar lite längre tid än att visa och dölja guider (Command + Semicolon Key) Så jag tycker bäst att använda guider och gömma Artboard. I samband med att du lägger ut en hel webbplats hittar du det mycket lättare att trycka på ett snabbtangentkommando istället för att gå till toppen av skärmen och välja från en lista varje gång.
Det kan vara lätt att skapa balans och en trevlig hierarki genom att först dra enkla grå lådor på din sida. De tunna rektanglarna representerar var jag planerar att använda text medan de stora grå rutorna kommer att vara bilder.
När du har en allmän uppfattning om hur layouten kommer att se ut kan du lägga till guider och ta bort de grå rutorna.
Använd endast guiderna som referens, lägg till andra element som navigering, text och skärpa där logotypen, bilderna och ikonerna ska gå. Det är tillrådligt att växla dina guider på och av (Command + Semicolon Key), medan du är finessing layouten. Om guiderna du ritade inte fungerar så bra som du trodde, justera dem just som du passar.
Sidenote: När du växlar guider på och av blir de automatiskt låsta. Du kan inte flytta låsta guider. För att låsa upp guider trycker du snabbt på Kommando + Alternativ + Semikolon.
Fortsätt att slutföra din rubrik med bilder, ikoner och grafik.
Nedan har jag bestämt mig för att lägga till en ljusblå färg för att förbättra rubriken.
Lägg styling till din text, se till att du bestämmer vilka länkar och rubriker som kommer att se ut. Jag tycker det är mycket lättare och snabbare att uppnå så många designelement i Illustrator så att jag kan koncentrera mig på programmering och kodning av webbplatsen när tiden kommer.
Det finns ett par olika sätt att förbereda en design för användning i en WYSIWYG-editor (som du ser är vad du får), som Adobe Dreamweaver. Den första metoden använder skivor. Skivor kan göras med hjälp av guider eller ett urval. För att använda guider för att skapa skivor, dra först guider på din sida runt varje objekt som kräver egen länk. Till exempel, en ikon som när den klickas går till en viss sida. Nedan har jag fyra ikoner, varje ikon kommer att leda besökaren till en annan webbsida eller ett område på webbplatsen.
Jag har ritat guider mellan varje ikon och precis utanför det blå området. Det är vanligtvis renare om du ritar dina guider om 1 eller 2 pixlar utanför området som du skär. Detta garanterar att inget av ditt konstverk kommer att bli avskuret.
Sidenote: Dra inte guider över hela din layout på en gång. Istället gör avsnitt ett åt gången. Till exempel gör först rubrikområdet. Rensa alla dina guider genom att gå till Visa> Guider> Rensa guider. Spara dina skivor på webben (diskuteras i ett senare steg) och upprepa denna process för andra områden i layouten.
När du har tagit dina guider är nästa steg att göra skivor av dem. För att göra skivor från dina guider gå till Objekt> Skiva> Skapa från guider. Ibland får Illustrator inte göra skivor första gången du försöker. Jag har funnit att jag ibland måste upprepa detta steg tre eller fyra gånger innan Illustrator faktiskt kommer att göra skivor. Nedan indikerar de svarta numrerade rutorna att skivorna har gjorts.
För att spara dina skivor för användning på en webbplats, gå till Arkiv> Spara för webb och enheter ... Använd Slice Select Tool (K) markeras i övre vänstra hörnet för att välja de specifika skivorna som du vill spara. Välj flera skivor samtidigt genom att hålla ned skiftet. Justera inställningarna till höger för att passa dina behov. JPEG-bilder fungerar bäst för objekt som har flera färger, medan GIF-filformatet fungerar bra för objekt som har stora färgområden och inte många färger i allmänhet fungerar PNG-filformat bra för transparent grafik (det kan dock kräva att något arbete anpassas för äldre IE-webbläsare). Du kanske vill testa kvalitet kontra filtyp och justera Kvalitet för att spara bandbredd. När du är klar klickar du på Spara.
Bestäm var du vill spara bilderna till. Jag har valt skrivbordet. Under format väljer du Endast bilder och klickar sedan på Spara.
På ditt skrivbord får du nu en mapp som heter Bilder. Inne i den här mappen är de specifika skivorna (bilderna) du valt. Dessa bilder är idealiska i upplösning och filstorlek för användning på webben.
Rensa dina guider genom att gå till Visa> Guider> Rensa guider. Dra nu nya guider runt nästa område som du vill skära. Huver-tillståndet (när musen är över navigeringen) blir röd, medan avstängningsläget blir grå. Du måste göra båda versionerna av navigeringen. För att effektivt åstadkomma detta, först gör all din navigering röd och gå till Arkiv> Spara för webb och enheter ...
Välj de specifika skivor du vill spara. Eftersom min navigering inte består av bilder eller ett överflöd av färger har jag bestämt mig för den bästa filtypen för navigationen blir GIF, klicka sedan på Spara. Observera också att om din användare är ett webstödat teckensnitt, kan du bestämma dig för att använda html-text istället för bilder.
Du kan ge dina bilder ett nytt namn vid denna tidpunkt. Men de namnges automatiskt för dig så det här är inte obligatoriskt.
Om du har sparat dina bilder på samma plats som tidigare, kommer du att märka mappen Bilder på skrivbordet nu innehåller de ytterligare bilderna du just sparade.
Tänk på att detta bara är ett möjligt arbetsflöde. Alternativt kan du placera på och av stater någonstans i ditt dokument, skapa alla dina skivor och exportera dem tillsammans.
Den andra metoden att skapa skivor är genom att välja ett objekt och sedan gå till Objekt> Skiva> Skapa från urval. Att skapa skivor med hjälp av guider eller ur ett urval är också bra. Använd ett arbetsflöde som du tycker är bekvämt och bäst för det specifika projektet du arbetar med.
Ibland behöver du inte inkludera texten som faller inom en skiva. Exempelvis kommer sidfoten att ha text som skrivs inuti WYSIWYG-redigeraren. Om så är fallet raderar du helt enkelt texten före eller efter att du gjorde skivorna, men tidigare för att spara skivorna för webben.
Nedan märker du att jag raderade texten efter att skivorna gjordes.
Observera den slutliga webbplatsen. Som du kan se är det enkelt och effektivt att lägga ut en webbplats i Adobe Illustrator. Du kan snabbt experimentera med design och ge den här fasen av webbdesign processen uppmärksamhet och trodde den behöver. Du kan se den slutliga bilden nedan eller se en större version här.
Accentsconagua