122307slicingalayout-thumb
Sunday, December 23rd 2007
Photoshop
5 comments

Slice and Export a Web Layout to HTML from Photoshop CS3


Slice and Export a Web Layout to HTML from Photoshop CS3

Welcome to this video tutorial! We will learn how to take a Photoshop created web page layout template and slice it into individual pieces and then export it with an HTML file. We will cover user slices, layer based slices, auto slices, naming slices, assigning links to slices, alternate text for slices, creating multiple slices at one time, previewing our file in a web browser, saving individual slices as gifs or jpgs from the same document, and exporting a fully functional HTML file to go along with all of it.

Note: This tutorial is up due to popular demand, however this is NOT how I recommend exporting and building HTML sites. Photoshop does terrible, terrible things to your code that it exports… follow at your own risk! :D

No video appearing? Click here to download the Quicktime player for free! »

  • http://www.facebook.com/KristyCline Kristy Lynn Cline

    “Note: This tutorial is up due to popular demand, however this is NOT how I recommend exporting and building HTML sites. Photoshop does terrible, terrible things to your code that it exports… follow at your own risk! :D”
    What would you suggest to be the best way to build and export an HTML site?

  • Gary

    Then what is the best way to build and export an html site?

  • Max

    Ditto to below: great video and thanks for the info! But, if this isn’t how you suggest we get an original layout into DW, then please tell us how you would. :)

  • Jimmy

    Thanks for the video I’m a beginner and your tutorials are great and really easy to follow.

  • Rosi

    Brilliant tutor! THANK YOU!