In this tutorial, Geoff Blake uses the slice tool in Photoshop to divide up a header image and then takes it into Dreamweaver to display it on a web page.
Photoshop
Illustrator 
Dreamweaver
Flash
InDesign
After Effects
Premiere ProIn this tutorial, Geoff Blake uses the slice tool in Photoshop to divide up a header image and then takes it into Dreamweaver to display it on a web page.
Author: geoff blake
Man that was the BEST video tutorial ever! Thanks guys, that makes so much sense to me, and is easy to follow!
Great stuff. Thank you. I’m just beginning to learn Dreamweaver, and i was able to repeat this process on my own after watching this tutorial once. Thanks again.
very good tutorial…. simple and to the point.
Awesome. I LOVE how easy it was to follow you. The way you took time to explain every single action made this a great tutorial. Many many thanks!
This was fantastic. I’m in Art Institute on line and this was just what I needed!! Thanks so much, in fact I subscribed to the magazine because of it.
u r the best!
thank you.
I love the tutorial and it is really helping me do a design that I have been having a hard time with. Just one question is there a way to center the images in the center of the window?
Great site for sharing great information. thanks
awesome thank you so much!
now, how do you type text over an image in dreamweaver? or can you?
is there a tutorial that goes from beginning to end on making a website in photoshop and then putting it into dreamweaver?
Great tutorial…do you know if this site was set up using DIV or tables.
Thanks a lot man… Am very new to Photoshop and Dreamweaver, though a software professional for long. It was really useful and was really the stuff that I was looking for, the initial push…..
Worked perfectly the “second” time. Messed something up the first time around and they weren’t nesting where I wanted them to. So try try again. Deleted all of my changes and started anew. As I said everything worked perfectly the “second” time around. Thanks Jeff!
I cant beleive what i have just seen , amazing , Wow
the easiest, straight to the point tutorial..thanks a lot guys!!! makes life a whole lot easier!
Excellent! Magnificent! Just what I`m looking for. Thanks
Love this tutorial.
great tutorial !! makes it a lot easier !:d
This only works for left navbars. How would I generate a centered navbar?
What a great tutorial. I tend to delve right into the code and plug away at it because the visuals through me off in design mode, but this was a nice tut which I have searched long and hard for. Save me some time in future with photoshop layouts!
You’re the man. Great stuff, very handy.
great tutorial, thanks. the only problem i have is when i add a link to each button it distorts my page. i dont know how to fix it! pls help
how could i download or see this tutorial….each time i press play button and it displays an ad. for a couple of seconds and disappears…..???
I got a question: Isn’t it better to refer your css styling to an external css-page rather than put it all in the header of your html page?
Just wondering..(for large sites maybe..)?
fantastic tutorial in a wonderful way.. this is what i looked for. Good Job Geoff Blake!! keep posting such things again..
Retroshift,
Yes it is. I would take his tutorial a step futher and paste all the styles into a new css external file. Then, I would simply link the file to the page by clicking the “Attach Style Sheet” button at the bottom of the CSS STYLES Panel (it looks like two links of a chain). And point it too your css file you just made.
Man …. This is the first Tutorial I’ve found after searching for like 3 days that I’ve been able to follow, its super clear, and doesn’t just tell you what to do and let you figure out the filler yourself .. I’m a complete noob and I now finally know how to get things moving ..
..
I’ve nothing to say but that’s awesome , i followed ur Tuto to the end .
That’s what we call real VID and Tuto .
Many thanks
A great video. Thank a lot.
VERY helpful, thanks for all the great free tut vids here. appreciated.
Thanks a lot, been looking for something like this!
take me through the slicing of an image from shotoshop to dreamweaver
Thanks, Geoff. I am seriously overwhelmed with work. Using slices to generate CSS from a PhotoShop image will help me catch up pretty quickly, but without your tutorial this would have been a long night. Really, this is the most lucid explanation of getting the code transitioned from PhotoShop to Dreamweaver that I have seen. Thank you again!
Mate this is a fantastic tutorial, props!
Dude, you rock – I go so exited looking at this tutorial my wife thought I was watching porn! Seriously – your tutorial will save me a great deal of time.
Hey, great tutorial!
I just have one question…
After I’ve sliced up the navigation bar, how do I get it to go to the center of the page instead of just sticking at the left?
nice tut!! one question, lame one actually..
how do u insert busy graphics in the background to make it maximize the space and not repeat itself?
Great tutorial!!! Very helpful, I hope we can get more like it.
Thanks Geoff Blake..
This is an excellent tutorial which I was searching for days ( at least last one year) how I can create a template using photoshop image slice.
I got the answer. By your tutorial anyone can build any template I think.
I am expecting a tutorial to build Photoshop PSD template and apply it as HTML/CSS
This is a great lesson! Too bad i didn’t discover it until today!
I tried it out and everything worked except one thing: i can’t seem to get Photoshop to write a .css file. it writes .iros. what am i doing wrong? using CS4.
oh, i didn’t see a .css file, so i didn’t think it wrote the css. But the styles were in there.
and evidently, i need another good tutorial about how to make content appear where i want it to appear in the browser. i keep going around and around and around….. HELP!
I am new to Dreamweaver and found this very informative, but is there a reason why you couldn’t just have exported the CSS for the table from Document 1 and import it into the other Dreamweaver Document?
this is really nice, but can Photoshop make an external style sheet instead?
Or, what is the best way to convert the inline?
I HAVE A QUESTION!! Okay when he says to go to the CSS layers panel, there is nothing showing up in mine! As in there is nothing under the ‘All’ or ‘current’ list. Everything was working up till now. Also, instead of having i have SOMEONE HELP PLEASE!!
Oops, my message got messed up. Instead of having ‘div’ i have ‘tr’ in the code area. What does this mean? and how do i get styles in the layers panel !!??
Awesome tutorial!!! Great job
Bloody brilliant tutorial! Geoff; I’ve made my site now, and it looks great, however, I can’t seem to get it to center in my browser. How would I go about this? I’ve Googled it, and all of the solutions involve coding that I don’t seem to have through this process. Any help?
Thanks greatly!
Excellent Tutorial. Made it look easy.
Is there a html version of tutorial available.
it’a amazing great dude…
Wow… finally I get to understand the slices. Whew! Luv it!
How can i put text in to the frame.
Thx