Slice and Export a Website Layout + HTML: Photoshop Tutorial!

Check this video out at Hi-Res here:

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. Please enjoy and don't forget to check out the site

See video


How do I access the guieds,

How do I access the guieds, you know the blue vertical and horizontal lines to help with spacing and alignment? I'm accustomed to using them, but PSe7 appears not to have it, even though I can see it in the, Snap To,.. menu,.. Normally I'd have the select tool, and would drag from the ruler, but it's not working, and I can't see any editing options in Preferences. Please help, the guieds are important to my creation of game-level, (map), textures for Unreal Tournament (UT99). Thankyou.

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options