You may want to put some text here

Layouts leren slicen met Photoshop

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.

Tijdlijn voor het maken 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%.

Layout printklaar maken in Photoshop

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.

Layout op papier slicen

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.

Laag verbergen in Photoshop

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

Layout leeg maken

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:Photoshop slicetool icon.
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.

Geslicete layout

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.

Namen geven aan slices

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.

Slices opslaan

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.

Alle slices als afbeeldingen 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.

The Author of this post is Wim Mostmans

Wim Mostmans heeft een eigen webontwikkeling bedrijf Sitebase waar hij voltijds voor werkt. Hij beheert ook nog enkele websites waaronder deze en een Computerforum. Blijf op de hoogte van waar Wim mee bezig is door hem te volgen op Twitter.

45 Responses »

  1. Is er hier ook ergens een tutorial over hoe je een layout kunt basen?

  2. Een tutorial over het basen van een layout is in de maak. Ik zal je nog wel een mailtje sturen wanneer hij klaar is.

  3. Graag zou ik ook een mailtje ontvangen, mocht de tutorial over het basen klaar zijn. Het vinden van een goede slice tut is het probleem niet, het basen wel. groet!

  4. ik zou ook graag een email krijgen van de basing en programeren

  5. Dit is een fijne uitleg, die krijg je bijna nergens!
    Goed gedaan, een dikke 10 voor de makers er van!

    Groeten Christiaan

  6. Hallo,

    heb je toevallig al de tutorial om je website te basen?

  7. Hey,

    Heeft u ook een uitleg om de layout zelf te maken?

    Fedde

  8. ik zou ook graag een mailtje ontvangen als de tutorial over het basen klaar is! want het is zeer zeker een probleem om hier iets over te vinden!

    Bij voorbaat dank
    Marielle

  9. Is de tutorial over Basen er al?

  10. Hij is in aantocht Raymond. Als hij klaar is stuur ik je zeker een mailtje.

  11. Zou je mij ook even een mailtje kunnen sturen als de tutorial van basing online staat? :-)
    Alvast bedankt!

  12. Kunt u mij ook een mailtje sturen? handige tut!

  13. Zou u mij ook een mailtje kunnen sturen?
    Dank bij voorbaat

  14. Komt inorde Dries, Nina en Thomas.

  15. Hallo, zou u mij die link ook kunnen sturen??

  16. @fedde: Layout zelf maken is makkelijk, doe ik zelf ook 😛
    Maareuh, als iemand een layout nodig heeft (gecodeert en ongecodeert (alleen in html, geen php ofzo) dan moet hij me maar maile 😀

    Greetz streedie

  17. Ik zou ook graag een mailtje wille ontvange wanneer de base tut klaar is

  18. Ik zou ook graag een mailtje willen ontvangen wanneer de base tut klaar is.

  19. Ik zou ook graag een mail ontvangen wanneer de tutorial af is.

    Een pluim voor deze!

  20. Zou je mij ook een mailtje willen sturen wanneer de tut klaar is, want ik kom nu niet verder, deze tut is btw super!

    greetz Danny de Boer

  21. Geweldige tutorial heb je wat aan… maar ik wacht ook op de volgende tutorial hoe gaat dat nou verder in DW enz. heb al iets geprobeerd maar er kwam er niet precies uit!! dus als de volgende tutorial is ontwikkeld zou je mij dan ook kunnen mailen

    alvast bedankt geweldige tutorial xoxo

  22. Super tutorial! Hier had ik tenminste wat aan na lang zoeken! Zou je mij ook een mail willen sturen met de volgende?

    Alvast super bedankt!

  23. Hele mooie tutorial, alleen ik wou vragen of de basing tutorial ook nog komt.

  24. Kan ik ook die mail van basen eens krijgen aub?

  25. Graag ook een mailtje over de basing tutorial. Met dank.

  26. Heey
    ik weet dat het al heeeel laat is:P
    maar is er al ene vervolg:$ heb het hele web afgezocht, ik zou je zeer dankbaar zijn :)

  27. 1.5 jaar verder, maar probeer het toch….

    Graag ook een mailtje over de basing tutorial. Met dank.

  28. Net als Ikke hierboven, heb ik ook interesse in die base tutorial.
    Als deze al klaar is natuurlijk.

    Bedankt…

  29. ik zou graag ook mailtje krijgen over basing tut

  30. Hallo,
    Is de tutorial Bases al beschikbaar?
    Zo ja kunt u deze dan naar mij mailen?

    B.v.d.

  31. Hoi, hoi

    Graag zou ik de tut over het Bases ook willen ontvangen.

  32. Hallo, eindelijk s heel duidelijk uitgelegd…bedankt!
    Wil je mij ook de tut Bases sturen? Mocht ie nog komen?
    Groetjes

  33. Basing klaar na 3 jaar, komaan dit zou van pas komen !!!! zeker het omzetten naar php en css etc…..

  34. Is bases tut er al?
    Ik zou graag ook een mail ontvangen als hij er is

  35. Zou heel handig zijn als die er nu eindelijk eens zou komen. Kan ik een mail ontvangen wanneer deze eindelijk is gearriveerd?

  36. Is de tutorial al klaar of niet?
    Ik hoop het wel.
    Kan je mij een mailtje sturen zodra die klaar is?

  37. ela Wim,

    ik kan die layout niet downloaden…

  38. Dag Wim,

    Goede tutorial. Graag zou ik het voorbeeld layout ergens kunnen downloaden. Daarnaast ontvang ik ook graag het vervolg deel mbt het basen. Hou je mij op de hoogte?

    Hartelijke groet,
    Hans

  39. Hoi Wim,

    Wat een duidelijke en overzichtelijke tutorial, hier kan ik iets mee!
    Wil je mij s.v.p op de hoogte houden wanneer de tutorial gereed is om met behulp van de geslicete afbeeldingen een website te maken.

    Bedankt
    Jack

  40. hallo wim

    is de basing tut al klaar? ik zou hier graag gebruik van willen maken
    kun je me op de hoogte houden

    Gr.

    Arjan

  41. Nou als ik eerlijk bent komt die basing tutorial nooit. :) Ik ken het als je eenmaal druk bent ja dan laat je andere dingen een beetje verwateren.

    Maar toch bedankt voor de goede tutorial de rest zoek ik verder op het internet. 😉

Leave a Comment