Schet een gewenste lay-out:
Eindresultaat:
Niet iedereen is even goed in kleurencombineren. We laten ons helpen door de kleurencombi:
zelfstudie.be/tools/kleurencombi.html
We beperken ons in deze lay-out tot deze kleuren.
Versleep het logo naar links en de tekst ook (onderaan dit document kan je de nodige figuren downloaden)
Vergroot het canvas naar 960x600 (knop linksboven)
Tussentijds resultaat:
Teken een rechthoek (960x 85). Plaats deze bovenaan achter het logo.
Klik als kleur de achtergrondkleur van het logo aan en verwijder de rand.
Teken een rode (960x7) (voorlaatste kleur) rechthoek onder de vorige.
Geef het canvas de derde kleur.
Teken een witte rechthoek (805x300) met grijze rand. Zet op dekking 20% en centreer.
Teken een witte rechthoek (830x325) zonder rand. en centreer.
Teken een laatste rechthoek onderaan. Deze vult de ruimte die rest op. Maak deze rechthoek groen (verloop van de twee eerste kleuren)
Typ de knoppen in (Arial – 20 – laatste kleur)
Teken een vorm met de pen.
Geef de vorm een verloop van fel naar donkerrood (2 laatste kleuren).
Sleep achter de knop (home) en maak deze wit.
Het vectoriële werk zit erop!
Voorlopig resultaat:
Nu komen de bitmaps erbij.
Kies telkens voor Bestand – Importeren en voeg een figuur in. Neem van elke fruitsoort één afbeelding.
Selecteer telkens het wit in de figuur met de toverstaf en verwijder. Pas de tolerantie telkens goed aan en kies voor Anti-Alias als randstijl.
Indien niet de volledige achtergrond (wit) verwijderd is, selecteer je dit met de veelhoeklasso.
Transformeer (verklein) de foto’s en plaats ze op een goede plek.
Je kan ook steeds een afbeelding spiegelen of draaien.
Teken nog schaduwen via ovalen (grijs, geen rand, doezelaar 20px).
Plaats deze ovalen achter het fruit.
Tot slot nog het pronkstuk. Zet het lettertype van Fruitfactory in eentje naar keuze. Je kan er eentje downloaden op 1001freefonts.com (bv earwing factory, …)
Resultaat:
We moeten onze lay-out in Fireworks nu slicen. Dit doen we als volgt:
Hier de geslicete (gesegmenteerde) versie:
We exporteren in Fireworks (bestand - exporteren)
Kies voor Alleen afbeeldingen - vink "inclusief gebieden..." uit.
We maken nu onze HTML-structuur: typ deze tags in:
We maken een nieuw CSS-bestand.
We starten met de opmaak van #wrapper (nieuw stijlpaginabestand).
Sla op als style.css.
Geef de div wrapper zijn opmaak.
De volledige opmaak:
Header:
Achtergrondfiguur – no repeat
Positioneren: 960px breed en hoogte van de figuur en relatief
Container:
Positioneren: relatief en 960px breed
*** Tip voor links en rechts: maak 2 segmenten in fireworks en klik erop. Je kan dan de breedte en positie (x) van het segment zien.
Links
Positioneren: relatief en 600px breed
Kader: marge links (zie x in fireworks, bv 81px), float left, evt een linkerpadding
Rechts
Positioneren: relatief en 200px breed
Kader: marge links (zie x in fireworks, bv 81px), float left, evt een linkerpadding
Footer
Achtergrondfiguur, no repeat
Positioneren: relatief, 960 px breed en hoogte (zie afbeelding).
Kader: Clear: both
Body
Achtergrondkleur, lettertype, tekstgrootte, tekstkleur, enz.
Leer hier hoe je nu van deze lay-out een Drupaltemplate of Joomlatemplate kan maken.