Kewl Cat Interface / Template

• HERE IS A LINK TO OUR RESULT!
• You must have complete Kewl Cat Logo
• You should have completed through #6 from the Kewl Cats Animation.
• You will need to download this image to use for this tutorial
• This is a systematic and repetitive process to get all five pages to look alike and work correctly.
• You may want to look at these two output settings(file=>output settings) for this tutorial to set the publiishing settings for the html. HTML and Background

1. Open your PSD file from the Kewl cats animation #6.

2. Click Image=> Canvas size. Set the canvas to 750 wide by 450 high and place the current image in the upper left corner.

Click on layer 1, the black layer. Hit your D key and fill the new area using the paint bucket.

3. Set the foreground color to green hex #009933 and the background color to hex #00FF00. Select the Paint brush tool. Set to the Photoshop 7 preset called "Scattered Maple Leaves".

• diameter = 74 px
• angle = 0
• roundnes = 100%
• spacing checked and 25%

4. Set the scatter to the following

• Both axis checked at 393%
• control = off
• count = 17%

5. In one stroke move your cursor from the lower left up the side and along the top just on the canvas .

6. Toggle your colors so that the brighter green is on top. In one stroke, move your brush from lower left up the side right on the edge of canvas and across the top on the edge. Use an eraser to remove the partial leaves that overlap the bottom edge and right edge.

7. Click on the border layer for the sign and link it to the sign layer. Click layer=> merge linked. Duplicate the new sign layer.

8. Use your move tool with bounding boxes to resize the sign copy to about 50 pixels high by 120 pixels wide. Move this under the tail.

9. Duplicate sign copy and move down. Duplicate sign copy2 and move down. Continue till you have all the buttons you want. Use your text tool set to color hex #DFC39E to assign the button names. I used about, family, photos, links, contact, home set with the Book antiqua font at 19 pixels. Right click on the kewl cats text layer and select "copy layer style". Click on each of your text layers and paste the layer style. Set the text layer modes to linear burn.

10. Link all the button text layers and the buttons. Click your move tool. Select the move tool options to align horizontal centers. Click Distribute top edges of the move tool options. Then unlink the buttons form the text. With text still linked to the other text labels, move it over the buttons.

Duplicate the text button labels layers. Link the duplicates and move them over to the right upper area in the beige, under the sunset. Use the align tool to move them all to the same spot. Turn them all off except HOME.

11. Click on layer 1 were it is all black. insert a layer and using your rectangular marquee to select a rectangle that under laps the buttons and the logo. Fill this with color hex #FBEFD8

12. Open your sunset image and select all, edit copy. Click back on your background layer and select edit=> paste. Use your move tool to adjust the placement of the sunset.

Switch to image ready. Because the slicing of this image includes  1) animation; 2) rollovers; and 3; remote rollovers; It will be important to follow this section completely and in the order given.

13. SLICING! Use the slice tool to slice your  image.  Here is how I sliced my image:

1. Animated slices: Make sure the animated tail is one slice and the animated paw is another. Set the animation slices to gif on the optimize pallette.
    
2. You should Name Each and every slice so image ready does not create new images when you save as a different name.
   
   
    
3. Set a link for the buttons. Add .html for each so that the links will work as you save.
   
   index.html
   about.html
   family.html
   photos.html
   links.html
   contact.html
    
4. On the solid colored images, select them and set the color for them so the cell will be colored to match. Use the Hex for specific colors and identical matches.
   
   
    
5. Each slice should be determined as Gif or JPG and quality. Where there is a lot of mixed colors, choose jpg. where there is a lot of text or solid colors, choose gif. Toggle back and forth to the optimize palette to see the loss as you adjust the colors. This is a very important step.

14. ANIMATION: Open the animation palette. Duplicate frame one so that you have 5 frames. The animation consists of the following cat frame differences:

• frame 1: cat is on, 1 second.
• frame 2: cat is off, cat 1 is on, 1 second
• frame 3: cat is on, 0.5 seconds
• frame 4: cat 1 is off, cat 2 is on, 0.5 seconds
• frame 5: cat 1 is off, cat 3 is on, 0.5 seconds.

15. ROLLOVERS LOCAL AND REMOTE: Open the rollover panel.

ABOUT ROLLOVER: Select the FAMILY button. Click the button on the bottom of the rollover palette to add a rollover. Highlight your rollover state.

• Turn off the eye on the effects on the ABOUT button text.
• Turn off the word HOME in the upper right
• turn on the word ABOUT  in the upper right
• Open the Animation panel and recreate the animation from #14 above while the about rollover is highlighted.

FAMILY ROLLOVER: Select the FAMILY button. Click the button on the bottom of the rollover palette to add a rollover. Highlight your rollover state.

• Turn off the eye on the effects on the FAMILY button text.
• Turn off the word HOME in the upper right
• turn on the word FAMILY in the upper right
• Open the Animation panel and recreate the animation from #14 above while the FAMILY rollover is highlighted.

PHOTOS ROLLOVER: Select the PHOTOS button. Click the button on the bottom of the rollover palette to add a rollover. Highlight your rollover state.

• Turn off the eye on the effects on the PHOTOS button text.
• Turn off the word HOME in the upper right
• turn on the word PHOTOS in the upper right
• Open the Animation panel and recreate the animation from #14 above while the PHOTOS rollover is highlighted.

LINKS ROLLOVER: Select the LINKS button. Click the button on the bottom of the rollover palette to add a rollover. Highlight your rollover state.

• Turn off the eye on the effects on the LINKS button text.
• Turn off the word HOME in the upper right
• Turn on the word LINKS in the upper right
• Open the Animation panel and recreate the animation from #14 above while the LINKS rollover is highlighted.

LINKS ROLLOVER: Select the LINKS button. Click the button on the bottom of the rollover palette to add a rollover. Highlight your rollover state.

• Turn off the eye on the effects on the LINKS button text.
• Turn off the word HOME in the upper right
• Turn on the word LINKS in the upper right
• Open the Animation panel and recreate the animation from #14 above while the LINKS rollover is highlighted.

CONTACT ROLLOVER: Select the CONTACT button. Click the button on the bottom of the rollover palette to add a rollover. Highlight your rollover state.

• Turn off the eye on the effects on the CONTACT button text.
• Turn off the word HOME in the upper right
• Turn on the word CONTACT in the upper right
• Open the Animation panel and recreate the animation from #14 above while the CONTACT rollover is highlighted.

HOME ROLLOVER: Select the HOME button. Click the button on the bottom of the rollover palette to add a rollover. Highlight your rollover state.

• Turn off the eye on the effects on the HOME button text.
• Open the Animation panel and recreate the animation from #14 above while the HOME rollover is highlighted.

16. SAVING YOUR TEMPLATES-

INDEX.HTML : Click File=> Save Optimized.

• File name:  index.html all lower case, exactly as you called the home button in the template.
• Save as type: HTML and Images
• Settings: Default settings
• slices: all slices.

ABOUT.HTML

1. Click on the HOME text in the upper right to highlight the slice.
2. Turn the HOME text off, and the ABOUT text on for that area.
3. Check all the rollovers to insure that the HOME is off and  the correct remote rollover is on for the upper right.
4. Click File=> Save Optimized.

• File name:  about.html all lower case, exactly as you called the home button in the template.
• Save as type: HTML and Images
• Settings: Default settings
• slices: all slices.
• Save in the same location as index.html so the images will go in the same folder. Say yes to overwrite, just to be sure.

FAMILY.HTML

1. Click on the HOME text in the upper right to highlight the slice.
2. Turn the HOME text off, and the FAMILY text on for that area.
3. Check all the rollovers to insure that the HOME is off and  the correct remote rollover is on for the upper right.
4. Click File=> Save Optimized.

• File name:  family.html all lower case, exactly as you called the home button in the template.
• Save as type: HTML and Images
• Settings: Default settings
• slices: all slices.
• Save in the same location as index.html so the images will go in the same folder. Say yes to overwrite, just to be sure.

PHOTOS.HTML

1. Click on the HOME text in the upper right to highlight the slice.
2. Turn the HOME text off, and the PHOTOS text on for that area.
3. Check all the rollovers to insure that the HOME is off and the correct remote rollover is on for the upper right.
4. Click File=> Save Optimized.

• File name:  photos.html all lower case, exactly as you called the home button in the template.
• Save as type: HTML and Images
• Settings: Default settings
• slices: all slices.
• Save in the same location as index.html so the images will go in the same folder. Say yes to overwrite, just to be sure.

LINKS.HTML

1. Click on the HOME text in the upper right to highlight the slice.
2. Turn the HOME text off, and the LINKS text on for that area.
3. Check all the rollovers to insure that the HOME is off and the correct remote rollover is on for the upper right.
4. Click File=> Save Optimized.

• File name:  links.html all lower case, exactly as you called the home button in the template.
• Save as type: HTML and Images
• Settings: Default settings
• slices: all slices.
• Save in the same location as index.html so the images will go in the same folder. Say yes to overwrite, just to be sure.

CONTACT.HTML

1. Click on the HOME text in the upper right to highlight the slice.
2. Turn the HOME text off, and the CONTACT text on for that area.
3. Check all the rollovers to insure that the HOME is off and the correct remote rollover is on for the upper right.
4. Click File=> Save Optimized.

• File name:  contact.html all lower case, exactly as you called the home button in the template.
• Save as type: HTML and Images
• Settings: Default settings
• slices: all slices.
• Save in the same location as index.html so the images will go in the same folder. Say yes to overwrite, just to be sure.

HERE IS A LINK TO OUR RESULT!