HOME | DD
Talei — TUT: Slicing web templates
Published: 2008-09-10 13:57:05 +0000 UTC; Views: 11894; Favourites: 97; Downloads: 417
Redirect to original
Description
Slicing web templates In this tutorial, you will learn how to slice a web template in Adobe Photoshop and save them as a webpage, ready to edit in Dreamweaver or web designer/editor of your choice.
Please wait for it to load as it is a 1.33mb file.
Feel free to ask me if there is something you do not understand. However, please note I will not help you with coding your website or anything to do with your web editor. I, personally, use Dreamweaver, and my knowledge of it is limited, and I don't like to give false/un-tested advice. I will only help you in regards to this tutorial, and this tutorial only. I will, however, at a later stage, be posting techniques and things you can use in your webpages, but that will come later.
This tutorial is made in Adobe Photoshop CS3, and the screenshots are also from CS3, however, I believe CS2's method is the same, I have not tried it in other versions.
[link]
Related content
Comments: 41
remembered this in high school, and sucking at that part. But thankks again.
👍: 0 ⏩: 1
Hello.. me and my partner have a website designing company and need someone with coding and slicing experience to do the designs into WordPress... can we work together if yes please contact me on hiba@brandreloaded
👍: 0 ⏩: 0
This tutorial has been used in the following news article:
Thank you so much for taking the time to produce guides to help artists!
👍: 0 ⏩: 1
Sorry it has taken so long, but thank you!
👍: 0 ⏩: 1
Yes. This is just for slicing the template. You can edit the HTML and add javascript or whatever you like to switch images. Or create the button separatley, use the button as a bg image, textless, and add text and hover as usual with HTML. I slice templates and then edit them as opposed to coding them in notepad from scratch.
👍: 0 ⏩: 0
Thanks for a great tutorial!
It was really helpful, but i've still got some problems.. Could you, if you have skype/MSN, add me, so i can get some advice on how i should do (No coding, just simple advices)
Thanks,
//Kakii-kun
👍: 0 ⏩: 1
My MSN is on my front page...at least I think so. XD If not, feel free to drop me a note.
👍: 0 ⏩: 1
Oh, I figured out how to do it... It's fine now :'D
Thanks anyway~ ^^
👍: 0 ⏩: 1
You're welcome! I'm glad it was useful!
👍: 0 ⏩: 0
Wooh, that's clever. Thanks for sharing! 
👍: 0 ⏩: 1
You don't neccisarily need to use dreamweaver, hell, you could use notepad if you have the knowledge. ^_^
Thanks
👍: 0 ⏩: 1
Damn. You had to say "if you have the knowledge" :[
j/k 
👍: 0 ⏩: 1
👍: 0 ⏩: 0
Amazingly easy the way you presented it, thank you
👍: 0 ⏩: 1
Oh, whos the expert? They should teach me.
I'm glad its useful.
👍: 0 ⏩: 0
Hope its what you were after. ^^
👍: 0 ⏩: 0
Your tutorial is very easy to understand, Nice! :thumbup:
As for me, I'm doing it by the old way. guidelines, select, copy, paste, because in this way, we can use the "Save for Web" option. I know the image's quality will deteriorate a bit, but you can save your web space, bandwidth, and faster loading.
👍: 0 ⏩: 1
You choose "save for web and devices" to save anyways and choose your file type and settings there. Also, that means putting the slices together yourself, which most people don't understand how to do. But if you've got the knowledge, then that doesn't matter. Though that method takes a lot longer. XD But personal choice really. ^^ This tut was requested by ~raestarize , though. ^^
👍: 0 ⏩: 1
Of course. Personal choice and what ya get used to.
👍: 0 ⏩: 1
even though people call me prehistoric man because of that....
👍: 0 ⏩: 1
omg i was really needing a tutorial about this.
Thank you so much!
👍: 0 ⏩: 1
Glad its helpful 
I love your avatar XD
👍: 0 ⏩: 1