One of the coolest web features in PhotoImpact is the Component Designer. This is a great way to create good looking page elements without doing the grunt work of creating them from scratch (although that's fun too).

You access the Component Designer from the Web menu. Once you do, you get a dialog box as below.

The designer is composed of templates ranging from banners to separators. You can see the various components by clicking the + sign next to each template. Take a few minutes to explore all the choices to see what's offered. When you are done, we'll create the first element to add to our web page.

1. Open the mysite.ufo you saved previously (unless it's open already).
2. Browse to the Banner section of the Component Designer, choose the Irregular_1 section.
3. Select the second banner in the first column and click on NEXT.

Your window should look like the one below. This is where we will customize the banner before inserting it into our page.

This window is split into three sections. The preview window (1), the object window (2) and the object attribute window (3). The preview window will allow us to see the changes to our banner as we make them. The object window contains all the separate objects that make up the banner, and the attribute window allows us to change the look of each object. Take a couple minutes clicking on each object and see how the attribute window changes accordingly. Feel free to make any changes you want at this point, but for simplicity's sake we'll leave the banner as it is, but change the text to match our page. Click on the Title object. In the attribute window, highlight the text and retype My Site Graphics Change the font to Arial Black. Click on the Sub Title object. In the attribute window, highlight the text and retype www.mysite.com Change the font to Arial Black and the color to R: 51 G: 255 B: 255 When you are done, your banner should look like the one below. That's all the changes to make to the banner. There are a couple more buttons to discuss here, located to the right of the preview window. (refer to image above). The four icons here control the zoom settings of the preview window. The first two (magnifying glasses) will zoom in and out. The next icon will show your component at a 1:1 ratio or it's original size. The last icon will fit the banner to the preview window. Below these icons is a color box, and is used to change the background the component is set against. Changing this color will have a different effect on the component depending on how we export it to our web page. For now, leave it white or change it back to white if you changed the color. Now we have our banner complete, we need to get it into our page. The Export button will give us three choices: image optimizer, as a web component, or as individual objects. Image Optimizer: our banner will go straight to the Image Optimizer where we can save it for use on a web page. Individual Objects: the banner will be brought into PI as a separate image containing all the objects that make up the banner. Choosing this option if you changed the preview window background will export the banner with the colored background. Using this option is good if you are creating an image to use outside of PI. Component Object: the banner will be imported right into our page and we can place it where ever we want. In order to edit this at a later time, we would need to bring it into the Component Designer. Export your banner as a component object and place it on your page. Save your page as a ufo for use later or leave it open if you are continuing on. Next, we'll create some buttons for our page. Creation and Design: Rollover Buttons