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
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
L. Velthuis -
Handige tutorial!!! Wachtend op je volgende! (Nu de plaatjes er wel zijn)! :p