Terug naar beginpagina

Grafische voorbeelden en uitleg. Webart voorbeelden en uitleg
Lopende en afgeronde projecten.
Foto albums
Links naar mijn overige websites
Contact opnemen kan hier.
Persoonlijke gegevens en informatie.

  Welkom op Modern-Designer.nl ..... Hier kan je alles lezen over Grafisch- en Web- Design en Art ..... Bekijk de vele reeds door mij gemaakte ontwerpen ..... Leer van de uitleg die daarbij gegeven word ..... Ontdek dat er ook in jou een creator verscholen ligt !

 

Web achtergronden en afbeeldingen.

Achtergronden hebben een totaal ander doel dan grafische illustraties. Je kan achtergronden op 2 manieren samen stellen.

In het ene geval om de site gewoon wat op te leuken en in het andere geval om binnen een site, de afzonderlijke onderdelen extra te accentueren (de zgn framed achtergronden). Je moet er echter wel op letten dat de mogelijkheid bestaat dat een achtergrond herhaald gaat worden.

Vooral in de breedte kan een pagina erg afhankelijk zijn van de resoluties van de gebruiker.
Er zijn diverse foefjes voor om dit allemaal te ondervangen maar je dient er wel rekening mee te houden. Niets is zo erg als dat een afbeelding ergens willekeurig op een pagina gaat herhalen,
zodra een andere resolutie gebruikt word.

De framed achtergronden komen steeds meer in trek daar men hiermee resolutie onafhankelijk is. In het ene geval zal hooguit een klein deel links en rechts van de afbeelding weg vallen maar blijft het aktieve deel van de website in alle gevallen gelijk.


  Framed achtergronden -1

Een mooi voorbeeld daar van is de afbeelding hier onder.
Het lichte venster is het aktieve deel van de website.
Uiteraard kan je dat naar eigen idee en wensen aanpassen zolang je er maar op let dat het in alle huidige browsers passend is, daar deze onderling nogal wat verschillen van weergave.


 
Framed achtergronden -2


Een ander voorbeeld is de achtergrond van Les Haricots.
Het voordeel van deze achtergrond is wel dat er geen strak afgebakend kader voor de aktieve onderdelen van de site aanwezig zijn. Eventueel afwijkende weergave zal niet meteen ernstige gevolgen hebben voor de lay-out. Dit maakt het bouwen van een site een heel stuk gemakkelijker.


  GSXR-Team

De site www.gsxr-team.com is daar eveneens een heel duidelijk voorbeeld van.

Deze site is helemaal opgebouwd uit grafische elementen. Het geeft een heel exclusief uiterlijk aan een site.

Echter is het een zéér tijdrovende bezigheid om zo een website te maken. Hoeveel werk het in werkelijkheid kost om zo een site op te bouwen, heeft bijna niemand door!

Ckik Image to enlarge
  Bijzondere framed achtergronden

Tot nu toe heb ik alleen nog maar de gewone webpagina achtergronden laten zien maar er zijn daar naast nog tal van bijzondere toepassingen te bedenken als foto-albums, web-shops, chat boxen, weblogs, etc.
Uiteraard komen deze hier ook nog aan bod, te beginnen bij;
  Web-album

Veel web-albums werken met zogenaamde thumbnails (verkleinde afbeeldingen) welke je vervolgens kan aanklikken voor een ware grote afbeelding.

Deze achtergrond is passend gemaakt met een frame zodat daar exact de thumbnails in vallen waar door deze pagina een geheel eigen effect krijgt. De geopende foto`s passen exact in het midden frame waar door de album een exclusief uiterlijk krijgt.

Ckik Image to enlarge
  Web-Shop

Hier zie je een combinatie van de hierboven besproken achtergrond in combinatie met een al eerder besproken header.

Hier is te zien dat een goede voorbereiding, erg belangrijk is. Zeker als je met gedetailiëerdere afbeeldingen werkt, is het zaak dat alles met elkaar in evenwicht is qua kleur , detail en weergave sterkte. De artiekelen vallen net als in de album in het middenscherm en de categorieën en andere informatie in de links gecreëerde optische kolom.

Ckik Image to enlarge
  Chat

Een wel heel sprekend voorbeeld van grafische
inkadering, is deze afbeelding.

De achtergrond is gemaakt nadat eerst de positiesvan alle functie knoppen en actieve schermen bepaald zijn.

Hier gaat veel voorbereiding aan vooraf maar vervolgens heb je wel een chatbox die past binnen het geheel van de website.

Ckik Image to enlarge
  Weblog og blogg

Hier zie je het resultaat van een achtergrond die voorbereid is op de frames waarin de weblog uiteindelijk opgebouwd word.
Daar naast is de rechter bruine rand als extra bestand toegevoegd welke als herhaling geld. In het ergste geval zal bij een abdere beeldscherm instelling als breedbeeld, naast deze achtergrond een bredere bruine rand komen, wat beslist geen hinderend effect zal geven.

De frames van de website zijn statisch en zullen van rechts uitgelijnt worden waar door alles op z`n plaats blijft staan in de achtergrond

Ckik Image to enlarge
  Resultaat

Hier zie je wat voor resultaat het geheel uiteindelijk krijgt nadat ze toegevoegd zijn aan de daadwerkelijke informatie van de site.

Ckik Image to enlarge
  Lay-over achtergrond

Deze afbeelding is een combinatie achtergrond.
Dat wil zeggen dat over de achtergrond heen, de diverse losse afbeeldingen liggen welke bv lichter zijn..

Deze losse afbeeldingen worden pas zichtbaar wanneer men er over heen gaat met de muis. Hier door suggereerd men bijvoorbeeld dat een deeel van de pagina oplicht. Of een gesloten onderdeel ineens open gaat. Een soort van button effect maar dan in de achtergrond ingewerkt.

Ckik Image to enlarge


 
Rechter kolom achtergronden

Deze achtergronden worden doorgaans gemaakt zodra zij als één afbeelding onder twee kolommen door loopt. Het voordeel hier van is dat men niet zo gebonden is aan een formaat.



 Vaag

Deze achtergrond tekend vaag een rechter kolom af. Deze achtergrond is dan ook te gebruiken als achtergrond zónder extra rechter kolom als ook mét een extra rechter kolom.

Het voordeel van een witte afbeelding is wel dat je de hoofd kleur áchter de achtergrond als wit kan instellen zodat het lijkt alsof de achtergrond zich aanpast aan de breedte van het scherm, wat echter niet het geval is.


Ckik Image to enlarge
 
Resoluut


Door de duidelijke afbakening van de rechter kolomruimte, kan dit soort achtergronden dan ook echt alleen gebruikt worden wanneer men een rechter kolom op de website zet.
Ze zijn ook uiterst geschikt voor weblogs waar over het algemeen aan de rechter zijde de kalender en categorieën etc. staan

Ckik Image to enlarge
 
Achtergrond met Header


Als je een gewone platte html website maakt, is het handig om een achtergrond te maken waar de header al in verwerkt is. Het enige nadeel is wel dat wanneer er een hogere resolutie gebruikt word, de afbeelding zich gaat herhalen. Je zal dus moeten zorgen dat je de afbeelding centreerd en de achtergrondkleur overeen stemt met de afbeelding.



Voorbeeld

Hier naast heb ik een voorbeeld geplaatst. Je kan jezelf voorstellen dat wanneer je een witte achtergrond als basis neemt, de randen ongehindert opgevult worden.

Het nadeel is wel dat de header het formaat blijft houden als hij heeft. Hier door zal er bij extreem hoge resolutiegebruik een leeg vlak ontstaan naast de header aan de rechter kant

Of dat hinderlijk is ???
Ik zie vaak veel hinderlijke zaken dus voor een privé webpagina kan ik hier nog wel mee leren leven.

Ckik Image to enlarge
  Achtergrond in combinatie met layers

Hier voor moet ik éérst uitleggen wat layers zijn.

Layers zijn als het ware onzichtbare kadertjes, welke voorzien kunnen worden van allerhande atributen als teksten, buttons, plaatjes etc. Deze kadertjes kan je in sommige web-builders programma`s alle kanten op verplaatsen. Dat klinkt natuurlijk héél
   
Ckik Image to enlarge

 
Word vervolgt


Deze site word bijna dagelijks geupdate !

Design & Copyright by:
Modern-designer.nl  - your source for al graphic design