Bästa sätten att skapa webbgrafik

Illustrator har flera verktyg för att skapa webbsideslayouter och för att skapa och anpassa webbgrafik. Använd till exempel webbsäkra färger, balansera bildkvalitet mot filstorlek och välj det bästa filformatet för bilden. Webbgrafik kan utnyttja fördelarna med segment och bildscheman, och du kan använda en mängd olika optimeringsalternativ för att se till att filerna visas korrekt på webben.

När du formger grafik för webben måste du tänka på andra saker än när du formger grafik för tryck. 

Du kan ta hjälp av de här tre riktlinjerna när du ska fatta beslut om webbgrafik:

Använd webbsäkra färger.

Färg är ofta det viktigaste i en teckning. Färgerna du ser på ritytan behöver dock inte alltid vara de färger som visas i en webbläsare på någon annans dator. Du kan förhindra gitter (sättet att simulera färger som inte är tillgängliga) och andra färgproblem om du vidtar två försiktighetsåtgärder när du skapar webbgrafik. För det första måste du alltid arbeta i RGB-färgläge. För det andra ska du använda en webbsäker färg.

Balansera bildkvalitet med filstorlek.

Det är nödvändigt att skapa små grafiska filstorlekar om du vill distribuera bilder på webben. Mindre filstorlekar gör så att webbservrar kan lagra och överföra bilder mer effektivt och användare kan hämta bilder snabbare. Du kan visa storleken och den beräknade hämtningstiden för en webbild i dialogrutan Spara för webben & enheter.

Välj det bästa filformatet för grafiken.

Olika typer av grafik måste sparas i olika filformat så att de kan visas på bästa sätt och skapa en filstorlek som passar för webben. Mer information om särskilda format finns i Optimeringsalternativ för webbgrafik.

Om läget Förhandsvisa med pixlar

För att webbdesigner ska kunna skapa en design med exakta pixlar, har egenskapen pixeljusterad lagts till i Illustrator. När egenskapen pixeljustering har aktiverats för ett objekt, justeras alla vågräta och lodräta segment i objektet mot pixelstödrastret vilket ger linjerna ett tydligt utseende. Vid en omformning justeras objektet om mot pixelstödrastret enligt de nya koordinaterna, om den här egenskapen har ställts in för objektet. Du kan aktivera den här egenskapen genom att välja Justera till pixelstödraster på panelen Omforma. I Illustrator finns också alternativet Justera nya objekt mot pixelstödrastret på dokumentnivå, som aktiveras som standard för webbdokument. Med den här egenskapen aktiverad anges egenskapen pixeljustering som standard för alla nya objekt som du ritar.

Mer information finns i Rita pixeljusterade banor för webbarbetsflöden.

När du sparar en teckning i bitmappsformat, till exempel JPEG, GIF eller PNG, rastreras teckningen med 72 pixlar per tum i Illustrator. Du kan förhandsvisa hur objekt kommer att se ut när de är rastrerade genom att välja Visa > Förhandsvisa med pixlar. Den här funktionen är bra om du vill kontrollera exakt placering, storlek och kantutjämning för objekten i en rastrerad bild .

Om du vill förstå hur objekt delas upp i pixlar kan du öppna en fil som innehåller vektorobjekt, välja Visa > Förhandsvisa med pixlar och förstora teckningen så att du kan se de enskilda pixlarna. Placeringen av pixlarna bestäms av pixelstödrastret som delar in ritytan i steg om 1 punkt (1/72 tum). Du kan visa pixelstödrastret om du zoomar in till 600 %. Om du flyttar, lägger till eller omformar ett objekt fästes objektet mot pixelstödrastret. Det innebär att eventuell kantutjämning längs ”fästkanterna” på objektet (vanligtvis de vänstra och övre kanterna) försvinner. Avmarkera nu kommandot Visa > Fäst mot punkt och flytta objektet. Nu kan du placera objektet mellan rasterlinjerna. Lägg märke till hur det här påverkar objektets kantutjämning. Som du kan se påverkar väldigt små justeringar hur objektet rastreras.

Tips för att skapa Illustrator-bilder för mobila enheter

Om du vill optimera grafiskt innehåll för mobila enheter ska du spara grafik skapad i Illustrator i ett SVG-format, till exempel SVG-t som är speciellt utformat för mobila enheter.

Använd de här tipsen när du vill försäkra dig om att bilder skapade i Illustrator visas på rätt sätt på mobila enheter:

• Använd SVG-standarden när du skapar innehåll. Om du använder SVG när du publicerar vektorgrafik på mobila enheter resulterar det i liten filstorlek, oberoende visning, överlägsen färgkontroll, zoommöjlighet och redigerbar text (inom källkoden). Eftersom SVG är XML-baserat kan du dessutom lägga till interaktivitet i bilderna, till exempel markeringar, knappbeskrivningar, specialeffekter, ljud och animeringar.

• Arbeta inom de slutliga måtten för din(a) mobila målenhet(er) ända från början. Även om SVG är skalbart kommer den slutliga grafiken definitivt att ha optimerad kvalitet och storlek för målenheten/målenheterna om du arbetar med rätt storlek.

• Ange färgläget för Illustrator till RGB. SVG visas på visningsenheter med RGB-raster, till exempel skärmar.

• Om du vill minska filstorleken kan du försöka minska antalet objekt (inklusive grupper) eller göra den mindre komplicerad (använda färre punkter). Om du använder färre punkter minskas mängden textinformation som behövs för att beskriva grafiken i SVG-filen betydligt. Du kan minska antalet punkter genom att välja Objekt > Sökväg > Förenkla och testa olika kombinationer för att hitta en balans mellan kvalitet och antalet punkter.

• Använd symboler när det går. Symboler betecknar de vektorer som beskriver ett objekt en enda gång i stället för flera gånger. Det är användbart om grafiken innehåller objekt, till exempel bakgrunder till knappar som återanvänds.

• När du animerar grafik bör du begränsa antalet använda objekt och försöka återanvända objekt där det går så att filstorleken inte blir för stor. Använd animeringar på grupper av objekt i stället för på enskilda objekt så undviker du kodrepeteringar.

• Du bör använda SVGZ, den komprimerade gzippade versionen av SVG. Att komprimera filen kan minska dess storlek betydligt, beroende på innehåll. Text kan vanligtvis komprimeras kraftigt medan binärkodat innehåll, till exempel inbäddade raster (JPEG-, PNG- och GIF-filer), inte kan komprimeras lika mycket. SVGZ-filer kan dekomprimeras av alla program som expanderar filer komprimerade med gzip. För att kunna använda SGVZ bör du kontrollera att din mobila målenhet kan dekomprimera gzip-filer.