Creating A 6 Page Template From Scratch
Part 2
 1.
Page Formatting via OUTPUT SETTINGS
Click file=>Output Settings=>Background. Set the following:
BACKGROUND
- View document as image
- BG color=> other
- Set the BG color on the color palette that comes up to Hex #333399
 Change
the output settings catagory to each of the following and make sure the
highlighted area is set as in the images below.
Slices
- Generate table
- Empty cells Gif, IMG W&H
- TD W&H = ALWAYS
- Spacer cells= automatic
 Saving
Files:
Put images in folder- images
 HTML:
Include Zero Margins on body tag so the template sites in the upper left
corner of the webpage without margins.
2. SLICING and OPTIMIZING
This template should be sliced to reflect the type of outputted image you
want:
- Smallest kilobyte size
- least lossy
- Separate slices for areas you want mouse rollover effects to occur
- Isolation of the Photo image into a slice that can easily be changed
for different pages.
- Cells produced with single colors that can be produced with a 1 by 1
pixel gif stretched or a background cell color change.
Guide Image for slicing- An overview image of how I sliced this template
is provided here
- You will use your slice tool to slice the image.
- You will use your slice select tool to select slices to specify
options and to resize.
- Use your magnifying glass to magnify your image so you can be more
specific in your slices
- Use your Hand tool to move your image up and down right and left
when it takes up a larger area then your viewing area.
1. Open the slice palette. The blanks are as follows:
- type= image or no image. Solid colors can have no image so the
cell will take on the background color or the color of the cell.
- BG is the background color. You can set the background color for
the cell if there is a transparent gif in the cell or if you are
specifying if no image, the cell color will be the color that shows up
in that space.
- The name is the name of the image when we save it, the extension
of the image will be set on the optimize panel.
- the URL is a link if any that it will link to. In this case it
will be the index page,
- The target is where you want the URL to show up when the link is
clicked if the image is a link.
2. Slice the company logo from left border to just beyond the text.
-
 type
= image
- bg = none (the main color matches the page background set in the
output settings.
- name= logo
- url= index.html (the main index page.)
- Target =_top. This will load the page in the same window on top,
so it may break out of frames if it was opened in a frameset.
- Optimize palette settings
3. Slice the 4 stroke lines, two up in the top menu bar, and two in the
bottom menu bar. Use the slice select tool to select each slice. Make sure
they are just the 1 pixel height. Set each of these slices to the following
slice settings.
- color = hex # CCCCFF
- Type = no image
4. Use the Slice tool to slice up each of
the 6 menu items, going from the stoke slice on top to the
stoke slice on the bottom, but not including. Use the slice
select tool to make sure these slices are butted up against
each other and meet in the middle. Make sure the 1st button
has about the same about of blue on the left side as on the
right, and that the home button goes all the way to the
template border.
- type=image
- BG = none
- Name=Same as text in template, but without spaces or
special characters, all lower case.
- URL= Page url associated with the image name. Make
sure it ends in .html
- Target=_top
- Optimize palette settings
|
 |
5. Click on the left side of the menu bar between the top and bottom
stroke.
-
 type=
no image
- BG= color hex #666699
6. Slice up the copyright on the bottom like the menu, in that
you have two slices in this bar, one is your copyright and you
can name this slice copyright, no url etc. The other is just a
color, so set the slice type to No image. and set the color to
hex #666699 again. 7. There are solid bands of color that
span from left to right, with under the menu bar stroke, and
then above and below the copyright bar strokes. Slice these
and set the Slice panel to show no image, but a BG color of
NONE since we set the page as the same color background in the
output settings. 8. Slice the left and right solid color
areas, setting them to no image and NO BG color.
 9.
Slice out the Photo AREA. This will take a small section of
the gold curve in the corners, which is ok. Set the image as
the keyboard image as the only photo available. Set the
following slice panel options:
-
 Type
= image
- BG = none
- Name= keyboard
- URL = blank
- Optimize settings should include 16 million colors so it
will be a jpg.
 10.
Slice the rectangular slice for the main white content area. It will be
solid white and go from the top gold stoke to the bottom, but will not
include the corner so it is totally white. Set the slice to no image and
white bg. 11. The other images that are created by image ready must be
named. Name them 1, 2, 3, 4, 5, etc. They have no links, or
bg color, and they should be optimized at 4 colors gif.
This will conclude the slices and optimization.
Click here
to go to the rollovers and saving the 6 pages. |
