 |
Like
before, you will need to save this image to your hard drive. |
 |
Now
open the photo in Photo Impact. Ctrl O will open the open dialog
box quickly. Right click on the photo and click on all, right click again,
and convert to object. |
|
Now
open your easy palette, and find your mask library. If you need help
with this, refer to part one where all
of this was covered. Find the peanut shape which we previously stored
in the sharpen category. Double click on the thumbnail of the peanut shape
in your mask library. This will apply your mask to the image. Please
note that using this method of converting your image to an object first
will not allow you to edit the mask before it is applied, or resize it.
This method works well only when the image and the mask are of compatible
dimensions. If you find that this method cuts off too much of your
image, you will have to skip the step of converting to an object and use
the transform tool instead to make the selection the right size. |
 |
Resize
the peanut shaped image so that it is about 300 pixels wide.
To help
you size the image correctly, you may want to turn on the ruler feature.
Down in the right hand corner of your photo impact screen, there is an
extra tool bar.
Click
on the icon I have outlined here. More choices will open when you
do this. Click on ruler. |
 |
Now
a ruler will appear along the top and right side of your image.
Now
click on and drag the square on the bottom right corner of the image until
the peanut is about 250 pixels wide.
Be sure
to use one of the squares in one of the four corners to resize the shape.
Also push and hold down on the shift key while dragging the corner inwards
with your mouse. This will keep the image in proportion. |
 |
Now
it is time to buttonize our image. Note that your selected area should
still be the peanut shaped image. If not, you won't be buttonizing
the correct part of your image. So click on web, then button designer then
any shape.
Click
on the bevel tab. Change your bevel size to 11, and your smoothness to
2. Make sure your bevel type is the one outlined in black here. Click
ok. |
|
Push
the space bar to select the base image. Now the white area under
your peanut shape will be selected. Resize it as explained above
until it is about 310 pixels wide.
Your
image should now look something like this: |
 |
Click again on your peanut shaped image,
and right click on it and click on shadow. Click in the box next to shadow
in the new window. Accept the defaut settings. |
|
We now
would like to fill the bland white background with a texture that matches
the picture. Go back to your easy palette. Click on the icon
that looks like an art museum. Click on the plus sign beside Fill
Gallery, and then on Background Textures. Double click on BT050.
You will have to scroll down a ways to find it.
Viola!!
the bland white background is filled with the texture.
This texture
just happens to match the picture very well. |
 |
Now
it would be nice if we had a divider bar at the right edge of our image.
Click on the path tool, and make sure that the rectangle shape is selected.
If not, click the shape that is displayed in the area I have marked with
an arrow. You will be able to select it then. |
| Right
click on the color box, and select eydropper. With the eyedropper,
click on one of the nicer dark colors in the image. I have
selected a dark chocolate. Now look at the illustration above again.
Where it says mode beside the color box, click on the down arrow beside
the words 2d object. Change to 3d custom. Click on the right
edge of your image, and draw a long skinny rectangle along the side.
If you get it too wide, change to the transform tool to size it the way
you want it. Now your rectangle will have edges at the top and bottom
that will cause lines when viewed tiled on a web page or in stationery.
Since lines generally prove distracting, we want to remove them.
I do this by using the transform tool to make the divider bar longer than
my working space is on both top and bottom. See the illustration
to the right. Do you see how the selection lines stick out on both top
and bottom? |
Now,
if you wish, you can copy your divider bar and paste another one right
beside it. Ctrl - C to copy it and Ctrl - V to paste. Arrange
both bars along the right side. You can use the arrow keys for precise
positioning. |
|
Now
we want to put our image on a strip that will cover the monitor.
First we want to select a color for the background. Click on the
eydropper tool. I have marked it here. Click on your picture on one of
the lighter colors.
This
color may be a little too dark or too light for your image. If so, right
click on the color box and click on windows color picker.
You
can easily select a color that is lighter or darker. This will change
your foreground color to a good color, and have it handy when we go about
filling our strip in with a good matching color. |
 |
Now,
before you go any farther, change to the pick tool and right
click on the image anywhere. Click on merge all. Now copy the whole
image to the clipboard. (Ctrl - C)
Open
a new image. (Ctrl - N).
Click on "active image"
This will set the size of your new image
the same as your image that is already open. Now erase the number
in the width box, (marked with an arrow here), and type in 1152.
Any
time you start a new image, you have the option of choosing a canvas color.
|
|
So,
right click on the little white box next to the word canvas, and click
on Foreground color. Now click on ok.
A
new image will open. Now all you have to do is paste your image on
your strip. Right click on the strip and click on paste. Your
image should appear already lined up with the left side. Be careful not
to move the image at all, or you will get an unwanted line Right
click and merge all. |
 |
Now we need to optimize or shrink the size
so that your friends won't have to wait forever when downloading
their mail. I like to keep the size under 60 kbs if at all possible.
Now click on web in the menu bar and click
on Image optimizer. |
 |
This will open another box. In this box,
you will see your image shown in two boxes. The one on the left is
the uncompressed version, and the one on the right is the compressed version.
You will only see the background color of your strip when the box opens.
Point to and click on the image, and slide
it to the right so that you can see the image, and not just the background.
Here I have used the illustration from the
Clip art tutorial, so don't get confused.
Make sure you have jpg selected.
Use the slider to adjust the level of compression,
while noticing the differences the compession level makes in your image.
Slide it far enough back to the left until you begin to see a difference,
and then back up just enough so that you see no difference. This
will give you the most compresed image possible while your end product
is still attractive. Be aware, that if you fill your background strip
with a texture, the more textured it is, the higher the size of the end
product. While textured backgrounds can be very attractive, they
are also quite costly to the size, and should especially avoided in web
backgrounds. |
