Optional Services Sliced - Second Level Lesson

Once again this may be beyond what you will be doing for the class homework, but lets discuss slicing this page so we can get more experience with the slicing process.

1. I opened the retirement home second level mock up - CD > CIS 58.53B Advanced Class > PSD Files > 2nd-level > optional-services-no-slice.psd. Again I analyzed the elements and decided on a slicing plan. here are the slices I created for the "services" page.

  1. Empty space - no image just a spacer gif and a break tag
  2. Color block and title of section - slice changes from section to section
  3. Name of site - same image is used on every second level page
  4. Duotoned photo strip - slice changes from section to section
  5. Welcome button - used on every page, position is the same on every page
  6. Empty space - no image just a spacer gif and a break tag
  7. Empty space - no image just a spacer gif and a break tag
  8. Services button - used on every page, position will vary. On the "welcome" page the button may move down, on all other pages it is below welcome.
  9. Body Text - spacer gif and then content which changes from page to page
  10. Services sub-navigation - this image only appears on the services pages
  11. Facilities button - used on every page, position will vary
  12. Staff button - used on every page, position will vary
  13. Fees button - used on every page, position will vary
  14. Mission button - used on every page, position will vary
  15. Contact button - used on every page, position will vary
  16. Sitemap button - used on every page, position will vary
  17. Home button - used on every page, position will vary
  18. Empty space - no image just a spacer gif and a break tag
  19. Logo cell - used on every page, position will vary. If a page has no sub-navigation then the logo will be higher up. This may be ugly so the designer can create an empty cell that is used to force the logo down. On a page with really long sub-navigation the logo may be forced down below the photos, we will just have to live with it.

2, Next I named each slice and then created rollover effects for the main navigation. Since the sub-navigation will be set up as an Imagemap I do not need rollover effects.

3. Finally I used ImageReady to create a services.html page and the images that accompany it. Here is the sliced page, I have turned on the border for the table to get a better look at the slices and so I can see the structure of the table.

services page sliced

home || begin || logos || photos & collage || rollovers (2) || animation || 2nd level || templates