Maatvoering & workflow voor responsive magazines, brochures en folders

Leuk al die pixels, points, ppi’s en dpi’s, maar welke maten kun je nu praktisch gezien het beste aanhouden?

Het gemakkelijkste en goedkoopste is om uit te gaan van de breedte en niet van de hoogte. Uitzondering hierop zijn fullscreen fotopagina's zoals een cover of artikelintro. Waarom uitgaan van de breedte? Elke dag worden nieuwe apparaten gelanceerd, dus het wordt veel te complex om voor alle devices toekomstbestendig te zijn. Het is een hels karwei om voor alles een passend ontwerp te maken.

Pixels zijn de kleinste vierkante elementen welke je kan controleren op een digitale display. Zoals Steve Jobs hier beneden uitlegd is het zo dat hoe meer pixels in een scherm kunnen worden geplaatst, hoe hoger de PPI (pixels per inch), en hoe duidelijker de weergegeven inhoud wordt. Points daarentegen zijn een resolutie-onafhankelijke maatvoering en geven vooral de beeldschermverhouding aan.

Wijlen Steve Jobs legt haarfijn de pixeldichtheid van een retina display uit.


Pixel maten & workflow voor responsive digitale publicaties


Een effectieve workflow gaat uit van de schermresolutie minus browser en verticale scrollbar

  1. Start met iPad liggend: 1010 pixels breed op 72dpi (single page 1024px bij 660px)
  2. Daarna de desktop versie: 1245 pixels breed (single page 1280px bij 674px)
  3. De mobiele versie : 310 pixels en hoewel er meer Android- smartphones zijn wordt in de praktijk de breedte van iPhone 5 aangehouden. (single page 320px bij 460px)

Bij het exporteren voor nieuwere Apple devices met Retina moet je rekening houden met het aantal pixels per inch. Voor iphone 4 en hoger moet je je foto's, iccontjes etc. dus 2 maal zo groot opslaan. Bijvoorbeeld voor een Retina iPad 3 & 4 volledige scherm is een foto nodig van 2048 pixels breed.

Een simpele manier om afbeeldingen te maken, welke er goed in de verschillende sociale media uitzien, kan je het beste deze maten aanhouden (2016) :
Horizontaal (landscape) – 1024 x 512 pixels
Verticaal (portrait) – 800 x 1200 pixels



Tips & Trucs


  • Handig gratis tooltje voor Photoshop welke je helpt bij het exporteren naar "Retina ready" digitale publicaties via http://retinize.it/
  • Wil je meer weten over cross-DPI & cross-platform design? Lees dan de "Designers Guide to DPI" via http://sebastien-gabriel.com/
  • Heb je meerdere foto's om te verkleinen? Gebruik dan Shrink-O-Matic! Het kan JPGs, GIFs en PNGs aan. via http://toki-woki.net/
  • Heb je net een verkeerd of exotisch bestand aangeleverd gekregen? Gebruik dan https://CloudConvert.com/, deze cloud dienst ondersteunt de conversie tussen meer dan 200 verschillende audio, video, documenten, zips, beeld, spreadsheet en presentatie formats.
  • Facebook advertenties waar de tekst meer dan 20% van de oppervlakte van de afbeelding beslaat zijn verboden. Gebruik de check-tool van Advise om ervoor te zorgen dat je advertentie altijd geaccepteerd worden. Zij hebben ook een mooi overzicht van alle afbeelding maten van alle sociale netwerken. via http://www.adsvise.com/

Kom vandaag met ons in contact!

Wij kijken ernaar uit om met jou in contact te komen. Wij zijn op zoek naar nieuwe business relaties die wij kunnen helpen om mooie, interactieve en effectieve digitale publicaties te maken.

Wil je meer weten over de techniek nodig bij het maken van online magazines, catalogi, brochures, folders, etc.? Vul onderstaand formulier in, dan nemen wij zo snel mogelijk - en geheel vrijblijvend - contact met je op.

Naam*

Email*

Bericht