Taking Image Slicing from Photoshop to Dreamweaver

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.

This video requires Adobe Flash Player.

Visitor Comments »

 

Man that was the BEST video tutorial ever! Thanks guys, that makes so much sense to me, and is easy to follow!

 

Comment by Aaran Casey | January 28, 2009 @ 7:36 pm

 

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.

 

Comment by Niko | January 28, 2009 @ 8:01 pm

 

very good tutorial…. simple and to the point.

 

Comment by Ricco | January 28, 2009 @ 9:40 pm

 

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!

 

Comment by Joseph | January 30, 2009 @ 10:45 am

 

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.

 

Comment by Donna Hammock | January 30, 2009 @ 4:02 pm

 

u r the best!

thank you.

 

Comment by bruce | February 1, 2009 @ 12:30 pm

 

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?

 

Comment by Tyler | February 1, 2009 @ 10:30 pm

 

Great site for sharing great information. thanks

 

Comment by Muhammad Moosa | February 2, 2009 @ 9:56 pm

 

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?

 

Comment by Amy | February 5, 2009 @ 2:35 pm

 

Great tutorial…do you know if this site was set up using DIV or tables.

 

Comment by Julius | February 7, 2009 @ 2:57 pm

 

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…..

 

Comment by Mohamed Mubeen | February 10, 2009 @ 7:16 am

 

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!

 

Comment by Shawn | February 10, 2009 @ 11:37 am

 

I cant beleive what i have just seen , amazing , Wow

 

Comment by tony | February 12, 2009 @ 12:43 pm

 

the easiest, straight to the point tutorial..thanks a lot guys!!! makes life a whole lot easier!

 

Comment by nicky | February 13, 2009 @ 6:29 am

 

Excellent! Magnificent! Just what I`m looking for. Thanks

 

Comment by Bojadza | February 15, 2009 @ 5:42 am

 

Love this tutorial.

 

Comment by Warren | February 15, 2009 @ 9:37 am

 

great tutorial !! makes it a lot easier !:d

 

Comment by patrick | February 16, 2009 @ 4:53 pm

 

This only works for left navbars. How would I generate a centered navbar?

 

Comment by Troy | February 17, 2009 @ 12:31 pm

 

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!

 

Comment by DJ Suz | February 26, 2009 @ 8:41 pm

 

You’re the man. Great stuff, very handy.

 

Comment by Nigel Minchin | February 27, 2009 @ 7:42 am

 

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

 

Comment by frdivine | March 8, 2009 @ 3:03 am

 

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…..???

 

Comment by Amit | March 19, 2009 @ 5:32 am

 

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..)?

 

Comment by Retroshift | March 22, 2009 @ 6:35 pm

 

fantastic tutorial in a wonderful way.. this is what i looked for. Good Job Geoff Blake!! keep posting such things again..

 

Comment by abcd14u | March 23, 2009 @ 12:53 pm

 

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.

 

Comment by Sam | March 25, 2009 @ 10:55 am

 

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 .. :) ..

 

Comment by Mark | March 26, 2009 @ 6:39 pm

 

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

 

Comment by randy | April 1, 2009 @ 1:33 am

 

A great video. Thank a lot.

 

Comment by Jack Stevenson | April 8, 2009 @ 4:48 pm

 

VERY helpful, thanks for all the great free tut vids here. appreciated.

 

Comment by shann | April 22, 2009 @ 7:10 pm

 

Thanks a lot, been looking for something like this!

 

Comment by Trevor Vallender | April 27, 2009 @ 5:45 pm

 

take me through the slicing of an image from shotoshop to dreamweaver

 

Comment by andile | May 6, 2009 @ 6:57 am

 

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!

 

Comment by Lili | May 31, 2009 @ 8:16 pm

 

Mate this is a fantastic tutorial, props!

 

Comment by King | June 4, 2009 @ 2:22 am

 

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.

 

Comment by The Landlord | June 15, 2009 @ 9:47 pm

 

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?

 

Comment by Laura | June 17, 2009 @ 9:54 am

 

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?

 

Comment by kes | June 28, 2009 @ 11:59 am

 

Great tutorial!!! Very helpful, I hope we can get more like it.

 

Comment by bkili | July 1, 2009 @ 8:57 pm

 

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

 

Comment by Bikram Choudhury the SEO Consultant | July 7, 2009 @ 11:22 pm

 

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.

 

Comment by jeanne Bullard | July 9, 2009 @ 5:03 pm

 

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!

 

Comment by jeanne Bullard | July 9, 2009 @ 6:59 pm

 

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?

 

Comment by Bob L | July 20, 2009 @ 6:45 pm

 

this is really nice, but can Photoshop make an external style sheet instead?
Or, what is the best way to convert the inline?

 

Comment by tedd | July 21, 2009 @ 12:19 pm

 

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!!

 

Comment by Kailey | July 27, 2009 @ 9:09 pm

 

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 !!??

 

Comment by Kailey | July 27, 2009 @ 9:11 pm

 

Awesome tutorial!!! Great job

 

Comment by Mark | August 4, 2009 @ 4:37 pm

 

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!

 

Comment by Ryan Nickell | August 17, 2009 @ 2:54 pm

 

Excellent Tutorial. Made it look easy.
Is there a html version of tutorial available.

 

Comment by Ananth | August 18, 2009 @ 8:11 am

 

it’a amazing great dude…

 

Comment by hanu | August 19, 2009 @ 5:35 am

 

Wow… finally I get to understand the slices. Whew! Luv it!

 

Comment by Phumzile Molefe | September 7, 2009 @ 3:41 am

 

How can i put text in to the frame.
Thx

 

Comment by Martin | October 5, 2009 @ 9:04 pm

Leave us a comment

Comments RSS | TrackBack URI

Back to Top

 
 
Advertisement
Creative Suite Tutorials
  1. Photoshop Photoshop
  2. Illustrator Illustrator
  3. Indesign Indesign
  4. Dreamweaver Dreamweaver
  5. Fireworks Fireworks
  6. Premiere Premiere
  7. Flash Flash
  8. After Effects After Effects
  9. Lightroom Lightroom
  10. Acrobat Acrobat

Get the latest tips, tricks and news delivered straight to your inbox.

From our Partners
Subscribe to Layers Magazine
 
 
 
  • Back to the Layers Magazine Homepage
  • Creative Suite Tutorials
  • Layers Magazine
  • Reviews on top products
  • Layers Magazine Reader Forums
  • Subscribe to Layers Magazine