Aanbevolen procedures voor het maken van webafbeeldingen

Illustrator bevat allerlei gereedschappen voor het maken van een lay-out voor webpagina's of voor het maken en optimaliseren van webafbeeldingen. Gebruik bijvoorbeeld webveilige kleuren, zorg dat de kwaliteit van de afbeelding en de bestandsgrootte op elkaar zijn afgestemd en kies de beste bestandsindeling voor uw afbeelding. Webafbeeldingen kunnen de voordelen van segmenten en afbeeldingen met hyperlinks benutten en u kunt diverse optimalisatieopties gebruiken om te controleren of uw bestanden goed op het web worden weergegeven.

Wanneer u afbeeldingen ontwerpt voor het web, dient u rekening te houden met andere kwesties dan bij het ontwerpen van afbeeldingen die worden afgedrukt. 

Houd daarom rekening met de volgende drie richtlijnen voor verstandige beslissingen over webafbeeldingen:

Gebruik webveilige kleuren.

Kleur is vaak een belangrijk aspect van illustraties. De kleuren die u in het tekengebied ziet, komen echter niet altijd overeen met de kleuren die in de webbrowser van een andere gebruiker worden weergegeven. U kunt dithering (het simuleren van niet-beschikbare kleuren) en andere kleurproblemen voorkomen door tijdens het maken van webillustraties twee voorzorgsmaatregelen te treffen. Werk ten eerste altijd in de RGB-kleurmodus. Ten tweede kunt u het beste webveilige kleuren gebruiken.

Zorg voor een balans tussen afbeeldingskwaliteit en bestandsgrootte.

Voor de distributie van afbeeldingen op het web is het van essentieel belang dat u kleine afbeeldingsbestanden maakt. Webservers kunnen kleine bestanden efficiënter opslaan en overdragen en bezoekers kunnen ze sneller downloaden. U kunt de grootte van en de geschatte downloadtijd voor een webafbeelding bekijken in het dialoogvenster Opslaan voor web en apparaten.

Kies de beste bestandsindeling voor de afbeelding.

Verschillende typen afbeeldingen moeten voor optimale weergave en voor geschikte bestandsgrootte voor het web in verschillende bestandsindelingen worden opgeslagen. Zie Optimalisatieopties voor webafbeeldingen voor meer informatie over specifieke indelingen.

De modus Voorvertoning pixels

Om webontwerpers in staat te stellen accurate pixelontwerpen te maken, is de eigenschap 'pixeluitlijning' toegevoegd aan Illustrator. Wanneer de eigenschap 'pixeluitlijning' is ingeschakeld voor een object, worden alle horizontale en verticale segmenten in het object uitgelijnd op het pixelraster, zodat lijnen een zuivere weergave krijgen. Bij transformaties wordt een object opnieuw uitgelijnd op het pixelraster op basis van de nieuwe coördinaten, zolang deze eigenschap is ingesteld voor het object. U kunt deze eigenschap inschakelen door de optie Uitlijnen op pixelraster te selecteren in het deelvenster Transformeren. Illustrator bevat ook de optie Nieuwe objecten uitlijnen op pixelraster op documentniveau. Deze optie is standaard ingeschakeld voor webdocumenten. Wanneer deze eigenschap is ingeschakeld, is voor nieuwe objecten die u tekent de eigenschap 'pixeluitlijning' standaard ingesteld.

Zie Op pixels uitgelijnde paden voor webworkflows tekenen voor meer informatie.

Wanneer u een illustratie opslaat in bitmapindeling, zoals JPEG, GIF of PNG, wordt de illustratie in Illustrator gerasterd op 72 pixels per inch. Als u een voorvertoning van gerasterde objecten wilt weergeven, kiest u Weergave > Voorvertoning pixel. Deze opdracht is met name handig als u de exacte plaatsing, grootte en anti-aliasing van objecten in een gerasterde afbeelding wilt bepalen .

Ga als volgt te werk om te begrijpen hoe objecten in pixels worden verdeeld: open een bestand met vectorobjecten, kies Weergave > Voorvertoning pixels en vergroot de afbeelding, zodat u de afzonderlijke pixels kunt zien. De plaatsing van pixels wordt bepaald door het pixelraster dat het tekengebied verdeelt in stappen van 1 punt (1/72 inch). U kunt het pixelraster bekijken als u inzoomt tot 600%. Als u een object verplaatst, toevoegt of transformeert, wordt het object uitgelijnd op het pixelraster. Het resultaat is dat eventuele anti-aliasing langs de 'uitgelijnde' randen van het object (meestal de linker- en bovenrand) verdwijnt. Schakel de opdracht Weergave > Magnetisch pixel uit en verplaats het object. Nu kunt u het object tussen de rasterlijnen plaatsen. U ziet hoe dit de anti-aliasing van het object beïnvloedt. Zoals u kunt zien, kunnen  zeer  kleine aanpassingen van invloed zijn op de manier waarop het object wordt gerasterd.

Tips voor het maken van Illustrator-afbeeldingen voor mobiele apparaten

Als u grafische inhoud wilt optimaliseren voor mobiele apparaten, moet u illustraties die in Illustrator zijn gemaakt, opslaan in een SVG-indeling, zoals de indeling SVG-t, die speciaal is ontwikkeld voor mobiele apparaten.

Gebruik de volgende tips om ervoor te zorgen dat afbeeldingen die in Illustrator zijn gemaakt, goed worden weergegeven op mobiele apparaten:

• Gebruik de SVG-standaard om inhoud te maken. Als u SVG gebruikt om vectorafbeeldingen te publiceren op mobiele apparaten, resulteert dat in kleine bestanden, onafhankelijkheid van schermen, een uitstekend kleurbeheer, de mogelijkheid om in en uit te zoomen en bewerkbare tekst (binnen de broncode). Omdat SVG op XML is gebaseerd, kunt u bovendien interactieve functies in uw afbeeldingen opnemen, zoals markering, knopinfo, speciale effecten, geluid en animatie.

• Werk van het begin af aan met de uiteindelijke afmetingen van de mobiele apparaten waarvoor u de inhoud maakt. Hoewel SVG schaalbaar is, is het verstandig om direct te werken op de juiste grootte om ervoor te zorgen dat de uiteindelijke afbeeldingen wat betreft kwaliteit en formaat zijn geoptimaliseerd voor de doelapparaten.

• Stel de kleurmodus van Illustrator in op RGB. SVG wordt weergegeven op apparaten met een RGB-rasterbeeldscherm, zoals een monitor.

• U kunt proberen een bestand minder groot te maken door het aantal objecten (inclusief groepen) te verminderen of door de afbeelding minder complex te maken (minder punten). Als u minder punten gebruikt, wordt de hoeveelheid tekstuele informatie die nodig is om de afbeelding te beschrijven in het SVG-bestand, aanzienlijk kleiner. Als u het aantal punten wilt verminderen, selecteert u Object > Pad > Vereenvoudigen en probeert u verschillende combinaties uit om de juiste balans te vinden tussen kwaliteit en aantal punten.

• Gebruik waar mogelijk symbolen. Als u een symbool gebruikt om een bepaald object meerdere malen weer te geven, hoeven de vectoren van dat object slechts eenmaal te worden gedefinieerd. Dit is handig als een illustratie objecten bevat die meerdere keren worden gebruikt, zoals achtergronden voor knoppen.

• Als u afbeeldingen met animatie maakt, moet u proberen het aantal objecten te beperken en om objecten waar mogelijk opnieuw te gebruiken om de bestandsgrootte te verminderen. Pas animatie toe op groepen objecten in plaats van op afzonderlijke objecten om te voorkomen dat dezelfde code meerdere malen voorkomt.

• U kunt overwegen om SVGZ, de gecomprimeerde gzipped-versie van SVG, te gebruiken. Met compressie kunt u de bestandsgrootte aanzienlijk terugbrengen, maar in hoeverre een bestand kan worden gecomprimeerd, is afhankelijk van de inhoud. Tekst kan gewoonlijk in sterke mate worden gecomprimeerd. Binair gecodeerde inhoud, zoals ingesloten rasters (JPEG-, PNG- of GIF-bestanden), kan daarentegen nauwelijks worden gecomprimeerd. SVGZ-bestanden kunnen worden gedecomprimeerd met elke toepassing waarmee bestanden die zijn gecomprimeerd met gzip, kunnen worden 'uitgepakt'. Als u SGVZ wilt gebruiken, moet u eerst controleren of op het mobiele apparaat waarvoor u de inhoud maakt, gzip-bestanden kunnen worden gedecomprimeerd.