Share
Formålet med Save for Web-funksjonen i Adobe Illustrator er å optimalisere grafikk for bruk på et nettsted eller annen skjermvisning, for eksempel en telefon med nettbrett. Ordet "optimalisere" refererer til den optimale balansen mellom filstørrelse og kvalitet. Vi vil ha små filstørrelser slik at de lastes raskt på en nettside, men vi ønsker ikke å ofre utseendet deres. Med Save for Web kan du forhåndsvise hvordan en optimalisert vektorgrafikk vil se ut, slik at du kan velge det beste kompromisset.
I denne artikkelen går jeg over filformatene som er tilgjengelige i Lagre for web, og viser hvilke formater som passer best for ulike typer kunstverk.
Du får tilgang til Lagre for web dialog under Fil Meny. Lagre for web er nesten et program i seg selv, og dialogvinduet tar opp det meste av skjermen.
Du kan velge å forhåndsvise kunstverket på en av tre måter. Du kan bare vise originalen alene. Dette virker imidlertid ganske ubrukelig, fordi du sannsynligvis vil se hvordan grafikken vil se ut når den er optimalisert. Du kan vise den optimaliserte forhåndsvisningen alene, eller du kan velge 2-Up, som gir deg forhåndsvisninger side om side. Du kan klikke på hver rute for å justere innstillingene. I bildet nedenfor er originalen til venstre, og den optimaliserte versjonen (i dette tilfellet som en GIF) er til høyre.
Du kan justere størrelsen på forhåndsvisningen i rullegardinmenyen nederst til venstre, og du kan også bruke kjente snarveier som Kommando / Ctrl-0 for å passe kunstverket i vinduet, eller Kommando / Ctrl-plus eller minus for å øke eller redusere forstørrelsen.
Klikk på Forhåndsvisning knappen åpner den optimaliserte grafikken i standard nettleseren din. Hvis du vil se hvordan det ser ut i andre nettlesere, kan du legge til flere ved å klikke på det lille klodsikonet ved siden av forhåndsvisningsknappen.
En av de viktigste delene av Save for Web-grensesnittet er filstørrelsen. Under hver forhåndsvisning er filtypen og dens respektive størrelse. Så i bildet nedenfor er den opprinnelige EPS til venstre, med en filstørrelse på 2,44M. Den optimaliserte GIF er til høyre, med en mye mindre filstørrelse på omtrent 39K. Siden målet med Save for Web er å finne den ideelle balansen mellom størrelse og kvalitet, vil du se på disse tallene ofte.
GIF er et av de eldste og mest brukte formatene på nettet. Den er ideell for bilder med områder med flat farge, som i dette eksemplet. GIF-fargeplassen er indeksert farge. Dette lar deg spesifisere et eksakt antall farger i fargebordet, slik at du kun kan bruke de du trenger, og dermed redusere den totale filstørrelsen.
Dialogboksen Lagre for web har flere GIF-forhåndsinnstillinger. Velg forskjellige innstillinger og hold øye med bildet og den resulterende filstørrelsen. I bildet nedenfor har jeg brukt en forhåndsinnstilling som har 128 farger. Som du ser, ser bildet bra ut, og filstørrelsen er 37,72K.
I det neste eksemplet har jeg valgt bare 8 farger. Du kan se filstørrelsen er nå 23.3K. Det er en betydelig besparelse, men bildet begynner å miste kvalitet. Kantene er grove fordi det ikke er nok farger for å fylle overgangene mellom hver form. Selv om det kun er fem farger i illustrasjonen - tre nyanser av blå, gul og hvit - Illustrator bruker flere farger i anti-aliasing-prosessen, slik at kantene og kurvene virker glatte.
GIF-farger kan begrenses til de som anses som "trygge". Dette er ikke en bekymring i disse dager, nå som skjermer kan vise millioner av farger, men det var en tid da designere ble rådet til å bruke bare de 216 farger som ble delt av Windows og Macintosh-systemer. Så hvis du ville sikre at grafikken din så på hver plattform, så ville du begrense farger til den paletten. I eksemplet nedenfor har jeg brukt Web Palette forhåndsinnstilt, og du kan se hvordan den lyseblå fargen har skiftet til en grønn blå.
En GIF kan være svart-hvitt, og den bruker noe som kalles dithering for å simulere en kontinuerlig tone. Du kan velge forskjellige dithering metoder, men de har alle en bestemt 1980 ser på dem.
GIFer støtter ett nivå av gjennomsiktighet. Dette betyr at hver piksel er enten solid eller fullstendig gjennomsiktig - du vil ikke bruke en GIF for et bilde med en myk skygge eller gjennomsiktig gradient.
Ved siden av kryssfeltet Transparency kan du velge en matt farge. Dette vil legge til en liten disposisjon rundt bildet i den fargen. Så hvis du plasserer GIF på en farget bakgrunn, kan du velge samme farge som matt fargen. På den måten vil overgangen mellom grafikk og bakgrunn virke jevn.
Du kan velge å klippe bildet til tavla, noe som vil gjøre pikselmåttene til den lagrede grafikken på samme måte som Illustrator-tavlen. Eller du kan velge å forlate denne boksen ukontrollert, som vil klippe bildet til grensene til vektorgrafikken. Dette er innstillingen du vil bruke mesteparten av tiden, siden det ikke er behov for ekstra gjennomsiktighet rundt bildet. Den resulterende filstørrelsen vil også være mindre.
I delen Bildestørrelse kan du velge å redusere eller forstørre den optimaliserte grafikken. Nomenklaturen er litt tvetydig her. Det refererer ikke til filstørrelsen på bildet i kilobytes, men pikselmålene, uttrykt som bredde og høyde.
Dette er hvor Illustrator har en fordel i forhold til et raster eller pikselbasert program som Photoshop. Hvis du forstørrer bildet for optimalisert utgang, bruker Illustrator vektorinformasjonen i filen for utvidelsen, og den resulterende grafikken er skarp og jevn. Hvis du skulle bruke Lagre for Web i Photoshop og prøve å forstørre et rasterbilde, vil det forstørrede bildet imidlertid se uklar ut.
Under feltene Image Size er en rullegardinmeny hvor du kan velge optimaliseringsmetode. Hvis grafikken din er tekst-tung, kan du velge Typeoptimalisert. I eksemplene nedenfor kan du se forskjellen mellom bildet som er optimalisert og en som ikke har optimalisert seg.
Fargebordet inneholder fargeprøver for hver farge som vil bli inkludert i den optimaliserte grafikken. Du kan faktisk dobbeltklikke på en fargeprøve og endre fargen. Her har jeg forandret den gule til rosa. Du kan se at prøven er nå halvgul og halvrosa i fargebordet, og når du svinger over den, gir verktøytipset deg RGB-sammenbrudd for originalen og for den nye fargen. Dette kan være nyttig hvis du lagrer en serie med samme bilde, og du vil at ett element skal være en annen farge i hver versjon. Ved å erstatte fargen i Save for Web, trenger du ikke å endre den opprinnelige vektoren.
Under fargebordet finner du en serie ikoner som lar deg justere fargen ytterligere. Når du velger en fargeprøve, kan du gjøre det gjennomsiktig, begrense det til en websikker farge, låse den eller slette den. En diamant inne i en fargekvoter indikerer en websikker farge, og når du svinger over den, vises den heksadesimale koden.
Det er noen flere innstillinger og rutiner du kan bruke med GIF-er. For eksempel kan du velge å interlace GIF, som vil laste bildet i flere passeringer i en nettleser. Denne metoden ble utviklet tilbake i dagene da de fleste var på sakte oppringt tilkobling. En interlaced grafikk ser ut til å laste raskere enn den faktisk gjør. Det er ikke mye grunn til å bruke det i dag, spesielt med en relativt liten fil som en GIF. De andre alternativene i GIF-innstillingene er enten høyt spesialiserte, eller litt utmattede, så jeg vil ikke bruke mer tid på dem. La oss gå videre til de andre formatene!
PNG (noen sier "P-N-G" og andre uttaler det "ping") format er ofte et bedre alternativ til GIF. PNG-8 ligner på GIF ved at den bruker 256 farger, støtter 1-bits gjennomsiktighet og kan bruke dithering. "8" betyr at dette er et 8-bits bilde. Hovedforskjellen mellom de to er måten de komprimerer bildeinformasjonen på. GIF bruker en "lossy" -metode, noe som betyr at noen av dataene blir kassert (eller "tapt") for å oppnå en mindre filstørrelse. PNG-metoden er lossless, men på grunn av sin komprimeringsalgoritme, er den resulterende filstørrelsen ofte betydelig mindre enn en GIF. Så hvorfor vil du til og med bruke en GIF, hvis PNG er bedre? Vel, ikke alle nettlesere støtter PNG-formatet (jeg ser på deg, Internet Explorer 6!). Men som flere mennesker oppgraderer til nyere nettlesere, er dette ikke så mye av et problem. Så fortsett og prøv PNG-8 på bilder som normalt ville kreve en GIF. De fleste av alternativene for PNG-8 er de samme som for GIF i forrige seksjon.
JPEG ble opprinnelig utviklet for å komprimere bilder, og er dermed best egnet for vektorer med kontinuerlige toner. JPEG er 24-bit, og støtter dermed godt over 16 millioner farger. JPEG-komprimering er lossy, og bildet vil nedbrytes hvis du prøver å komprimere det for mye. I bildet nedenfor kan du begynne å se blocky JPEG "artefakter", som er uønskede. Velg en høyere kvalitetsinnstilling til du får en bedre grafikk med en akseptabel filstørrelse.
Du kan velge å laste bildet i flere pass ved å velge Progressiv, og du kan uklare bildet for å redusere noen av artefakter. Ingen av disse metodene er ideell, eller faktisk nødvendig. De er throwbacks til dager med oppringt tilkoblinger og langsommere maskiner.
Som med GIF og PNG-8, kan du angi en pixeldimensjon i feltet Image Size, velge optimaliseringsmetoden og velge om du vil klippe bildet til tavlen. Det er ikke noe fargebord fordi JPEG er i RGB-modus, ikke indeksert farge.
JPEG er velegnet for bilder med kontinuerlig tone, men det er ikke så bra på grafikk med større områder med flat farge. I eksemplet nedenfor er JPEG til høyre. Selv i høyeste kvalitet er det verre enn GIF, og viser noen gjenstander.
PNG-24 er, som navnet antyder, et 24-biters bilde. På noen måter kombinerer det det beste fra begge verdener av GIF og JPEG, og er et overlegent format. Som JPEG kan den støtte millioner av farger. PNG-24 kan også inneholde alfa gjennomsiktighet, slik at den kan brukes til grafikk som har uskarpe kanter og gjennomsiktige skygger. Alle de fargene og gjennomsiktigheten kommer med en pris, men i en større filstørrelse. I eksemplet nedenfor kan du se at en JPEG som er lagret på høyinnstillingen, er nesten 22k, mens PNG er omtrent 95k. Men gjennomsiktigheten gjør at du kan plassere PNG-24 grafikken på en mønstret eller teksturert bakgrunn. Så hvis du trenger den typen fleksibilitet, er PNG-24 veien å gå.
Jeg håper du får bedre forståelse av filformatene i Illustrators Lagre for Web-funksjon. Hvert format har sine fordeler og ulemper, men med litt forsiktig testing kan du finne de beste innstillingene for kunstverket ditt. Dette er et kraftig verktøy og kan gjøre web-arbeidsflyten mye enklere og raskere. Når du bestemmer de ideelle innstillingene for bildene dine, kan du lagre dem som en egendefinert forhåndsinnstilling. Deretter kan du pakkeprosess hele mapper fulle av lignende bilder på kort tid.
Vector grafikk i denne artikkelen ble kjøpt fra GraphicRiver: Janitor vektor, gresskar vektor.
Accentsconagua