Tutorial 3a: Creating a div layout using Photoshop and Image Ready (part 1)

This tutorial uses Photoshop CS2, Image Ready, and a text or html editor (I use Notepad) to create the css and xhtml code for a div style layout. Part 1 explains what to do in Photoshop and Image Ready. Part 2 will explain how to edit the resulting xhtml and css. I made the layout 800 X 600 so it can be viewed on a monitor with a resolution of 800 X 600. It is a good idea to avoid making people with lower resolution monitors scroll sideways. Level: Medium

  1. Make your layout. I am using a very simple layout in order to demonstrate this technique.
  2. Click on the slice tool. Make sure that it is set to slice and not slice select tool.
    tut3b
  3. Click where you want your first slice to begin and drag it across to the end of your slice.
    tut3c
  4. During step 4 you want to slice your layout so that you have one section for every area where you want to add content (text, images, videos, etc).
    Option 1: You can continue slicing your layout by repeating step 3 you can do so without cutting through any sections where you want to add content. For example, I could use option 1 if I am only adding content to the navigation and main content sections, but not if I am adding a footer.
    tut3d

    Option 2:
    Alternately after you make your first slice you can divide your slices. Right click on your layout and the click on divide slice.
    tut3e
    For this layout I want to divide the slices vertically so I check "Divide Vertically Into". I want the navigation bar and content section to be their own slices so I enter 5 for "slices across, evenly spaced" and do not change the "pixels per slice".
    tut3f
    Next move the slices. Click on each slice and drag it to where you want a slice to begin or end.
    tut3g
  5. Write down the numbers of the sections where you will want to add content. (ie Navigation 5, Content 7)
  6. Choose "Edit in Image Ready" from the File Menu. Wait for Image Ready to load. (Depending on your computer this may take a minute.)
  7. Go to File -> Output Settings -> HTML. Then change Preset to XHTML.
    tut3h
  8. While still in "Output Settings" choose "Slices". Choose the radio button for "Generate CSS" and make sure that "Referenced" is "By ID".
    tut3i
  9. Go to File -> Save Optimized As . Make sure that it is set to save HTML and images. Click "Save". You are now done with the Photoshop and Image Ready part of the tutorial.
  10. If you are already familiar with xhtml and css, open your html file and edit it. If not, continue to Part II: Editing you xhtml and css