Bedste fremgangsmåder for oprettelse af webgrafik

Illustrator indeholder en lang række værktøjer til oprettelse af layout til websider eller oprettelse og optimering af webgrafik. Brug f.eks. websikre farver, afstem billedkvaliteten med filstørrelsen, og vælg det bedste filformat til grafikken. Webgrafik kan udnytte fordelene ved udsnit og grafikobjekter, og du kan bruge mange forskellige optimeringsindstillinger for at sikre, at filerne vises korrekt på nettet.

Når du designer grafik til internettet, skal du gøre dig andre overvejelser, end når du designer grafik til tryk. 

Følgende tre retningslinjer vil kunne hjælpe dig med at træffe de rigtige beslutninger om webgrafik:

Brug websikre farver.

Farve er ofte det vigtigste aspekt af illustrationer. De farver, som du ser på tegnebrættet, er imidlertid ikke nødvendigvis de farver, som vises i en webbrowser på en andens system. Du kan forhindre rastersimulering (metoden med at simulere utilgængelige farver) og andre farveproblemer ved at træffe to foranstaltninger, når du opretter webgrafik. For det første skal du altid arbejde i RGB-farvetilstand. For det andet skal du bruge websikre farver.

Balance mellem billedkvalitet og filstørrelse.

Det er afgørende for at distribuere billeder på internettet, at du opretter grafikfiler i små størrelser. Med mindre filstørrelser kan webservere gemme og sende billeder mere effektivt, og brugerne kan hente billeder hurtigere. Du kan få vist størrelsen og den forventede overførselstid for et webgrafikelement i dialogboksen Gem til web og enheder.

Vælg det bedste filformat til grafikken.

De forskellige typer grafik skal gemmes i forskellige filformater for at blive vist bedst muligt og oprette en filstørrelse, der er passende til brug på internettet. Yderligere oplysninger om bestemte formater finder du under Indstillinger til optimering af webgrafik.

Om tilstanden Vis pixel

For at sætte webdesignere i stand til at oprette pixelnøjagtigt design er den pixeljusterede egenskab blevet tilføjet i Illustrator. Når den pixeljusterede egenskab er aktiveret for et objekt, bliver alle de vandrette og lodrette segmenter i objektet justeret til pixelgitteret, hvilket gør stregerne knivskarpe. Når denne egenskab er angivet for objektet, vil det under enhver transformering blive genjusteret til pixelgitteret i overensstemmelse med dets nye koordinater. Du kan aktivere denne egenskab ved at vælge indstillingen Juster til pixelgitter i panelet Transformer. Illustrator indeholder også indstillingen Juster nye objekter til pixelgitter på dokumentniveau, der som standard er aktiveret for webdokumenter. Når denne egenskab er aktiveret, får nye objekter, som du tegner, pixeljusteringsegenskaben som standard.

Se Tegning af pixeljusterede kurver til webarbejdsforløb for yderligere oplysninger.

Når du gemmer illustrationer i et bitmapformat, f.eks. JPEG, GIF eller PNG, rasteriserer Illustrator illustrationerne med 72 pixel pr. tomme. Du kan se et eksempel på, hvordan objekter ser ud, når de rasteriseres, ved at vælge Vis > Vis pixel. Dette er især praktisk, når du vil styre objekters præcise placering, størrelse og kantudjævning i en rasteriseret grafik .

For at forstå, hvordan Illustrator opdeler objekter i pixel, skal du åbne en fil med vektorobjekter, vælge Vis > Vis pixel og forstørre illustrationen, så du kan se de enkelte pixel. Placeringen af pixel bestemmes af det pixelgitter, der inddeler tegnebrættet i 1‑punkts intervaller (1/72 tomme). Du kan få vist pixelgitteret ved at zoome ind til  600 % visning. Hvis du flytter, tilføjer eller transformerer et objekt, fastgøres objektet til pixelgitteret. Som følge af dette forsvinder kantudjævning langs de "fastgjorte" kanter af objektet (normalt venstre og øverste kant). Fravælg nu kommandoen Vis > Fastgør til pixel, og flyt objektet. Du vil nu kunne placere objektet mellem gitterlinjerne. Læg mærke til, hvordan dette påvirker objektets kantudjævning. Som du kan se, kan  meget  små justeringer påvirke den måde, som objektet rasteriseres på.

Tip til oprettelse af Illustrator-billeder til mobilenheder

Du kan optimere grafisk indhold til mobilenheder ved at gemme illustrationer oprettet i Illustrator i et SVG-format, herunder SVG‑t, som er særligt designet til mobilenheder.

Brug følgende tip til at sikre, at billeder oprettet i Illustrator vises godt på mobilenheder:

• Brug SVG-standarden til at oprette indhold. Hvis du bruger SVG til at udgive vektorgrafik på mobilenheder, medfører det mindre filstørrelse, skærmuafhængighed, bedre farvestyring, mulighed for zoom og tekst, der kan redigeres (i kildekoden). Eftersom SVG er XML-baseret, kan du ligeledes medtage interaktivitet i billeder, f.eks. fremhævning, værktøjstip, specialeffekter, lyd og animation.

• Arbejd fra starten med de endelige dimensioner for den eller de mobile målenheder. Selvom SVG er skalerbar, kan du ved at arbejde med den korrekte størrelse sikre, at den endelige grafik er optimeret i kvalitet og størrelse til målenhed(er).

• Indstil Illustrator-farvetilstanden til RGB. SVG ses på RGB-rasterenheder som f.eks. skærme.

• Du kan formindske filstørrelsen ved at prøve at reducere antallet af objekter (herunder grupper) eller gøre filen mindre kompleks (færre punkter). Når du bruger færre punkter, medfører det en markant reduktion af den mængde tekstoplysninger, der er nødvendig for at beskrive illustrationen i SVG-filen. Du kan reducere punkter ved at vælge Objekt > Kurve > Forenkling og prøve forskellige kombinationer for at finde en balance mellem kvalitet og antal punkter.

• Brug symboler, når det er muligt. Symboler definerer de vektorer, der beskriver et objekt én gang i stedet for flere gange. Det er praktisk, hvis illustrationen indeholder objekter, f.eks. knapbaggrunde, der genbruges.

• Når du animerer grafik, skal du begrænse det anvendte antal objekter og prøve at genbruge objekter så meget som muligt for at reducere filstørrelsen. Anvend animationer på grupper af objekter i stedet for på enkelte objekter for at undgå gentagelse af kode.

• Overvej at bruge SVGZ, den komprimerede gzippede version af SVG. Komprimering kan formindske filstørrelsen markant, afhængigt af indholdet. Tekst kan normalt komprimeres kraftigt, men det gælder ikke binært kodet indhold som f.eks. integrerede rastere (JPEG-, PNG- eller GIF-filer). SVGZ-filer kan dekomprimeres af et program, som udpakker filer komprimeret med gzip. Kontrollér, at den mobile målenhed kan dekomprimere gzip-filer, for at bruge SGVZ korrekt.