Illustrator bevat allerlei tools 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, u kunt diverse optimaliseringsopties gebruiken en met Adobe Device Central controleren of uw bestanden goed op het web worden weergegeven.

Webafbeeldingen

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 onbeschikbare 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.

Opmerking:

Illustrator bevat een groot aantal sjablonen die speciaal voor het web zijn gemaakt, met inbegrip van webpagina's en webbanners. Kies Bestand > Nieuw van sjabloon als u een sjabloon wilt kiezen.

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 gerasterdeafbeelding 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 inzoomttot600%. 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.

Voorvertoning pixels uit (boven) en aan (onder)
Voorvertoning pixels uit (boven) en aan (onder)

Opmerking:

Het pixelraster wordt beïnvloed door de oorsprong van de liniaal (0,0). Als u de oorsprong van de liniaal verplaatst, wordt de rastering van een illustratie gewijzigd.

Adobe Device Central gebruiken met Illustrator

Device Central biedt Illustrator-gebruikers de mogelijkheid om vooraf te controleren hoe Illustrator-bestanden eruit zullen zien op diverse mobiele apparaten.

Een grafisch ontwerper kan Illustrator bijvoorbeeld gebruiken om een achtergrond voor mobiele telefoons te maken. Nadat de achtergrond is gemaakt kan de ontwerper het bestand heel gemakkelijk testen op een groot aantal verschillende telefoons. De grafisch ontwerper kan vervolgens wijzigingen aanbrengen en het bestand bijvoorbeeld zodanig aanpassen dat de achtergrond er goed uitziet op een aantal telefoons, of twee afzonderlijke bestanden maken voor een reeks veelvoorkomende telefoonschermgrootten.

Illustrator openen vanuit Adobe Device Central

  1. Start Device Central.
  2. Selecteer Bestand > Nieuw document in > Illustrator.

    In Device Central verschijnt het paneel Nieuw document met de juiste opties om een nieuw document voor mobiele apparaten in de geselecteerde toepassing te maken.

  3. Breng de gewenste wijzigingen aan. Selecteer bijvoorbeeld de Player-versie, de weergavegrootte, de Flash-versie of het type inhoud.
  4. Voer een van de volgende handelingen uit:
    • Selecteer de optie Aangepaste grootte voor alle geselecteerde apparaten en voeg een breedte en hoogte toe (in pixels).

    • Selecteer een of meerdere apparaten vanuit de lijst met apparaatsets of de lijst met beschikbare apparaten.

  5. Als u meerdere apparaten selecteert, wordt er in Device Central automatisch een formaat geselecteerd. Als u een ander formaat wilt selecteren, klikt u op een ander apparaat of een andere set apparaten.
  6. Klik op Maken.

    De geselecteerde toepassing wordt geopend met daarin een nieuw document voor mobiele apparaten dat u kunt bewerken.

Mobiele inhoud maken met Adobe Device Central en Illustrator

  1. Selecteer Bestand > Nieuw in Illustrator.
  2. Selecteer in Nieuw documentprofiel de optie Mobiele apparaten.
  3. Klik op Device Central om het dialoogvenster in Illustrator te sluiten en Device Central te openen.
  4. Selecteer een inhoudstype.

    De lijst met beschikbare apparaten aan de linkerkant wordt bijgewerkt en hierin worden nu de apparaten weergegeven die het geselecteerde inhoudstype ondersteunen.

  5. Selecteer in Device Central een apparaat, meerdere apparaten of een apparaatset.

    In Device Central worden op grond van het geselecteerde apparaat of de geselecteerde apparaten en op grond van het geselecteerde inhoudstype suggesties gedaan voor het maken van één of meerdere tekengebiedgrootten. Als u één document wilt maken, selecteert u een aanbevolen documentgrootte (of selecteert u de optie Custom Size for all selected Devices en voert u de gewenste waarden in voor breedte en hoogte).

  6. Klik op Maken.

    Er wordt een leeg AI-bestand met de opgegeven grootte in Illustrator geopend. Voor het nieuwe bestand zijn standaard de volgende parameters ingesteld:

    • Kleurenmodus: RGB

    • Rasterresolutie: 72 ppi

  7. Vul het lege AI-bestand met inhoud in Illustrator.
  8. Als u klaar bent, selecteert u Bestand > Opslaan voor web en apparaten.
  9. Selecteer in het dialoogvenster Opslaan voor web en apparaten de gewenste indeling en wijzig desgewenst nog andere exportinstellingen.
  10. Klik op Device Central.

    Er wordt een tijdelijk bestand met de opgegeven exportinstellingen op het tabblad Emulator van Device Central weergegeven. Als u wilt doorgaan met testen, dubbelklikt u op de naam van een ander apparaat in de lijst met apparaatsets of in de lijst met beschikbare apparaten.

  11. Als u na het bekijken van de voorvertoning van het bestand in Device Central wijzigingen in het bestand wilt aanbrengen, gaat u terug naar Illustrator.
  12. Breng de gewenste wijzigingen aan in het dialoogvenster Opslaan voor web en apparaten van Illustrator. Selecteer bijvoorbeeld een andere indeling of kwaliteit voor het exporteren.
  13. Als u het bestand opnieuw wilt testen met de nieuwe exportinstellingen, klikt u op Device Central.
  14. Als u tevreden bent over het resultaat, klikt u in het dialoogvenster Opslaan voor web en apparaten van Illustrator op Opslaan.

    Opmerking:

    Als u alleen maar Device Central wilt openen vanuit Illustrator (in plaats van een bestand te maken en te testen), selecteert u Bestand > Device Central.

Tips voor het maken van Illustrator-afbeeldingen voor mobiele apparaten

Als u grafische inhoud voor mobiele apparaten wilt optimaliseren, moet u illustraties die in Illustrator zijn gemaakt, opslaan in een SVG-indeling, zoals de indeling SVG-t, die speciaal is ontworpen 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, weergave-onafhankelijkheid, 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 het mobiele apparaat of 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 het doelapparaat of 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. U kunt u de bestandsgrootte aanzienlijk terugbrengen door middel van compressie, 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.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid