Website achtergrond mogelijkheden

Voor het vormgeven van de achtergrond van een TweeGo website zijn diverse opties beschikbaar. In hoofdlijnen kan een achtergrondkleur worden ingesteld die kan worden gecombineerd met een kleurverloop of afbeelding. Met deze drie opties kan een oneindig aantal achtergronden worden gemaakt. Naast het instellen van een website achtergrond via CSS is het in TweeGo gebruikelijker dit te doen via het onderdeel ‘Designer’, de online webdesign software van TweeGo (bekijk voor een introductie de verschillende tutorials). In deze blog geef ik een aantal voorbeelden en tips voor het opzetten van een mooie website achtergrond.

Egale achtergrondkleur

De snelste en makkelijkste manier om tot een professioneel resultaat te komen is het instellen van een egale achtergrondkleur. Het is meestal verstandig om niet te felle(verzadigde) kleuren voor de achtergrond te gebruiken omdat deze afleiden van de inhoud van de website. De meeste webdesigns maken gebruik van wit of een lichtgrijze tint als achtergrondkleur:

Via de optie 'Algemeen > Achtergrond' in de Designer kan op eenvoudige wijze een andere achtergrondkleur worden ingesteld.

Achtergrond patroon

In plaats van een egale achtergrondkleur kan ook een achtergrond patroon worden gebruikt. Een achtergrond patroon bestaat uit een kleine afbeelding die in horizontale en/of verticale richting wordt herhaald. Met het gebruik van in beide richtingen herhalende achtergrond patronen moet terughoudend worden omgesprongen. Deze worden meestal op wat informelere websites gebruikt. Er zijn op internet veel websites te vinden die gratis achtergrond patronen aanbieden. De meeste van deze patronen zijn bedoeld voor hobby-websites. Een uitzondering hierop is bijvoorbeeld: http://subtlepatterns.com.

Door in de uitklaplijst 'Herhalend' de optie 'Beide richtingen' te selecteren kan een achtergrond patroon worden ingesteld.

Horizontaal herhalend achtergrond patroon

In plaats van een in beide richtingen herhalend achtergrond patroon wordt vaker een in horizontale richting herhalend achtergrond patroon gebruikt, bijvoorbeeld voor het vormgeven van een doorlopende header(bovenbalk) in een website.

Een horizontaal herhalend achtergrond patroon kan worden ingesteld door in de uitklaplijst 'Herhalend' de optie 'Horizontaal' te selecteren.

Enkele afbeelding

Het gebruik van een enkele afbeelding is ook een mogelijkheid. Vooral in de wat creatievere websites wordt vaak een grote illustratie gebruikt die horizontaal in het midden is uitgelijnd en naadloos overloopt in de achtergrondkleur van de website. Ook fotomateriaal kan worden gebruikt als website achtergrond, maar net als bij het gebruik van achtergrond patronen moet hier terughoudend mee worden omgesprongen. Een foto kan op twee manieren in de achtergrond worden gezet: beeldvullend of gecentreerd. Een beeldvullende foto neemt altijd de afmetingen van de browser aan, ongeacht de resolutie van iemand’s monitor.

Beeldvullende foto als website achtergrond.

Door de optie 'Beeldvullend' op 'Ja' te zetten kan een foto of illustratie als opvulling van de website achtergrond worden gebruikt. De foto neemt de afmetingen van de browser aan.

Gecentreerde enkele afbeelding

In sommige gevallen is het belangrijk dat de verhoudingen van de foto niet uit verband worden getrokken of dat een deel van de achtergrond moet samenvallen met bijvoorbeeld de navigatie van een website. In deze gevallen kan de foto beter gecentreerd worden i.p.v. beeldvullend. Het idee is om de foto breder dan de breedste monitor te maken zodat op geen enkel scherm de achtergrondkleur van de website aan de linker- of rechterzijde verschijnt. Het nadeel van brede/grote foto’s is dat deze de laadtijd van de website negatief beïnvloeden. Om ervoor te zorgen dat de foto bij hoge pagina’s niet uit beeld scrollt kan de optie 'Achtergrond mee scrollend' het beste op ‘Ja’ worden gezet.

Gecentreerde foto als website achtergrond.

I.p.v. beeldvullend kan een foto ook gecentreerd worden door de optie 'Achtergrond uitlijning > Horizontaal' op 'midden' te zetten. In bovenstaand voorbeeld is de foto niet breed genoeg voor hoge resoluties waardoor de achtergrondkleur van de website aan de linker- en rechterzijde te zien is.

Kleurverlopen

In plaats van een achtergrond afbeelding kan in TweeGo ook een kleurverloop worden ingesteld. Met de unieke kleurverloop editor van TweeGo is het mogelijk om schaduweffecten, balken en lijnen in de website achtergrond te tekenen. Hiervoor is normaal een grafisch pakket, bijvoorbeeld Adobe Photoshop, vereist!

Unieke kleurverloop editor van TweeGo.

Simpel kleurverloop

Door het instellen van een simpel horizontaal herhalend kleurverloop krijgt een achtergrond meer diepte. Het kleurverloop eindigt in de achtergrondkleur van de website.

Een simpel horizontaal kleurverloop is eenvoudig in te stellen en geeft een website achtergrond meer diepte.

Slagschaduw

Met de kleurverloop editor kan ook een schaduweffect worden aangebracht op het middengedeelte van de website.

Een slagschaduw effect kan worden gemaakt door een in het midden uitgelijnd kleurverloop in de verticale richting te laten herhalen. Het kleurverloop moet breder dan de pagina breedte zijn zodat de schaduwen aan beide zijden zichtbaar zijn.

Tweekleurige achtergrond

Een tweekleurige achtergrond kan worden gemaakt door een kleurverloop in het midden uit te lijnen en in de verticale richting te laten herhalen. Het kleurverloop moet breder dan de breedste monitor resolutie zijn zodat de achtergrondkleur van de website niet aan de linker- en rechterzijde van de achtergrond te zien is.

Tweekleurige website achtergrond d.m.v. verticaal herhalend kleurverloop.

Doorlopende header en/of menubalk

Tot slot kan de kleurverloop editor worden gebruikt voor het tekenen van doorlopende header- en/of menubalken.

Zoals u ziet zijn er legio mogelijkheden voor het vormgeven van een website achtergrond met TweeGo. Vragen, opmerkingen of tips? Laat een reactie achter!

Terug naar het overzicht