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 och arbeta med Device Central för att se till att filerna visas korrekt på webben.

Om webbgrafik

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.

Obs!

Det finns många Illustrator-mallar som har gjorts särskilt för webben, och det finns också webbsidor och banderoller. Välj Arkiv > Ny från mall om du vill välja en mall.

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 rastreradbild.

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 zoomarin till600 %. 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åverkarväldigtsmå justeringar hur objektet rastreras.

Förhandsvisa med pixlar avmarkerat (överst) och markerat (nederst)
Förhandsvisa med pixlar avmarkerat (överst) och markerat (nederst)

Obs!

Punktrastret känner av linjalens nollpunkt (0,0). Om du flyttar linjalens nollpunkt ändras teckningens rastrering.

Använda Adobe Device Central med Illustrator

Med Device Central kan Illustrator-användare förhandsgranska hur Illustrator-filer kommer att se ut på olika mobila enheter.

En grafiker kan till exempel använda Illustrator till att designa skrivbordsunderlägg för mobila enheter. När filen är skapad kan grafikern enkelt testa filen på en mängd telefoner. Sedan kan grafikern göra ändringar, till exempel ändra filen så att den ser bra ut på många telefoner eller skapa två separata filer som täcker en rad populära telefonskärmstorlekar.

Öppna Illustrator från Adobe Device Central

  1. Starta Device Central.
  2. Välj Arkiv > Nytt dokument i > Illustrator.

    I Device Central visas panelen Nytt dokument med rätt alternativ för att skapa ett nytt mobilt dokument i det valda programmet.

  3. Gör nödvändiga ändringar, t.ex. som att välja en ny spelarversion, visningsstorlek, Flash-version eller innehållstyp.
  4. Gör något av följande:
    • Markera alternativet Egen storlek för alla valda enheter och lägg till bredd och höjd (i pixlar).

    • Välj en enhet eller flera enheter från listan Enhetsuppsättningar eller Tillgängliga enheter.

  5. Om du markerar flera enheter väljs en storlek automatiskt. Om du vill välja en annan storlek klickar du på en annan enhet eller uppsättning med enheter.
  6. Klicka på Skapa.

    Det valda programmet öppnas med ett nytt mobilt dokument som är färdigt att redigera.

Skapa mobilt innehåll med Adobe Device Central och Illustrator

  1. Välj Arkiv > Nytt i Illustrator.
  2. Välj Mobil och enheter i Ny dokumentprofil.
  3. Klicka på Device Central när du vill stänga dialogrutan i Illustrator och öppna Device Central.
  4. Välj en innehållstyp.

    Listan Tillgängliga enheter till vänster uppdateras och visar de enheter som stödjer den valda innehållstypen.

  5. Välj en enhet, flera enheter eller en enhetsuppsättning i Device Central.

    Utifrån valda enheter och innehållstyp föreslår Device Central en eller flera storlekar på ritytor som ska skapas. Om du vill skapa ett dokument åt gången väljer du en föreslagen dokumentstorlek (eller väljer alternativet Egen storlek för alla valda enheter och anger egna värden för bredd och höjd).

  6. Klicka på Skapa.

    En tom AI-fil i den angivna storleken öppnas i Illustrator. Den nya filen har följande parametrar som standard:

    • Färgläge: RGB

    • Rasterupplösning: 72 ppi

  7. Fyll den tomma AI-filen med innehåll i Illustrator.
  8. Välj Arkiv > Spara för webben och enheter när du är färdig.
  9. Markera önskat format och ändra andra exportinställningar så som du vill ha dem i dialogrutan Spara för webben och enheter.
  10. Klicka på Device Central.

    En tillfällig fil med angivna exportinställningar visas på fliken Device Central-emulator. Om du vill fortsätta att testa dubbelklickar du på namnet på en annan enhet i listan Enhetsuppsättningar eller Tillgängliga enheter.

  11. Om du behöver göra ändringar i filen när du har förhandsgranskat filen i Device Central går du tillbaka till Illustrator.
  12. I dialogrutan Spara för webben och enheter i Illustrator kan du göra ändringar, till exempel välja ett annat format eller exportkvalitet.
  13. Om du vill testa filen igen med de nya exportinställningarna klickar du på Device Central.
  14. Klicka på Spara i dialogrutan Spara för webben och enheter i Illustrator när du är nöjd med resultatet.

    Obs!

    Välj Arkiv > Device Central om du bara vill öppna Device Central från Illustrator (i stället för att skapa och testa en fil).

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 filstorleken, 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, verktygstips, specialeffekter, ljud och animeringar.

  • Arbeta inom de slutliga måtten för din mobila målenhet/målenheter ä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 prova olika kombination 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.

Denna produkt är licensierad enligt en Creative Commons Erkännande-Ickekommersiell-Dela Lika 3.0 Unported-licens  Twitter™- och Facebook-inlägg omfattas inte av villkoren i Creative Commons-licensen.

Juridiska meddelanden   |   Onlinesekretesspolicy