DIY: afbeeldingen naast elkaar plaatsen op een pagina

DIY afbeeldingen header.png

Je kunt met ons systeem kiezen voor kant-en-klare templates om een mooie shop mee te maken, maar er is nog veel meer mogelijk op het gebied van vormgeving. Door creatief te denken, kun je met jouw webwinkel qua vormgeving alle kanten op. Zo maak je jouw shop nét even anders dan de rest. In vijf stappen leggen we je uit hoe je afbeeldingen naast elkaar kunt plaatsen in je shop.

Om deze uitleg te kunnen volgen, is het belangrijk dat je beschikt over:

  • Photoshop*
  • Basiskennis van Photoshop
  • Een aantal mooie sfeerfoto’s die aansluiten bij jouw webshop die je naast elkaar wil plaatsen

* Je kunt uiteraard ook een ander fotobewerkingsprogramma gebruiken om je afbeeldingen te maken. De berekening van de afbeeldingsmaten zal namelijk hetzelfde blijven. De instellingen die in dit artikel gebruikt worden, zijn gebaseerd op Photoshop. 

Stap 1: Bedenk wat je wil maken

Allereerst is het belangrijk om te weten wat je wil gaan maken. Wil je een serie afbeeldingen bij elkaar zetten om een sfeer te schetsen? Of ga je de afbeeldingen gebruiken om naar je categorieën te linken? Zodra dit helder is, kun je inschatten hoeveel afbeeldingen je hiervoor nodig hebt. In dit voorbeeld maak ik een serie categorie afbeeldingen voor op de homepage. In mijn geval zijn er 5 categorieën die ik wil tonen waarvan ik er twee extra wil uitlichten en daarom wat groter maak.

Stap 2: Bereken de afmetingen van je afbeeldingen

Hoe breed je afbeeldingen moeten worden, is afhankelijk van de breedte die je voor je webwinkel hebt ingesteld. Dit kun je terugvinden in de beheeromgeving bij: Vormgeving/Indeling/Instellingen. Daarnaast is het mooier als er ruimte (marge) tussen je afbeeldingen zit, in plaats van dat deze tegen elkaar aan plakken. Ook met deze marges moeten we rekening houden wanneer we de afmetingen van de afbeeldingen gaan bepalen.

De standaard (en aanbevolen) breedte voor je webwinkel is 1100 pixels. Wanneer je webwinkel hierop ingesteld staat en je zijkolommen uit staan, is de ruimte die je beschikbaar hebt om afbeeldingen te plaatsen 1050 pixels breed. Dit heeft te maken met de vastgestelde marges rondom het contentvlak. Stel je webwinkel staat ingesteld op 1100 pixels en je wil 3 afbeeldingen naast elkaar plaatsen met aan alle kanten 4 pixels marge, dan ziet je berekening er als volgt uit:

Breedte:
1050 pixels : 3 (afbeeldingen) = 350 pixels per afbeelding (inclusief marge)
350 pixels – 4 pixels marge links – 4 pixels marge rechts = 342 pixels (exclusief marge)

De hoogte van je afbeelding kun je zelf bepalen. Houd er wel rekening mee dat hier weer 4 pixels aan de bovenkant en 4 pixels aan de onderkant bij komen.

De ruimte tussen je afbeeldingen wordt samen dus 8 pixels

Wil je liever zonder template aan de slag? Kies dan de juiste afmetingen en marges (op basis van je berekening uit stap 2) en begin met het aanmaken van een nieuw Photoshop bestand. Vul de gewenste afmetingen in en zorg dat je de achtergrond van het document instelt op transparant. Dit doe je door Achtergrondinhoud in te stellen op Transparant. Plaats een afbeelding in het document die de gehele ruimte vult en ga naar het menu Laag en klik op Één laag maken.

Om zelf een marge van (bijvoorbeeld) 4 pixels in te stellen rondom je afbeelding, ga je naar Afbeelding > Canvasgrootte en tel je het aantal pixels op bij je huidige breedte en hoogte. Voor een marge van 4 pixels betekent dit dus dat er 8 pixels in de breedte bijkomen en 8 pixels in de hoogte. Vergeet hierbij niet de berekening uit stap 2.

Stap 4: Afbeeldingen exporteren

Wanneer je gebruik maakt van één van de hierboven genoemde templates, staan alle exportinstellingen al juist voor je ingesteld. 

Om je eigen losse afbeeldingen te exporteren, ga je in Photoshop naar Bestand > Exporteren > Exporteren als. Kies hier 'PNG' als opmaak zodat de marge als doorzichtige ruimte wordt meegenomen in de afbeelding en klik vervolgens op Exporteren.

Stap 5: Plaats de afbeeldingen in je webwinkel

Ga in de beheeromgeving van je webwinkel naar afbeeldingen en zorg dat je hier je gemaakte afbeelding upload. Ga vervolgens naar de pagina waar je je afbeeldingen wilt plaatsen. Zorg dat je een nieuwe paragraaf aanmaakt (door een enter te plaatsen), zet de uitlijning van deze paragraaf op ‘centreren’ en klik op het 'afbeelding invoegen' icoon om je afbeelding in te voegen. De uitlijning van de afbeelding mag op 'geen' blijven staan.

Selecteer de afbeelding die je zojuist geplaatst hebt (er verschijnt dan een lichte blauwe rand om de afbeelding) en tik nu op je toetsenbord één keer op het pijltje naar ​_rechts_​ voordat je de volgende afbeelding plaatst. Herhaal dit tot je afbeeldingen zijn geplaatst voor de eerste rij.

In de pagina editor zie je niet de volledige breedte van je webwinkel waardoor een afbeelding eerder op de volgende regel springt. In je webwinkel zelf zal je zien dat de afbeeldingen wel juist getoond worden. Kijk dus regelmatig in je shop of alles goed staat.

Sommige webwinkeliers hebben hun afbeeldingen door middel van tabellen op een pagina naast elkaar geplaatst. Dit raad ik echter af, omdat dit voor de weergave op mobiele apparaten voor problemen zorgt.

Afbeeldingen naast elkaar plaatsen zonder tabel zorgt voor een juiste mobiele weergave

Indien gewenst kun je deze afbeeldingen laten linken naar bijvoorbeeld een categoriepagina. Kom je er zelf niet uit? Laat onze Designer het werk doen! Bekijk onze Design Services voor al onze maatwerk mogelijkheden. 

De webshop van Eva en Lies gebruikt sfeerbeelden om door te linken naar verschillende categorieën

Hopelijk heeft dit blog je geholpen met het instellingen van afbeeldingen naast elkaar. Heb je nog vragen? Onze customer care staat voor je klaar! :)