PI8 Component Designer Web Page

The Component Designer is a terrific resource for web page builders who are in a hurry or who have difficulty making their own navigation graphics. Every banner, button and bullet in the Component Designer is fully editable, so you can change the default colors and text to suit your own needs in building a simple web page.

web page

If you are interested in other tutorials on using PI to build web pages, you may want to check out my Web Album, Template Library Slide Show, Image Map, Web Page Edited With FrontPage, Vertical Scrolling Text and Images, CSS Fixed Background Scrolling Text, Customizing a Web Page Template, Link Object Web Page, Remote Rollovers, Popup Menu and Basic Web Page tutorials.

Start by choosing File, New, New Web Page (Shift+A) to access the New Web Page dialog box.

new web page

Make a new web page 750 X 550 pixels. Make sure that "Generate background" and "Color" boxes are selected and choose a background color. I'm using white. To use a background texture, select "Image" and the Web Background Image box will open. Select "Preset texture" to select one of the presets. I'm using the thin dotted line check pattern outlined in green below. (Alternatively, select "Background Designer" to open the related dialog box, or "File" to select one of your own backgrounds)

choose background image

Note that when you select a background image, you can edit its X or Y offset, as well its transparency from the Web Background Designer dialog box. When you've selected a background, click OK to return to the New Web Page dialog box. Click OK to create the new web page.

There are a number of Web Properties you can assign to the web page via the Web, Web Properties command. I won't go into the dialog box in this tutorial, but this PI8 Basic outlines its options in detail. You may want to pay attention particularly to the Image File tab, which defaults to a JPG. I always change the image type in which to save objects to GIF because JPG often blurs text and leaves color artifacts in images containing text.

Before you continue on with the tutorial, choose File, Save As and save the whole thing as a UFO file. Remember to save frequently while you are working. That way if you have to stop working or the power goes out, you won't lose all your work. I usually save things like this to my desktop, where I can find them easily and delete them later.

Now that you've got your basic web page made, let's add a banner. Choose Web, Component Designer to open up the dialog box. Select Banner, Rectangle_1 in the left pane, and the design shown outlined in red below. Click Next.

select a banner

Next you'll be taken to a screen for editing the banner directly. "Banner" will eb selected in the left pane initially. There are three tabs associated with the Banner itself, including Size, Shadow and Hyperlink. I'm not using any of these options. Under "Banner" you'll see four editable components: Title, Subtitle, Upper Part and Lower Part. Select Title in the left pane. Select the default Ulead text in the Text tab and replace it with your own text (e.g., Doll Pattern Central). Change the Font, if desired. Click the Color tab if you want to edit the Text color.

edit default text

Click Subtitle in the left pane to edit the default text, Font and font color if desired.

edit subtitle

Click Upper Part in the left pane. This will give you the opportunity to change the color of the top half of the banner itself. Then click Lower Part in the left pane to edit the color of the bottom half of the banner. I've chosen blues to harmonize with the blue and white grid pattern background.

edit banner colors

Now that the banner has been custom edited, it's time to Export it to the work space. Click Export and you'll be offered three choices. You could save directly "To Image Optimizer" or "As Individual Objects," but then you'd lose the ability to edit the banner any further in the Component Designer. If you're thinking of saving this web page as a UFO template, or might want to edit it further in the future, it's good to choose the third option, "As Component Object (in PhotoImpact)."

export component

In a moment you'll see the banner in the web page. It will be "stuck" to your cursor. Click to fix it in place in the web page. Since you've Exported it as a Component Object, any time you want to edit this object (and the others we'll be adding), all you have to do is right click on it and choose "Edit Component Designer Object" (or hit Shift+E).

To center the banner, select the Pick tool. In the Attributes toolbar, first select the "Center Both" option (1), then select the "Align Top" option (2). That will center and bring the banner up to the top of the web page. Use your down arrow key to move the banner down from the very top of the page.

center the banner

Let's add some navigation buttons. The Component Designer is still open, but minimized. Click on its icon in the task bar to reopen it. In the left pane you can select from individual buttons, rollover buttons, or a button bar. I'm making a button bar because it's quicker and easier to make a bunch of buttons at one time, all with the same colors, font, font color, etc. In the left pane, select Button Bar, Rectangle_1, and select the button bar shown outlined in red below. Click Next.

select a button bar

The next screen you see shows the components (Title, Bars, Panel) making up the button bar. By default, there are four buttons in a vertical row in the preview window. All bear the default Ulead text. "Button Bar" is selected. In the right pane are five tabs. Click through the tabs to see what each one offers:

Options: From which you can edit basic attributes (button text, link, alt text and status bar text)

Layout: Change from a vertical to a horizontal layout here, edit space between buttons and be sure that "Same width for all buttons" is selected, otherwise the button sizes will vary according to how much text is on them. This means that all of the buttons are going to be as wide as the one with the most text on it, so try to create button text labels that are fairly uniform in size to avoid having lopsided looking buttons.

Text: Allows you to edit the font and font style. Note that you cannot edit font size in the Component Designer.

Size: From which you can change the size of the buttons, in % or pixels.

Shadow: Lets you add a show to the button bar with the standard Shadow dialog box.

Return to the Options tab. In the right pane, select the first of the four ULEAD button text labels, then in the box just above it, select (highlight) the default text. Type in your desired button text (BABY) and hit Enter. The top button in the preview window will reflect the edit. Enter a URL for the link, alt text and status bar text, as shown below.

edit first button

Click on the second default ULEAD text to select the second button. Above it, select (highlight) the default text and type in text for the second button (e.g., FASHION) and hit Enter. Supply a URL, alt text and status bar text for the second button. The edit will be reflected in the second button in the preview window. Continue editing the rest of the buttons, so that all four show the correct text labels in the preview window.

edit all 4 buttons

To add more buttons, click the "Add a new button" icon, circled in the screen shot above. I've added two more buttons. Note that you can select a button and delete it, or change the order of buttons by selecting one and hitting the up or down arrow. I've finished making all six buttons for my button bar. I want to edit the colors in the buttons so that they harmonize with the banner and background texture. Under Button Bar in the left panel, select "Title." From here you can click a color square to edit the font color, or mix a custom RGB color. Alternatively, select a gradient or texture fill.

edit title color

In the left pane, click "Bars" to edit the color of the bars decorating the buttons. Click "Panel" in the left pane to change the color of the button panel. They all work the same way. Any edits you make will be reflected in the preview window immediately, so you'll have a good idea of what it will look like on the web page.

preview window shows edits

When you're satisfied with the button bar, click Export, "As Component Object (in PhotoImpact)." Click to fix in place, then drag to position the button bar where you want it to be.

Add a horizontal line if you wish to do so. Click the Component Designer icon in the task bar to reopen it. In the left pane select Separator, Modern 2. I'm using the one shown below outlined in red. The blues and aquas in the horizontal line go well with the rest of the colors on this web page, so I'm not going to edit its colors.

select separator line

Export the line as is as a Component Object to PhotoImpact and position it centered toward the bottom of the web page. Now you can close the Component Designer. You have the basics for a web page template, which you've created entirely from Component Designer objects. If you've saved this as a UFO file, you can use it as a web page template over and over again just by adding different HTML text objects, editing the buttons (text, URL, alt text, etc.) in the Component Designer, and adding your own graphics.

basic web page

To add text to your web page, it's important to choose the right command. HTML text is completely different than the text that you add with the Text tool. Text you make with the Text tool is treated by PI as a graphic. To add HTML text, choose Web, HTML Text Object (Shift+T) to open the HTML Text Entry Box. Note that you can format this text by selecting a different font, font color, font size, font style, alignment and other options. If you're using a textured background that makes text difficult to read, you can even change the background color of the text, so it will be a solid color. Type in and format your text.

If you are going to create links in the HTML text, select the word(s) for the link, then click the Hyperlink button (next to the underline icon). Doing so opens the Hyperlink dialog box. Enter a URL and target frame, if desired. Click OK to create the link.

create hyperlink

When you're returned to the HTML Text Entry Box, the link will be underlined in bright blue, the default color. To make the link a different color, select the text and click in the text Color box. As you can see below, I've edited the color of the links to a lighter blue.

edit link color

When all of the text has been formatted and edited, click OK to add it to the web page. The HTML text will appear in a bounding box. Drag the box to place it where desired, and drag on the bounding box control points to resize as needed. Note that if you see an error or wish to edit the HTML text, you only have to right click and choose "Edit HTML Text Object" (Shift+E) to do so.

Add any other graphics or objects that you want to appear on the web page. I'm using a doll object on the right side of the page. I added a button at the edge of the banner from the Component Designer. There are lots of really cute icons and bullets that make handy web page decorations. The button came from the Bullet section. Its color was edited the same way used to make the banner and button bar.

button bullet

The last step before previewing is to Slice the page. Choose the Slice tool from the Tool panel. In the Attributes toolbar, click Auto Slice.

Before saving the web page, check it out in your browser to make sure everything looks good. Choose File, Preview in Browser. You should be able to see the whole thing on the page. If you've made rollover buttons, make sure that they all work OK. If you get a box with an error message, it will tell you which objects need adjusting on the page. For example, you may have objects overlapping. Rollover buttons, especially, will throw error messages on preview if they are too close together. Go back and move the object(s) slightly. Select the Slice tool again and erase all Slice lines, then Auto Slice again before previewing.

To save the web page, choose File, Save for Web, As HTML. When the Save As dialog box opens, browse to a folder and give the web page a name. The HTML page will be saved, and all of the images on it will be placed into an images subfolder automatically. The images will be named after the name of the web page. So if you name the web page index.htm, the images will be named index_1.gif, index_2.gif, etc.

images named for web page

You can view the web page created in this tutorial here.

The last step is getting your web page online. Upload your web page to your server. Make sure that there is an images subfolder in the same directory. If there isn't, make one and then upload the images into that folder. If your file structure on your server doesn't match the file structure on your local computer exactly, the page will not display properly.

Remember, if you save this web page as a UFO, you can use it in the future as a web page template. It is easy to go back and edit the Component Designer Objects to create a completely different look. For example, in the screen shot below I've edited the colors of the banner and buttons below, and changed the button bar to a horizontal alignment.

edited objects

This tutorial uploaded 3/7/03

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage