[TUT] Slicen

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • Hallo allemaal,

    Ik kreeg van meerdere mensen de vraag: "Hoe moet ik nou eigenlijk slicen?". Ook werd mij gevraagd om hier een tutorial over te schrijven, dus bij deze :)

    Inleiding
    Wat is slicen nou eigenlijk? En wat is, zoals op sitedeals en andere websites staat vermeld, basen?

    Hier kan ik eigenlijk heel kort en simpel over zijn:
    Slicen: Is eigenlijk simpel weg een .psd (PhotoShop Document) in stukjes snijden, zodat je van één geheel meerdere kleine plaatjes genereert.
    Basen: Dit is een naam verzonnen op sitedeals. Het houdt in dat een document wordt omgezet naar (x)HTML(5) en CSS(3). Dit houdt in dat er zowel gesliced als gecodeerd wordt.

    Waar begin ik mee en wat moet ik weten?
    Elk begin is moeilijk! Ik heb er ongeveer 2 jaar over gedaan om alle ins en outs van HTML en css te leren. Het is namelijk zo dat html en css een zeer makkelijke taal om te leren is, maar vanwege de vele browsers het weer een stukje moeilijk wordt. Je moet er namelijk altijd rekening mee houden dat elke browser de twee talen hetzelfde interpreteert, maar voeren ze dit verschillend uit! Hier kom ik later op terug!

    Om te beginnen, zul je altijd eerst moeten slicen! Hiervoor heb ik een simpel .psd bestandje gemaakt die gemakkelijk te slicen is. Deze vind je hier:
    Download link

    Zoals je ziet is het .psd bestand opgebouwd uit vier delen:
    - Een header
    - Een menu
    - Het content gedeelte
    - De footer

    Nu is deze lay-out eigenlijk zo simpel, dat we dit allemaal met CSS zouden kunnen doen, maar om jullie de basics van slicen te leren, gaan we alles slicen.

    Wanneer je photoshop opent, zie heb je een mooie toolbar. Hierin zit een functie ingebouwd die de slice tool heet:
    [Blocked Image: http://cf067b.medialib.glogster.com/media/91/914fe84aa64be5d89922eb244662172d68a074fd82e047c3337518aaa454d7db/slice-select.png]

    Selecteer deze en begin met de header. Het slicen zorgt er voor dat je het .psd bestand om gaat zetten in kleine images. Nu werk je bij uitgebreidere lay-outs altijd in bepaalde lagen, zodat je met HTML en CSS het mooi kan overlappen. Echter is dat voor deze lay-out niet nodig. Ik heb de header met de slice tool geselecteerd op de volgende manier:

    [Blocked Image: http://www.twistedmonkey.nl/ict/tutorial/images/slicen/slice1.png]

    Als je de bovenstaande afbeelding vergroot, zie je dat er een nummer aan wordt meegegeven. Dit nummer wordt de uiteindelijke naam van de images. Dus: Naam van het .psd bestand + slice nummer + extensie = naam van de slice

    Vervolgens kom je bij het menu. Bij het menu willen we de links met HTML en CSS toevoegen, dus deze kunnen worden weg geklikt. Zie onderstaande afbeelding:

    [Blocked Image: http://www.twistedmonkey.nl/ict/tutorial/images/slicen/slice2.png]

    Vervolgens selecteer je het menu op de zelfde manier als de header. Dit doe je ook voor het content gedeelte, let er wel op dat je de layers van de tekst in het content gedeelte uit zet!

    En tot slot, de footer. Deze heeft ook weer tekst in het .psd, dus deze layers zetten we eerst uit en vervolgens selecteren we hem weer met de slice tool.

    Almost done!
    Nu we alles netjes hebben geselecteerd met de slice tool moet het er zo uitzien:
    [Blocked Image: http://www.twistedmonkey.nl/ict/tutorial/images/slicen/slice3.png]

    The final step
    We hebben nu alles mooi geselecteerd en is het tijd om photoshop aan het werk te zetten. Deze moet namelijk de slices omzetten naar images. Dit doe je op de volgende manier:

    File -> Save for web & devices

    Hier kom je het volgende scherm tegen:

    [Blocked Image: http://www.twistedmonkey.nl/ict/tutorial/images/slicen/slice4.png]

    Hier kun je rechts boven aan de extensie kiezen die je wilt gebruiken. Ik gebruik zelf altijd PNG-24 en transparency aangevinkt. Voor hogere kwaliteit kun je ervoor kiezen om JPEG te gebruiken.
    De overige opties die ingesteld kunnen worden, laat je gewoon zo staan als het er staat :)

    Vervolgens klik je op: SAVE!

    Je krijgt nu een nieuw venster waarmee je de slices kunt opslaan. Hierbij heb je ook de optie format. Hier kun je kiezen uit HTML and IMAGES, IMAGES only of HTML only. Ik kies persoonlijk altijd voor images only. Dit omdat photoshop een gigantisch slechte HTML code zal generen, die je toch niet zal gebruiken.

    That's it! Je hebt nu je eerste .psd bestand omgezet naar slices! Well done! In mijn volgende blog/tutorial zal ik jullie vertellen hoe je deze images met HTML en CSS codeert!

    Ik hoop dat jullie hier wat aan hebben!

    Groet,
    Thjeu

    1,753 times read

Comments 12

  • L. Velthuis -

    Handige tutorial!!! Wachtend op je volgende! (Nu de plaatjes er wel zijn)! :p

  • tijmen2000 -

    Dag Thjeu,

    Enorm bedankt voor dit blog bericht. Ik ben al een tijdje opzoek naar zo'n artikel als dit. De laatste tijd ben ik mezelf hierin aan het verdiepen. Helaas ben ik er nog niet echt ervaren mee. Maar het is nu al een stukje duidelijker geworden. Thuis ga ik er eens naar kijken en hoop ik dat ik eruit kom.

    Dank,

    Mvg, Tijmen

  • thjeu -

    Nu wel weer :)

  • L. Velthuis -

    De plaatjes werken niet meer :(

  • Cas -

    Goede tutorial, alleen is deze methode natuurlijk enorm achterhaald.

  • thjeu -

    @malik er staat ook in de tekst:
    "Nu is deze lay-out eigenlijk zo simpel, dat we dit allemaal met CSS zouden kunnen doen, maar om jullie de basics van slicen te leren, gaan we alles slicen."

  • Malik -

    Miss handig om andere plaatjes te gebruiken? (ipv witte container) Want eigenlijk hoor je met basing in html de 'slicing' ervan te regelen en niet in 1x met een groot plaatje. (geld voor alle vakken)

  • Malik -

    Miss handig om andere plaatjes te gebruiken? (ipv witte container) Want eigenlijk hoor je met basing in html de 'slicing' ervan te regelen en niet in 1x met een groot plaatje. (geld voor alle vakken)

  • MJorritsma -

    Basing is inderdaad een verzonnen woord en het komt wel degelijk (deels) bij Sitedeals vandaan. De eigenaren van Sitedeals beheren namelijk de website Basing.com en hebben hiermee een begrip gemaakt van het woord basing.

    Leuke tut thjeu!

  • victor -

    Leuk Thjeu!

    Stiekem hoopte ik al dat je dit soort tutorials zou gaan doen en ik kijk uit naar de rest!

  • thjeu -

    Bedankt Reza!

    Het begrip basen komt naar mijn weten van sitedeals af. Ik ben al zo'n 6 jaar lid op sitedeals en volgens mij heeft iemand dat ooit in die tussentijd verzonnen. Correct me if I'm wrong!

  • Reza -

    Bedankt voor de tutorioal, heb hem globaal even bekeken en het ziet er goed uit.

    Iets over de herkomst van basen, dat komt volgens mij toch niet van SD? Zie het woord overal staan.