Codeless PSD to HTML

Learning how to use Photoshop's slice tool to create a tabled HTML site

There are many ways that we can convert a Photoshop layout into a working HTML page - some more code-heavy than others. In this lesson, we will use a somewhat old-school, codeless approach.

Download the PSD source file here.

Homework

  1. Follow along with the video tutorial.
  2. Slice up the layout that we styled out in the previous lesson. Be sure to enter URL info for the slices you want to be linkable, and set Alt text for all the images containing text. If you have certain cells containing paragraphs of text, use the "No Image" option when choosing "Edit Slice Options". We will later style this using HTML and CSS.
  3. Go to File > Save for Web & Devices, click "Save" and choose Format: HTML and Images, Settings: XHTML, Slices: All slices.
  4. Locate the exported files, place them in their own folder, ZIP them up, and upload them to Blackboard Discussions.

Questions?

As always, please email me if you have any questions! jearley1@ivytech.edu