Tips! Getting Ready to Slice Your Site Design

Everyone's site will be different, so there's no hope of doing a tutorial for this. Below find a few pointers to get started. I expect problems to arise, but the tips below can help keep these to a minimum.

1. Designate and Keep Your Source Folder Tidy. You may have several Photoshop files you're outputting to the site folder from; name them carefully. Keep your source files secure and organized.

2. Be Sure You're Outputting to Your Site Folder Evenly . For each Photoshop document you're creating HTML pages from, be sure you're outputting to the site folder the exact same way. Your various pages should end up in one folder, and all images should end up in one images folder.

  • IMPORTANT: you'll have a lot of different images flowing into this folder: name your files carefully, because those names will be part of the file names that are output when the slices are turned into HTML.

3. Confirm the "Active Areas" in Your Designs. You must be sure what is just a background and what will be active, such as buttons, gallery pics, and other images that will be switched out from page to page.

4. Design in Boxes. The reason we went over HTML tables briefly is so you'd come to accept that the finished product of your image-sliced HTML page would be in rows and columns. There are real limits to flexibility to this approach, and there's no getting around them.

  • Keep images in even rows, and don't cut anything in half that is active (unless you love complexity and hard work).
  • Keep your buttons the same size, or at least accept that their clickable area will be the same.
  • Boxes don't lend themselves to going "around corners" -- err on the side of simplicity in your slices.

5. Separate the Pages in Your Site by Type. Most people will have at least two types of pages; 1) gallery pages and 2) a home page and 3) all the other pages.

  • Create a master Photoshop document that has unchanging elements in it that ALL pages will share, such as aspect ratio and size in pixels.
  • For single and unique pages such as home, contact and about pages, best to keep these in one PS doc if they are quite similar and have identical active areas.
  • If pages have unique active areas and must be sliced separately, duplicate and rename as unique PS files.
  • Duplicate the original doc and rename for each gallery or portfolio you'll be using. Do further designs and slices on each section.