Produced by KelbyOne

Taking Image Slicing from Photoshop to Dreamweaver

7.52K 70

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.


  • Soleil Meade says:

    Thank you so much this was SOOOOOOOOO very helpful to me!!!

  • Fred says:

    Thanks a lot, this was fantastic!

  • Kevin says:

    Outstanding… really informative and very complete. Where’s your book?

  • Man, I was very LOST before this video!
    thank you so much!!

  • Sherry says:

    All the steps worked for me until I put the code into my Dreamweaver web page. I inserted the code into the div I’d already created for my header, but for some reason when I preview it in a browser, the header div that I created is aligned with the rest of the page (as it’s supposed to be), but the banner I made in Photoshop with the slices per this tutorial is aligned to the left of the screen instead of properly inside the header section of the page.

    I even redid my header div (and the wrapper div that goes around the entire page, except for the copyright at the bottom) to make sure it was surrounding the code created by following this tutorial. I even tried to make adjustments to the ‘position’ coding within the CSS, but none of those changes worked. The banner created in Photoshop is still aligned left on the page, partially on my web page and partially out of bounds.

    What am I doing wrong? How can I fix this? Help!


  • jola says:

    I have the very same problem as Sherry had, and I would be gratefull if you could tell me where i do wrong?
    Is thi a problem with positioning that have to be relative/absolute in div tag that contains another child div tag or vice versa, or something else is the problem?


  • Treneice says:

    Very Helpful-thank you

  • Avery says:

    I’m having the exact same problem as both Sheryl and Jola. I’m working on a mac, perhaps this has something to do with it… Any help would be great.

  • nate says:

    very helpful. thanks.

  • rockvil says:

    Thanks for this tutorial. Really easy to follow and is such a time-saver

  • Elias says:

    At first I just came here to check how to save already sliced parts easily as independent files, but seriously I had no clue photoshop saves (probably not bug-free, but hey, it’s still there) html & css code. This is awesome. 🙂

    Great video.

  • Get tutorial! Just what I was looking for!

  • Joshua says:

    Thanks for that tutorial. It was very helpful and just at the right level for me. Keep up all the good videos!

  • nil says:

    You’re the best, thanks Geoff!

  • sunny says:

    Awesome tutorial 🙂

  • Upma Nayyar says:

    Sir, U r Great.

  • Upma Nayyar says:

    Sir,U R great

  • Mary says:

    Great video! Now I’m looking for one for creating hotspots in Dreamweaver CS4

  • so clear thank you ever so much brilliant!

  • Alexander Tway says:

    Thanks a lot! Still helpful five years later!