Opmaak met figuren

Leseenheid

Moeilijkheidsgraad

3

We kunnen reeds goed werken met figuren in onze inhoud. Figuren worden echter ook gebruikt in de opmaak. Een logo bijvoorbeeld of een achtergrond figuur. In deze les gaan we een figuur een transparante achtergrond geven en een achtergrondafbeelding maken met kleurverloop. Ik haal van Google deze figuur: ooievaar8.jpg (trefwoord= ooievaars)

We openen pixlr.com, een online gratis app om afbeeldingen naar je hand te zetten. Heb je Photoshop of Photoshop Elements, ga je gang..

We gaan naar de afbeelding die we reeds hebben opgeslagen:

Eerst een beetje bijsnijden. 2X klikken en het is in orde..

Daarna kiezen we het toverstafje. Dit selecteert alle pixels binnen een bepaald bereik. Dit kan je dus aanpassen en scherper zetten als je wil.

Je ziet dat alle blauwe tinten werden geselcteerd.

Als we een transparante laag willen maken moet we een laag dupliceren:

Nu hebben we er 2. Dubbelklik op het slotje om het bewerkbaar te maken.

Druk nu op delete op je toetsenbord om de blauwe kleur te verwijderen.

Als je nu de achtergrond wegvinkt heb je de typische blokjesvoorstelling van een transparante laag.

De figuur is nog te groot

Aanpassen naar wens. Ik heb 300 X 150 px genomen.

Opslaan als png is het best.

Het resultaat na uploaden op de site.

Nu gaan we een figuur maken om aan de linker zijkant te zetten. We gaan daarvoor de kleuren gebruiken die reeds op de site gebruikt worden door het thema. Maak een print van de site en sla deze op. Open het in pixlr.com.

maak nu een nieuwe afbeelding met de gewenste afmetingen:

Schik je venster..

De verloop tool ziet er zo uit:

Ik kies voor 3 kleuren.

Klik telkens op zo'n huisje en daarna op het kleurvlakje:

Je krijgt een pipetje waarmee je de kleur kunt halen vanuit je afbeelding van het thema. Zo kan je de kleuren instellen. In deze oefening moet de rechtse kleur overeenkomen met de achtergrond van je body kleur. Sleep tenslotte met d emuis van links naar rechts over de nieuwe afbeeldingen en het wonder geschiedt... Nu akn je dit gebruiken als zijkant in je CSS.