Hvordan du optimaliserer webbilder i PNG-formater - dummies

Når du designer for iPhone, iPad eller iPod touch, må du velge de beste bildformatene og oppløsningen, samt optimalisere bildene og annen grafikk.

Hvis du jobber med en grafikk, for eksempel en logo, tegneseriefigur eller tegning som kan vises i 256 farger eller færre, er det best å bruke PNG 8-formatet og redusere det totale antallet farger som brukes i bildet så mye som mulig for å redusere filstørrelsen.

Hvis du vil lage en farge i bildet gjennomsiktig, og du jobber med et fotografi eller en annen type bilde med millioner av farger, er de beste alternativene dine PNG 24.

To bidra til å gjøre opp for nedbrytingen i bildekvalitet som kan skje når farger blir fjernet, bruker PNG et dithering-trick . Dithering innebærer alternerende piksler i et sjakkbrett-lignende mønster for å lage subtile fargevarianter, selv med en begrenset fargepalett. Effekten kan glatte bildens kanter og få det til å ha flere farger enn det egentlig gjør.

For å konvertere et bilde til PNG 8 eller 24-formatet i Photoshop, følg disse trinnene (i Photoshop Elements eller Fireworks, prosessen er lik, selv om de spesifikke trinnene kan variere):

1With Bilde åpent i Photoshop, velg Arkiv → Lagre for web og enheter (eller Fil → Lagre for web).

Dialogboksen Lagre for web og enheter vises. I dette eksemplet ser du svart-hvitt-logoen for nettsiden inplainsight art. PNG 8-formatet er best for bilder med begrensede farger, for eksempel tegneserier og line art.

2I øverste venstre hjørne av dialogboksen velger du 2-opp eller 4-opp for å vise flere versjoner av samme bilde for enkel sammenligning ved siden av siden.

Dette eksemplet viser 2-Up, som gjør det mulig å se det opprinnelige bildet av logoen øverst, samt en forhåndsvisning av den optimaliserte versjonen nederst.

3Velg et forhåndsvisningsbilde for å begynne å endre innstillingene.

Klikk på et bilde for å gjøre det aktivt i dialogvinduet.

4I høyre side av dialogvinduet, under Preset, klikker du på den lille pilen for å åpne rullegardinlisten Optimalisert filformat og velger enten PNG 8 eller 24.

Hvis du velger PNG 8, vil du få de minste filstørrelsene. Velg bare PNG 24 hvis du vil optimalisere et bilde med mange farger og fortsatt kunne sette en farge til gjennomsiktig.

5 I feltet Farger velger du antall farger, som vist i Figur 8-5.

Jo færre farger du bruker, jo mindre filstørrelsen og jo raskere vil bildet lastes ned. Men vær forsiktig; Hvis du reduserer fargene for mye, mister du detaljer.Det ideelle antall farger avhenger av bildet ditt; Hvis du går for langt, ser bildet ditt forferdelig ut.

6 Hvis du vil opprettholde et gjennomsiktig område i bildet, merker du av for Transparency.

Ethvert område av bildet som var gjennomsiktig når du opprettet bildet i redigeringsprogrammet, vises transparent i forhåndsvisningsvinduet. Hvis du ikke har et gjennomsiktig område i bildet ditt, har denne innstillingen ingen effekt.

Åpenhet er et godt triks for å gjøre tekst eller et bilde ser ut til å flyte på en nettside. Det skyldes at en gjennomsiktig bakgrunn ikke vises på nettsiden. Du kan velge gjennomsiktighet som et bakgrunnsalternativ i dialogboksen Ny fil når du oppretter et nytt bilde i Photoshop eller Photoshop Elements.

7 Hvis du velger Transparency, spesifiser du også en matfarge.

Du vil at den matte fargen skal matche bakgrunnen til nettsiden din, slik at dithering langs den transparente kanten vil blande seg med bakgrunnen. Hvis du ikke angir en matt farge, er gjennomsiktigheten angitt for en hvit bakgrunn, noe som kan forårsake en halo effekt når bildet vises på en farget bakgrunn.

8Velg andre innstillinger etter ønske.

Resten av innstillingene i denne dialogboksen kan etterlates i sine standardinnstillinger i Photoshop.

9 Klikk på Lagre.

Dialogboksen Lagre optimalisert som åpnes.

10Engi et navn på bildet og lagre det i bildemappen (eller en annen mappe) i lokalmappen din.

Gjenta disse trinnene for hvert bilde du vil optimalisere som en GIF eller PNG for nettstedet ditt.

Prøv og feil er en flott teknikk i dialogboksen Lagre for web og enheter. Forhåndsvisningsvinduet viser tydeligvis den stadig forverrende effekten som velger færre og færre farger produserer.