Wat je in deze handleiding gaat leren is het omzetten van een layout naar verschillende apparte afbeeldingen. Deze afbeeldingen kan je dan later terug gaan samenbrengen met behulp van CSS en XHTML om een webpagina te maken. Het in stukken knippen van de layout wordt ook wel eens slicen genoemd. Hieronder kan je een overzicht zien van de fases tijdens de ontwikkeling van een website. Het slicen is de tweede stap tijdens het ontwikkelen van een website.

Het slicen van een layout doe je best in Photoshop. Dit grafisch pakket heeft de nodige tools aan boord wat een groot voordeel is omdat je hierdoor Voor het basen en de designen éénzelfde programma kan gebruiken.

Voorbeeld Layout

Als je wilt kan je deze tutorial volgen aan de hand van het photoshop bestand dat ik gebruikt heb. Zo kan je stap voor stap de tutorial volgen en kan je als je dit wilt achteraf deze layout zelfs gebruiken voor je eigen website.

De voorbeeld layout downloaden

Layout afdrukken

Het afdrukken van een layout is een stap die ik vaak gebruik bij moeilijkere layouts. Als je wilt kan je deze stap overslaan, maar soms kan het wel handig zijn in combinatie met de volgende stap.
Voor het afdrukken van de layout in Photoshop voeg je eerst al de lagen samen. Dit doe je door op Layer > Flatten Image te klikken. Vervolgens dubbelklik je op de ene laag en klik je op OK op de popup die tevoorschijn komt. Vervolgens voeg je onder de laag met de layout een nieuwe laag toe met die volledig wit is. Als laatste zet je de Opacity van de layout laag op 40%.

Druk nu op File > Print en selecteer de optie Scale to fit media. Stel bij printer opties in dat je in zwart/wit wilt afdruken en druk de layout af.

Slicen op papier

Deze stap is samen met de vorige stap niet altijd nodig. Het is meer een eigen voorkeur. Ik doe het persoonlijk bijna altijd. Op de layout die je in vorige stap hebt afgeprint ga je nu aanduiden hoe je de layout gaat opdelen in divs. Het is belangrijk dat je dit nu doet zodat je weet hoe je je layout in stukken gaat moeten snijden in de volgende stap.
Denk tijdens het slicen op papier zeer goed na en denk ook vooruit. Zorg ervoor dat de layout op een eenvoudige manier uitbreidbaar is en logisch in opbouw. Neem voor deze stap rustig de tijd. Doe je dit niet dan loop je binnen de kortste keren tegen problemen aan die er soms zelfs tot kunnen leiden dat je volledig opnieuw moet beginnen. Als je een layout goed sliced kan je hier achteraf veel tijd mee winnen.
Hieronder kan je mijn resultaat bekijken van de geslicete layout. Merk ook op dat ik voor de namen werk met een hekje(#) en een punt(.). Het hekje wil zeggen dat dit een div id wordt. Waardoor deze div maar 1 maal gebruikt mag worden. Het punt wil zeggen dat dit een div class wordt. Dit wil dan weer zeggen dat deze div meerdere malen mag voorkomen op één pagina. De gearceerde delen stellen paddings voor binnen die bepaalde div.

Slicen in Photoshop

Nu dat we weten hoe we onze layout gaan opdelen kunnen we gaan slicen in Photoshop. Voor we hieraan kunnen beginnen verberg je alle tekst, div’s, iconen, … die je later in HTML en CSS gaat toevoegen. Het onzichtbaar maken van zo’n deel doe je door op het oogje naast dat element te drukken in je layers paneel.

Als je de juiste lagen verborgen hebt dan krijg je het volgende:

Nu kan je met de slice tool van Photoshop de layout gaan opdelen in stukken. Het icoontje van de slice tool ziet er als volgt uit:.
Zet nu in Photoshop de linealen op. Dit doe je door op Ctrl + R te drukken. Kies de move tool en ga op de verticale lineaal staan. Klik, hou je muisknop ingedrukt en sleep een verticale hulplijn naar 2cm en naar 26cm vervolgens selecteer je de slicetool en teken je je de slices op de layout zoals op onderstaande afbeelding.

Merk op dat je van het middenstuk van de layout maar een klein stuk moet nemen. Dit doe je omdat dit stuk over de gehele verticale lengte van de site altijd hetzelfde zal blijven. Hierdoor kan je dit stuk laten herhalen. Dit heeft als voordeel dat de afbeelding niet zo groot is voor op te slagen en dat je website dus sneller zal laden. Het klein stukje links gaan we gebruiken om die donkere gradient te maken bovenaan de website. Dit doen we door deze afbeelding horizontaal te laten herhalen.
Als je een slice verkeerd hebt geplaatst of hij is te klein dan kan je dit achteraf nog aanpassen door de slice select tool te selecteren. Deze vindt je onder hetzelfde tabje als de slice tool zelf.

Geef elke slice nu een naam. Dit doe je door met de slice select tool te dubbelklikken op het labelje dat je in de linkerbovenhoek van elke slice ziet staan.

Ik heb de slices de volgende namen gegeven.

• Links/boven: gradient
• Midden/bove: header
• Midden/midden: content
• Midden/onder: footer

Slices opslaan

Om de layout op te slaan ga je naar File > Save for Web & Devices… waarna je het volgende scherm tezien krijgt. Het enige wat je nu even moet nakijken is dat voor elke slice de Quality op 100 staat. Om een andere slice te controleren klik je in de preview op een andere slice.

Vervolgens klik je op Save. Selecteer een map waar je de slices wilt opslaan. Kies bij opslaan als type voor HTML and Images. Zet de settings op Default settings en slices op All slices. Als laatste klik je op opslaan.

Het slicen van de layout heb je nu achter de rug. De volgende stap in het maken van een website is het bases. Dat is dan ook meteen het onderwerp voor de volgende tutorial.