De huidige status van het ontwerp zou er ongeveer zo uit moeten zien:
Tot nu toe zijn een logo en het bovenste menu toegevoegd. Vervolgens gaan we verder met een iets grotere afbeelding die direct onder de navigatie te zien moet zijn.
Het principe van het aanmaken van nieuwe lagen werd al beschreven in de vorige tutorial. Daarom wil ik jullie op dit punt nog iets anders laten zien. Direct onder het bovenste menu moet een grotere afbeelding worden weergegeven. Het resultaat ziet er als volgt uit:
De afbeelding moet - wanneer je deze invoegt - in de juiste afmetingen beschikbaar zijn. Werk het indien nodig dus eerst bij. Open vervolgens Bestand>Openen en selecteer de afbeelding. De geselecteerde afbeelding wordt vervolgens in een nieuw venster weergegeven. Druk op Ctrl+C om de afbeelding naar het klembord te kopiëren. Zodat je de afbeelding nu meteen als laag kunt invoegen, die ook nog eens de juiste grootte heeft, roep je Bewerken>Plakken als>Nieuwe laag op. De nieuwe laag krijgt automatisch de afmetingen van de afbeelding en je kunt de laag dan eenvoudig naar de juiste positie verplaatsen. Op deze manier kun je nu alle afbeeldingen die je wilt invoegen, overnemen in de opmaak en daar plaatsen.
Vervolgens voeg je de teksten in op de plaatsen waar ze daadwerkelijk zichtbaar moeten zijn. Tijdens het ontwerpproces gebruikt men daar meestal zogenaamde dummytekst voor.
Voordat je nu gaat zitten en wild "test, test, test" gaat typen, raad ik je aan om de pagina http://www.blindtextgenerator.de/ te bezoeken.
Daar kun je automatisch dummyteksten - overigens van verschillende soorten - laten genereren. Vervolgens kun je die teksten eenvoudigweg via Kopiëren & Plakken overnemen in het ontwerp. In dat verband raad ik je ook de pagina http://dummyimage.com/ aan. Op die pagina kun je dummy-afbeeldingen in elke gewenste grootte genereren. Deze dummy-afbeeldingen kun je dan bijvoorbeeld gebruiken als tijdelijke plaatsvervangers voor nog niet gemaakte originele afbeeldingen in jouw ontwerpen.
Het probleem met de transparante lagen
Als je tekst invoegt, zal deze bestaan uit meerdere elementen zoals koppen, alinea's, enz. Het is daarom raadzaam om bij elkaar horende teksten samen te voegen in eigen lagen. Zo kun je deze teksten ook altijd in hun geheel verplaatsen. Roep hiervoor Lagen>Nieuwe laag op. Geef vervolgens de laag de gewenste afmetingen en eventueel de achtergrondkleur. Meestal zul je echter een transparante achtergrond moeten gebruiken/instellen. Het probleem is dan echter dat je de transparante lagen moeilijk kunt verplaatsen. Vaak selecteer je dan namelijk een onderliggende laag. Dit probleem is echter eenvoudig te omzeilen. Belangrijk zijn de instellingen in het venster Werkset. Activeer daarin het Verplaatsen-gereedschap. Onderin het venster activeer je vervolgens de optie Actieve laag verplaatsen.
Op die manier kun je ook transparante lagen naar elke gewenste positie verplaatsen.
Elementen uitsnijden
Als je tevreden bent met het ontwerp, is het tijd om het praktisch te implementeren als HTML-website. Op dit punt komt het slicen, oftewel het uitsnijden, in beeld. Dit slicen is niets anders dan het opdelen van het ontwerp in onderdelen die later met behulp van HTML en CSS weer samengevoegd zullen worden. Je moet alle elementen uitsnijden die later afzonderlijk weergegeven moeten worden. De afbeeldingselementen zijn daar natuurlijk van uitgesloten, die liggen toch al afzonderlijk voor. Ik wil je laten zien hoe je elementen kunt uitsnijden. Zet hulplijnen rondom het betreffende element. De hulplijnen vormen uiteindelijk de snijkanten. Let er dus op dat deze correct geplaatst worden.
Markeer nu het gewenste gebied en druk op de toetscombinatie Ctrl+Shift+C. (Dit geldt overigens zowel voor GIMP als voor Photoshop). Maak vervolgens een nieuw bestand aan. In Photoshop heeft dit dan meteen de juiste afmetingen. Bij GIMP werkt dat helaas niet zo eenvoudig. Hier maak je gewoon een bestand met voldoende afmetingen. Met Ctrl+V plak je de inhoud uit het klembord.
En nu komt het uitsnijden-gereedschap in beeld. Stel daarmee het uit te snijden gebied in en druk vervolgens op de Enter-toets. De afbeelding wordt dan bijgesneden tot het gewenste gebied. Via Bestand>Opslaan als kun je de afbeelding opslaan.
Een belangrijk stilistisch element voor veel websites is een kleurverloop. Ook bij het hier getoonde voorbeeldontwerp is zo'n kleurverloop aanwezig. Om een kleurverloop te snijden, selecteer je een smalle strook van het desbetreffende verloop. Het volstaat eigenlijk als je een strook met een breedte van één pixel instelt. De hoogte moet echter overeenkomen met de werkelijke hoogte van het element. Met behulp van CSS zorg je er later voor dat deze afbeelding horizontaal herhaald wordt totdat het hele element gevuld is. Natuurlijk zou je ook een bredere beelduitsnede kunnen gebruiken. Dat zou echter de prestaties van de website verminderen. Kies daarom voor verloopelementen een breedte van één pixel.
Met Ctrl+Shift+C kopieer je de één-pixel brede afbeelding naar het klembord en voeg je deze opnieuw in als nieuwe afbeelding. Sla de nieuwe afbeelding vervolgens op nadat deze naar het relevante deel is gebracht.
Hiermee zou het basisprincipe van het slicen duidelijk moeten zijn. Je snijdt dus alle elementen uit het ontwerp die later op de website zullen staan. Als je al individuele paginaverderelementen hebt die niet uitgesneden hoeven te worden, plaats je deze direct, dus zonder omweg via slicen.
Het resultaat zou er nu als volgt uit moeten zien: Je hebt alle afbeeldingen die je later op de website wilt gebruiken. Hierbij horen bijvoorbeeld het logo, achtergronden, kleurverlopen, enz. Nu we het toch over kleurverlopen hebben: Ik ben me er natuurlijk terdege van bewust dat kleurverlopen gemakkelijk te maken zijn met CSS3. Het probleem is echter dat dit nog niet door alle browsers wordt ondersteund. En aangezien het slicen ook heel mooi kan demonstreren aan de hand van een kleurverloop, heb ik in deze tutorial gekozen voor een afbeelding voor het implementeren van kleurverlopen.
