Tips & trucs voor Adobe InDesign: Grafieken exporteren voor het web met de juiste resolutie.

Er zijn mensen die daadwerkelijk grafische afbeeldingen voor het web maken in Adobe InDesign. Dat is mogelijk.

Er was een situatie waarin een vriend me vroeg hoe het kan dat wanneer ik een afbeelding exporteer als JPG en deze in Photoshop bekijk, de resolutie niet meer klopt. Ik moest zelf eerst kijken hoe dat mogelijk is.

Stap 1

Daarom zal ik gewoon laten zien hoe je dit eigenlijk correct doet:

Ik ga naar Bestand>Nieuw>Document en daar kan ik al bij Doelmedium instellen of ik dit voor Drukwerk, Web of Digitale Publicatie wil hebben. Ik heb Web nodig.

Als doeleenheid worden pixels gebruikt, dat is correct. Ik zou bij PageFormat ook kunnen aangeven welke resolutie ik precies wil hebben of ik kan dit direct invoeren bij Breedte en Hoogte. Laten we zeggen 800 × 200 Px en bevestigen met OK.

Stap 2

Vervolgens heb ik hier het werkgebied en ik zal hier bijvoorbeeld een knop maken.

Hiervoor gebruik ik het Rechthoek-gereedschap en trek een vorm.
Vervolgens moet er een Verloop van boven naar beneden worden toegevoegd. Dus kies ik Type: Lineair en Hoek: 90°.
Ik geef aan dat ik geen Contour wil hebben via Vul.

Stap 3

Natuurlijk kan ik de kleur nog aanpassen als deze mij niet bevalt. Maar dat is nu niet relevant.
Maar als dat wel zo is, dan kan ik de kleur kiezen door naar Vul>Nieuwe Verloop te gaan. Dat wordt direct toegevoegd en dan kan ik met een Dubbelklik naar binnen gaan en bijvoorbeeld de schuifregelaar Zwart iets naar rechts verplaatsen, zodat het niet meteen volledig wit wordt.

Stap 4

Hierna wilde ik nog wat afronden en ga daarom naar Object>Hoekopties.
Dit doe ik altijd graag met Voorbeeld, dan zie je meteen het resultaat. Vervolgens stel ik Afgerond en 20 px in.
Dan ziet het er als volgt uit:

Stap 5

Er zit alweer een contour in die ik niet wilde en haal deze eruit. Ik zou nu nog wat tekst kunnen invoeren, maar dat laten we zo.

Stap 6

Dit wil ik nu exporteren en ga dus naar Bestand>Exporteren en noem dit "button".
Vervolgens kan ik kiezen welk bestandsformaat ik wil hebben. PNG is interessant, omdat ik daar de transparanties kan opslaan. Laten we dat eens doen.
Vervolgens krijg ik exact hetzelfde venster als bij JPG. Hier kan ik meerdere pagina's exporteren, maar op dit moment heb ik er slechts één, dus dat is in dit geval niet relevant.
Bovendien kan ik de Kwaliteit instellen. Bij Resolutie staat altijd 300 ppi ingesteld - ppi staat voor pixels per inch.

Natuurlijk is een transparante achtergrond belangrijk en ik klik op Exporteren.

Stap 7

Ik open dit bestand nu in Photoshop en zie meteen dat het een beetje groot is.
En als ik kijk bij Afbeelding>Afmetingen, dan zijn dat 3334 × 834 pixels. Dit had ik echter niet ingesteld bij het maken van het document!

Stap 8

Dus nogmaals: We gaan terug naar InDesign en naar Bestand>Exporteren. Deze keer noem ik het "button2".
En nu komt het: Hier moet je 72 ppi invoeren bij Resolutie. Meer is het niet. Pas als deze waarde is ingevuld, is het ook exact de resolutie die we aan het begin hadden ingesteld.

Vervolgens heeft het in Photoshop de gewenste 800 × 200 pixels.




Dat is eigenlijk alles. Het is niet meer dan dat. Jullie moeten er gewoon op letten dat bij het exporteren 72 ppi wordt ingevoerd.