Schaduwranden in je achtergrond plaatsen
Ontwerpen met Mijnwebwinkel
Regelmatig krijgen we van klanten de vraag hoe je een schaduwrand achter de centrale pagina inhoud krijgt of hoe je de header over de volle breedte van de pagina kunt laten lopen. Het antwoord op beide vragen heeft te maken met de vormgeving van de pagina-achtergrond en is relatief complex. In dit blogitem proberen we met een concreet voorbeeld stap voor stap een antwoord op de eerste vraag te geven.
We gaan bij het schrijven van dit artikel uit van een bepaalde aanwezige basiskennis, zoals wat pixels zijn en hoe de Mijnwebwinkel vormgeving wordt bepaald door de combinatie van indelingkeuze, kleuren en afbeeldingen. De echte nieuwelingen op het gebied van vormgeving zullen we op een later moment nog ondersteunen met een uitgebreidere handleiding.
Om deze mogelijkheden voor iedereen toegankelijk te houden zullen we laten zien hoe je dit kunt doen zonder Photoshop, met behulp van vrij beschikbare tools:
- Pixl.com - een gratis, direct te gebruiken online fotobewerkingsprogramma
- Gimp 2.8.0 - gratis te downloaden fotobewerkingssoftware
Let er bij het installeren van Gimp even op dat je alleen het programma zelf installeert en alle optionele erbij geleverde software overslaat/uitvinkt.
Een schaduwrand achter je pagina-inhoud plaatsen
Het plaatsen van een schaduwrand accentueert de centrale inhoud van je website waardoor deze nog meer in het oog springt van de bezoekers. Bovendien wordt een dergelijke schaduwrand door velen als mooi bevonden.
In het onderstaande tutorial beginnen we met een nagenoeg lege webwinkel en gaan we uit van een 1100 pixels brede pagina-indeling met topbalk en headerbalk (zie voorbeeld). Voor het gemak hebben we een basisafbeelding gemaakt waardoor je eenvoudig de structuur van de website kunt herkennen. Deze afbeelding van 1900 x 2000 pixels bestaat uit 3 lagen en dient alleen om nauwkeurig te kunnen bepalen waar de schaduwrand precies moet komen.
|
Lege winkel |
Basisafbeelding openen |
Schaduwrand toevoegen |
|
We beginnen met een nagenoeg lege webwinkel, waarbij qua vormgeving alleen de kleuren en indeling zijn ingesteld. |
In Pixl openen we de basisafbeelding waarmee we meteen in grote lijnen de structuur van de website zien. |
We plaatsen een wit kader direct achter de centrale pagina-inhoud. Hierop voegen we vervolgens de schaduwrand toe. |
|
Afbeelding opslaan |
Achtergrond instellen |
Het resultaat |
|
Voordat we de afbeelding opslaan verbergen we de lagen van oorspronkelijke basisafbeelding. |
In de beheeromgeving voegen we onder vormgeving bij afbeeldingen de zojuist opgeslagen afbeelding als achtergrond toe. |
Het resultaat is een schaduwrand achter je winkel. Zorg er wel voor dat je in de beheeromgeving bij 'plaatsing achtergrond' kiest voor: "Achtergrond bovenaan centreren en niet herhalen." |
In de tabel hieronder vind je de basisafbeeldingen voor de verschillende pagina-breedtes, zowel voor een indeling mét als zonder topbalk.
| Pagina-breedte | Met topbalk | Zonder topbalk |
| 770 pixels |
 Download basisafbeelding |
Download basisafbeelding |
| 880 pixels |
Download basisafbeelding |
Download basisafbeelding |
| 990 pixels |
Download basisafbeelding |
Download basisafbeelding |
| 1100 pixels |
Download basisafbeelding |
Download basisafbeelding |
In het volgende blogitem lees je hoe je met behulp van Pixlr en Gimp een header over de volle breedte van je pagina maakt.