Modeling web examples on the Internet, Front Page Image Rollovers, Guest Book, ULead 3D program, Geocities.com File Manager.

In this Web, you must use your own pictures. The main part of this web will be to design two pages: the first, entry page and then the secondary page friends, family, etc... You'll also use Front Page image rollovers that changes images when the mouse "rolls over" them. This web will take about 6 days.

 Web: Carmen Diaz

1) Design Ideas:

One way to improve as a Webmaster is to attempt new, challenging designs. Some may be talented and loaded with ideas and designs.  Others, while inspired, may struggle.  A good approach for the latter is to improve by first modeling what other webmaster designers have done. Of course, you cannot take or copy any of their work and call it yours, but you can try to experiment in an effort to improve your own skills.

Note:  One piece advice I like you to follow is to name your files with only characters and numerals, with no spaces in between.  Also, in your Web, place all your pictures in the folder images.

2) The Images:

At the start, you are going to need two main images to work with: the first will be the background for the first page (first image), and the second will be the background that will be used as the template for all the other pages (second image).  For all this to work properly, you need to be very precise about the image and table sizes.

Decide on an image that will be your first page image. It must be of good quality and must have the height and width around 500 pixels. This is a large image so you have to watch the file size. You do not want people waiting for it to load.  

Channel Mixer:
Open your image in Pain Shop Pro. In the Layer Palette, make a new layer: Layer / Adjustment Layer / Channel Mixer.  Set the Source Channels for monochromic image. So not to completely eliminate the colors, in the General tab, set the Opacity to 50%. See the settings.

Mask:
This image must also have some white space on the right side so we can later place some black color text over it. (see the final image)

Go to Masks / Show All and then Masks / Edit. Use the Selection Tool to make a rectangle on the right side of the image. (check here)

Select the Flood Fill Tool and in the Color Palette select the Gradiant as the Styles.

Double Click on the Styles to activate the Gradient Palette.

Use the Edit and Angle options to set it as shown. Apply the gradient to the rectangular selection on the image. You should now get a gradual transparency from left to right.

To reduce the file size of the image, go to File / Export / JPG Optimizer. Take a quick tutorial about how this utility works and why you should use it at JPGOptimizer.  The files size should not be more than 40 kb or so.  Name the image firstimage.jpg

Second Image:
The second image will be about the same size as the first except most of it will be white. (see the image)

Open your second image in Paint Shop Pro. Make sure the background color is set to white. Click on the Selection Tool and set the Options Palette as shown:

Back on the image, make an oval around the section you want to keep. Go to Selectio /Invert and then Edit / Clear. You should now be left with your selection.

Position it in the upper right corner of the page and save it as  secondimage.jpg.