01. Afmetingen afbeeldingen

Deviant heeft 2 logo instellingen. Te weten square en rectangle. 

Rectangle

Desktop:

Gebruik afmeting 240×60 pixels voor SVG logo’s (aanbevolen). Voor PNG logo’s is het beste om dit maal 2 te doen. Dus 480×120 pixels. 

Mobile:

Voor niet SVG logo’s gebruik je de afmetingen van 120×60 pixels. Ook hier geldt dat je dit het beste maal 2 kunt doen. Dus 240×120 pixels.

Square

Desktop en mobile:

In principe kun je elke afmeting gebruiken zolang deze maar vierkant is. Dus 150×150 pixels of bijvoorbeeld 300×300 pixels.


Banners

Deviant is een mobile first theme. Dit houd in dat er eerst naar mobiel wordt gekeken en daarna pas naar desktop. Om op alle schermen de juiste verhoudingen te houden is het belangrijk dat alle banners rechthoekig zijn. 

Er zijn dus geen beste afmetingen. Door het schalen van de afbeeldingen zal er altijd een klein beetje clipping plaats vinden waardoor een klein gedeelte van je banner wordt afgesneden. 

Zolang alle banners een hoogte van 400 pixels hebben en bijvoorbeeld 800 pixels breed dan zit je goed. Maar ook dit is afhankelijk van je banner instellingen, dus bijvoorbeeld 2 naast elkaar of 4, of zelfs 1. Een pagina brede banner is bijvoorbeeld 2500×400 pixels. De juiste breedte van je banner is dus afhankelijk van het aantal banners op een rij. Dat is een beetje trial and error. 

  • Banners 1 t/m 4 worden gebruikt in banner block 1
  • Banners 5 t/m 8 worden gebruikt in banner block 2

Headlines

Deviant heeft meerdere headline opties. Te weten fullwidth en fullscreen.

Fullwidth

We hebben voor de juiste afmetingen 3 PSD’s bestanden gemaakt die je kunt downloaden en gebruiken om de juiste afmetingen te hebben. Echter de headlines schalen zich naar de beschikbare ruimte dus je kunt het ook gewoon uitproberen wat het beste resultaat oplevert. 

Fullscreen:

De beste afmetingen zijn 1920×1080 pixels.


Overig

De juiste afmetingen voor de overige afbeeldingen:

  • Customer service image: 362×562 pixels
  • Store image: 460×300 pixels
  • Category images: 400×400 pixels of vierkant in elke andere afmeting.
  • Brand images: 170×100 pixels

Onderstaand staan 3 bestanden die je kunnen helpen met het samenstellen van een headline met de juiste verhoudingen.

– desktop: download
– Tablet: download
– Mobile: download

Updated on juli 15, 2021

Was this article helpful?

Related Articles