Share
Syftet med funktionen Spara för webb i Adobe Illustrator är att optimera grafik för användning på en webbplats eller annan skärmdisplay, till exempel en telefon med surfplattan. Ordet "optimera" avser den optimala balansen mellan filstorlek och kvalitet. Vi vill ha små filstorlekar så att de laddas snabbt på en webbsida, men vi vill inte offra sitt utseende. Spara för webben låter dig förhandsgranska hur en optimerad vektorgrafik kommer att se ut, så du kan välja den bästa kompromissen.
I den här artikeln går jag över de filformat som finns tillgängliga i Spara för webben och visar vilka format som passar bäst för olika typer av konstverk.
Du kommer åt Spara för webben dialog under Fil meny. Spara för webben är nästan en applikation i sig själv, och dialogrutan tar upp det mesta av din skärm.
Du kan välja att förhandsgranska ditt konstverk på ett av tre sätt. Du kan helt enkelt visa originalet ensamt. Detta verkar dock ganska värdelöst, för du kommer förmodligen vilja se hur grafiken kommer att se ut när den är optimerad. Du kan bara visa den optimerade förhandsgranskningen, eller du kan välja 2-Up, vilket ger dig förhandsvisningar sida vid sida. Du kan klicka på endera rutan för att justera inställningarna. I bilden nedan är originalet till vänster, och den optimerade versionen (i detta fall som en GIF) är till höger.
Du kan justera förhandsgranskningens storlek i rullgardinsmenyn längst ner till vänster, och du kan också använda kända kortkommandon som Kommando / Control-0 för att passa konstverket i fönstret, eller Command / Control-plus eller minus- för att öka eller minska förstoringen.
Klicka på Förhandsvisning knappen öppnar den optimerade grafiken i din standardwebbläsare. Om du vill se hur det ser ut i andra webbläsare kan du lägga till mer genom att klicka på den lilla världen-ikonen bredvid knappen Förhandsgranska.
En av de viktigaste delarna i Save for Web-gränssnittet är filstorleken. Under varje förhandsgranskning är filtypen och dess respektive storlek. Så i bilden nedan är den ursprungliga EPS till vänster, med en filstorlek på 2,44M. Den optimerade GIF är till höger, med en mycket mindre filstorlek på cirka 39K. Eftersom målet för Spara för webben är att hitta den idealiska balansen mellan storlek och kvalitet, kommer du att titta på dessa nummer ofta.
GIF är ett av de äldsta och mest använda format på webben. Den är idealisk för bilder med områden med platt färg, som i det här exemplet. Färgutrymmet GIF är indexerad färg. Det här låter dig ange ett exakt antal färger i färgbordet så att du bara kan använda dem du behöver, vilket minskar den totala filstorleken.
Dialogrutan Spara för webb har flera GIF-förinställningar. Välj olika inställningar och hålla koll på bilden och den resulterande filstorleken. I bilden nedan har jag använt en förinställning som har 128 färger. Som du ser kan bilden se bra ut och filstorleken är 37,72K.
I nästa exempel har jag valt endast 8 färger. Du kan se filstorleken är nu 23.3K. Det är en betydande besparing, men bilden börjar börja förlora kvalitet. Kanterna är grova eftersom det inte finns tillräckligt med färger för att fylla i övergångarna mellan varje form. Även om det bara finns fem färger i illustrationen - tre nyanser av blått, gult och vitt - Illustrator använder fler färger i anti-aliasing-processen så att kanterna och kurvorna ser jämna ut.
GIF-färger kan begränsas till de som anses vara "webbsäkra". Det här är inte riktigt en oro idag, nu kan bildskärmarna visa miljontals färger, men det var dags då designers rekommenderades att endast använda de 216 färgerna som delades av Windows och Macintosh-system. Så om du ville se till att din grafik såg ut på samma plattform, skulle du begränsa färgerna till den paletten. I exemplet nedan har jag använt Web Palette förinställd, och du kan se hur den ljusblå färgen har flyttat till en grönblå.
En GIF kan vara svartvitt, och den använder något som kallas dithering för att simulera en kontinuerlig ton. Du kan välja olika dithering metoder, men de har alla en bestämd 1980-tittar på dem.
GIF stödjer en nivå av öppenhet. Det betyder att varje pixel är antingen solid eller helt transparent - du skulle inte använda en GIF för en bild med en mjuk skugga eller genomskinlig gradient.
Bredvid kryssrutan Transparency kan du välja en matt färg. Detta lägger till en liten skiss över bilden i den färgen. Så om du placerar GIF på en färgad bakgrund kan du välja samma färg som matt färg. På så sätt visas övergången mellan grafik och bakgrund smidig.
Du kan välja att klippa bilden till tavlan, vilket gör pixeldimensionerna för den sparade grafiken samma som Illustrator-tavlan. Eller du kan välja att lämna denna ruta omarkerad, vilken kommer att klippa bilden till gränserna för vektorgrafik. Det här är den inställning som du förmodligen kommer att använda mest av tiden, eftersom det inte finns något behov av extra genomskinlighet kring bilden. Den resulterande filstorleken blir också mindre.
I avsnittet Bildstorlek kan du välja att minska eller förstora den optimerade grafiken. Nomenklaturen är lite tvetydig här. Det refererar inte till bildens filstorlek i kilobytes, men pixeldimensionerna, uttryckta som bredd och höjd.
Det är här Illustrator har en fördel över en raster eller pixelbaserad applikation som Photoshop. Om du förstorar bilden för optimal utskrift använder Illustrator vektorgraden i filen för utvidgningen, och den resulterande grafiken är skarp och jämn. Om du skulle använda Spara för webben i Photoshop och försöka att förstora en rasterbild, skulle det förstorade konstverket se ut luddigt.
Nedan fältet Bildstorlek finns en rullgardinsmeny där du kan välja optimeringsmetod. Om din grafik är text-tung kan du välja Typoptimerad. I exemplen nedan kan du se skillnaden mellan den optimerade bilden och den som inte har någon optimering tillämpad.
Färgtabellen innehåller färgar för varje färg som kommer att finnas i den optimerade grafiken. Du kan faktiskt dubbelklicka på en kolumn och ändra dess färg. Här har jag ändrat den gula till rosa. Du kan se swatchen är nu halvgul och halvrosa i Färgbordet, och när du svävar över det, ger verktygsspetsen RGB-uppdelning för originalet och för den nya färgen. Det här kan vara användbart om du sparar en serie av samma bild, och du vill att ett element ska ha en annan färg i varje version. Genom att byta färg i Spara för webben behöver du inte ändra originalvektorn.
Nedanför Färgbordet är en serie ikoner som gör att du kan justera färgen ytterligare. När du väljer en prövning kan du göra det genomskinligt, begränsa det till en webbsäker färg, låsa den eller ta bort den. En diamant inuti en färgstämpel indikerar en webbsäker färg och när du svävar över den visas den hexadecimala koden.
Det finns några fler inställningar och metoder du kan använda med GIF. Till exempel kan du välja att interlace GIF, som laddar bilden i flera pass i en webbläsare. Denna metod utvecklades tillbaka i de dagar då de flesta var på långsama uppringningsanslutningar. En interlaced grafik verkar laddas snabbare än den faktiskt gör. Det finns inte mycket anledning att använda det idag, särskilt med en relativt liten fil som en GIF. De andra alternativen i GIF-inställningarna är antingen högspecialiserade, eller lite modiga, så jag spenderar inte mer tid på dem. Låt oss gå vidare till andra format!
PNG (vissa människor säger "P-N-G" och andra uttalar det "ping") format är ofta ett bättre alternativ till GIF. PNG-8 liknar GIF genom att den använder 256 färger, stöder 1-bitars genomskinlighet och kan använda dithering. "8" betyder att det här är en 8-bitars bild. Huvudskillnaden mellan de två är hur de komprimerar bildinformationen. GIF använder en "lossy" -metod, vilket innebär att vissa data kasseras (eller "förloras") för att uppnå en mindre filstorlek. PNG-metoden är förlustfri, men på grund av dess komprimeringsalgoritm är den resulterande filstorleken ofta signifikant mindre än en GIF. Så varför skulle du ens använda en GIF, om PNG är bättre? Tja, inte alla webbläsare stöder PNG-formatet (jag tittar på dig, Internet Explorer 6!). Men som fler människor uppgraderar till nyare webbläsare är det inte så mycket av ett problem. Så fortsätt och försök PNG-8 på bilder som normalt skulle kräva en GIF. De flesta av alternativen för PNG-8 är desamma som för GIF i föregående avsnitt.
JPEG har ursprungligen utvecklats för att komprimera foton, och är därför bäst lämpad för vektorer med kontinuerliga toner. JPEG-filer är 24-bitars och stöder därmed väl över 16 miljoner färger. JPEG-komprimering är förlust och bilden kommer att försämras om du försöker komprimera den för mycket. I bilden nedan kan du börja se blockiga JPEG "artefakter" som är oönskade. Välj en högre kvalitetsinställning tills du får en bättre grafik med en acceptabel filstorlek.
Du kan välja att ladda bilden i flera passeringar genom att välja Progressiv, och du kan oskärpa bilden för att mildra några av artefakterna. Ingen av dessa metoder är idealiska eller faktiskt nödvändiga. De är throwbacks till dagen för uppringningsanslutningar och långsammare maskiner.
Precis som med GIF och PNG-8 kan du ange en pixeldimension i fältet Bildstorlek, välj optimeringsmetoden och välj om du vill klippa bilden till tavlan. Det finns inget färgbord, eftersom JPEG-filer finns i RGB-läge, inte indexerad färg.
JPEG är väl lämpad för bilder med kontinuerlig ton, men det är inte så bra på grafik med större områden med platt färg. I exemplet nedan är JPEG till höger. Även i högsta kvalitet, ser det ut värre än GIF, och visar vissa artefakter.
PNG-24 är, som namnet antyder, en 24-bitars bild. På vissa sätt kombinerar den det bästa av båda världarna av GIF och JPEG, och är ett överlägset format. Liksom JPEG kan den stödja miljontals färger. PNG-24 kan också innehålla alfa-genomskinlighet, så det kan användas för grafik som har suddiga kanter och transparenta skuggor. Alla dessa färger och transparens kommer med ett pris, dock i en större filstorlek. I exemplet nedan kan du se att en JPEG sparad i hög inställning är nästan 22K, medan PNG är cirka 95K. Men genomskinligheten gör att du kan placera PNG-24-grafiken på en mönstrad eller texturerad bakgrund. Så om du behöver den typen av flexibilitet, är PNG-24 vägen att gå.
Jag hoppas att du har en bättre förståelse för filformat i Illustrators Spara för webbfunktion. Varje format har sina fördelar och nackdelar, men med noggrann testning kan du hitta de bästa inställningarna för ditt konstverk. Detta är ett kraftfullt verktyg och kan göra ditt webflöde mycket enklare och snabbare. När du bestämmer de idealiska inställningarna för dina bilder kan du spara dem som en anpassad förinställning. Då kan du satsa hela mappar som är fulla av liknande bilder på nolltid.
Vektorgrafik i denna artikel köptes från GraphicRiver: Janitor vektor, pumpa vektor.
Accentsconagua