PI6 Web Page

Welcome to my first PhotoImpact 6 tutorial! Of the many fabulous features in this latest version of "The best image editor for the web," one that will make many home page aficionados very happy is the ability to create web pages, like this one, including text and layout, right in the PI6 work space. All of the HTML code is generated for you and saved as a web page document. The images on the page are saved to an images folder, automatically. It doesn't get much easier than this to make a web page.

This tutorial uses the PI6 trial version to build a web page. If you find that you don't have the Component Designer banner and button bar that I've used in the tutorial, you have two options. The first is to pick another banner and button bar, and customize the colors to suit the background. The second option comes courtesy of my friend Kelly: Access the banner and button bar through PI5's Component Designer, edit their appearance, leave the Component Designer open but close down the rest of PI5, then open PI6 to build the web page. The Component Designer will still be open and you can Export the objects into PI6. As always, the idea behind the tutorial isn't to make the exact same thing I'm making, but to learn how to use a tool or technique.

If you are interested in other tutorials on using PI to build web pages, you may want to check out my Component Designer Web Page, 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, and Popup Menu tutorials.

Choose File, New. When the New dialog box opens, for Data Type, make sure you select True Color (it looks like a rainbow). For Image Size, choose Standard and select 750 X 550 pixels from the dropdown list. Make sure the Resolution is set for 72 pixels per inch. In the Canvas section, select "Web background." Your New dialog box will look like the one below, but the background image in the Preview window may be different than this one.

File, New dialog box

Click on the Browse button next to "Web background" to open the HTML Properties dialog box. From the four tabs in this dialog box you can specify all of the attributes for your web page. Right now you're on the Background tab. From here you can select a Color, Texture or an Image file for the web page background. Select Texture. Again, your Preview window may show a different image.

select Preset background

Note that there are two buttons underneath Texture: Preset and Designer. Clicking on Designer opens PhotoImpact's Background Designer, from which you may generate a background for your web page. For this exercise, however, click on Preset to open a selection of thumbnails representing preset backgrounds. Choose the one shown selected below.

select a preset texture

When you're returned to the HTML Properties dialog box, you'll see the background you've just selected in the Preview window.

selected background in Preview window

Next, click on the General tab. This is where you give PhotoImpact 6 the information it needs to generate important information about your web page, including key words for your META tags, a page title, the directory in which images will be found, and so on. Enter a title for the web page (which will show in the title bar of a visitor's browser), your full name as author, key words (which search engines use to index your site), and a file to which images generated for this page will be saved. By default, PhotoImpact 6 will create an images folder to which the images will be saved. If you want to save the images to a different folder, enter the name of the folder under "Image file location." For Encoding, leave the default of Western European selected.

General tab

Next, click on the File Format tab, which allows you to specify the file format in which to save the images on this web page. Note that the Background image option is grayed out because the selected background is already recognized as a JPG. The default for images that are "Simple text and shapes" is GIF Optimized 256. The default for "Image objects" is JPG Q75 Progressive, which means a JPG image with compression set to 75% and a progressively rendered image. Because we'll be adding buttons with text, and text looks blurry when saved as a JPG, change the Image objects type to GIF Optimized 256.

file format options

Click on the Options tab. All of the boxes should be selected (checked), as shown below. PhotoImpact will generate the HTML for the background image, images we will add later will remain separate images, URL's (the internet address for web pages) will be "relative" (reference the folder to which they are saved), and images will be saved to an "images" folder.

Options tab

Now that you've made all of these important choices for your web page, click OK to close the HTML Properties box. You'll be returned to the New dialog box. Click OK to close the New dialog box. An 750 X 550 pixel image will open in the work space. It will be filled with the background texture you selected.

Let's design a banner header graphic for the web page. Choose Web, Component Designer, to open its dialog box. Double click on Banner, and select Rectangle 2. Select the banner shown below, outlined in red.

select a banner

Click the Next button to proceed to the next step. "Banner" will be highlighted. Underneath that, you'll see 6 editable components of the banner: Title, Subtitle, UpperGround, Lower Ground, Righthand Box and Line. Click on Title, where you'll see two tabs for Text and Color. From the Text tab, highlight the default text and replace with your own text. You could also change the default font if you wish. Leave the text color white.

Click on Subtitle. From the Text tab, highlight the default text and replace it with your own URL. Change the Font to Arial. Click on the Color tab and change the text color to black by clicking on the black square in the Color Picker. Now the banner looks like this:

banner so far

Since the banner's default colors don't go with the background, we'll need to change them to more harmonious colors. Click on Upper Ground. There's a couple of ways to change the default color of brown. Either click in a square in the Color Picker, or double click on the large square showing the current color of the component, to open the Ulead Color Picker. No matter which method you use, you can enter RGB values to mix your own custom colors if you don't like any of the choices available. Change the Upper Ground component color to a muted gray-green, RGB=204, 203, 153. Click on Lower Ground and change the default of white to a muted pink, RGB=204, 153, 153. Click on Righthand Box and change the default color to pale blue, RGB=204, 204, 255. Click on line and change the line color to black. Now the banner looks like this:

banner with new colors

The banner has been edited and it's time to place it on the web page. Click the Export button and choose to export "As Component Object (in PhotoImpact)."

When the banner opens in its own window in the work space, take a critical look at it. If changes to text or color need to be made, right click and choose "Edit component" (or hit Shift+E) to edit the objects in the Component Designer again.

If you're satisfied with the banner the way it is, use the Pick tool to drag the banner onto the web page image. Position it near the center top of the web page. In the Attributes toolbar, click on the the Align option for "Center Vertically" (arrow). This will center the banner on your web page.

center vertically

To help the banner "pop out" a bit from the background, let's add a shadow. Right click on the banner and choose Edit Component. From "Banner," click on the Shadow tab.  Add a black shadow with the values shown in the dialog box below. 

add shadow

Click OK to close the Component Designer. Now the banner looks like this against the web page background.

header with shadow added

Let's add a vertical row of navigation buttons to the web page. Choose Web, Component Designer again. Select Button Bar, Rectangle, and select the button bar shown selected below.

select this button bar

Click Next to edit. You'll see that Button Bar is selected, and below are 3 editable components: Title, Panel and Frame. By default the Options tab is selected. Select the top "Ulead" default text, then highlight (select) the default text in the text box above it. Type HOME and hit enter. Notice that the top button now says HOME instead of ULEAD. For the URL, enter index.htm and ALT text of Home. If you'll be using frames, choose a Target frame from the dropdown list. Enter Status text of "My Home Page."

enter values for URL

Now we'll replace the text and supply other important information for the other three buttons. Select the second button, highlight the default text, and replace it with GALLERY. For the URL enter gallery.htm and ALT text of Gallery. For Status text enter "Artwork from My Gallery."

Select the third button, highlight the default text and replace it with LINKS. For the URL enter links.htm and ALT text of Links. For Status text enter "Links to My Favorite Resources."

Select the fourth button, highlight the default text and replace it with RINGS. For the URL enter rings.htm and ALT text of Web Rings. For Status text enter "Web Rings I Belong To."

Next, click on the Shadow tab to add a shadow to the buttons. We'll use the same shadow values used for the banner. The dialog box with these values is shown below:

add shadow with these values

Now that the text, URL, ALT text and Status text have been completed for all 4 buttons, and shadows added, let's change the color of the buttons so that they harmonize with the web page background. We'll leave the text white, so click on Panel. From the Color tab, click on the muted gray-green color used on the banner, RGB=204, 204, 153. Now click on Frame. From the Color tab, click on the same muted pink used on the banner, RGB=204, 153, 153.

Time to send the buttons to the web page. Click the Export button and choose "As Component Object (in PhotoImpact)." The button bar will open in its own window in the work space. With the Pick tool, drag the button bar onto the web page background. Position it on the left side of the page.

buttons added to page

Now let's add some text to our page. PhotoImpact will generate all of the HTML code for the web page, including the text placed on it. Click in the base image to deactivate all objects. Choose Web, HTML Text Object to open the HTML Text Entry box. Note that by default the Font is Times New Roman, 12 pt, black. Enter the text shown below.

HTML Text Entry Box

Let's make our first link by selecting (highlighting) the word "Gallery." Click the little globe icon right next to the Help button. Doing so opens the Hyperlink dialog box. From here you enter the URL of the page to which you wish to link. You could link directly to a URL online or browse your hard drive to a local folder and file for the link. Since we haven't created any other pages for this page to link to, let's just type in gallery.htm and click OK.

Hyperlink dialog box

When returned to the HTML Text Entry Box, while "Gallery" is still selected, click on the B to make the text Bold. Leave the text selected to change the link default color, which is bright blue. Click in the link color box and select a muted green that will harmonize with the page background, RGB=152, 172, 128. 

Now select Links. Create a hyperlink to links.htm, make the text Bold, then change the link color to muted green. Repeat for Rings, making a hyperlink to rings.htm.

Select (highlight) the entire block of text. From the Font dropdown list, select Georgia or some other generic web font. Click in the HTML Text Entry Box to deactivate text. Now select only the part of the text beginning with Gallery, all the way down to include the entire Rings line. Center this text by choosing the "center text" icon, just to the right of the Font box. Now the whole thing looks like this.

all edits to text have been made now

Click OK to close the HTML Text Entry Box. The text will appear on the web page, surrounded by the Transform Tool's bounding box. You will notice that the centered text does not all fit on the same line at the default size. Drag the center right control point to the right slightly to enlarge the box, so that the 3 lines of centered text occupy only one line each. Position the text box so that the top row of text is on the same horizontal plane as the top of the top button in the button bar. Center the text below the banner. A 50% size view of the page is shown below.

 halfsize view of page

If everything doesn't look like it should to you, right click on the text object you've just inserted and select "Edit HTML Text." Doing so will re-open the HTML Text Entry Box, so you can continue to edit the text.

OK, now we're ready to perform a little PI6 magic! We're going to save the whole thing, including the image objects and the text objects, as a single HTML web page document. 

Choose File, Save For Web, As HTML. Doing so opens the Save As dialog box. Browse to the folder to which you will save the web page. Give the web page a name (e.g., index). 

Save As dialog box

You'll notice that the only choice in the "Save as type" dropdown list is "Web Page (.html, .htm). By default, the file will be saved as index.htm. If your server requires the .html file extension, under "File name" type in index.html so that the "l" will be added. Now click Save. 

Here's a tip you might want to take advantage of -- If you think you'll be using the web page again, save the whole thing as a .UFO file. That way you can open it up any time you need it, edit just the text, and all of the buttons with their links, the banner, etc. will remain in effect.

Remember back at the beginning when you specified the parameters for the web page document in the HTML Properties box? All of the information you entered into that dialog box will now be part of the web page document "index.htm." All of the images have been saved to an "images" folder, which was created automatically during the Save. The contents of the images folder are shown below.

contents of images folder

If you open the web page in a browser from your own hard drive, you will see how it all fits together. PhotoImpact 6 cleverly assembles the images and text on the web page in tables. 

Remember, when you upload the HTML page and images to your server, the file structure on the server must mirror the file structure on your local computer exactly, or your page won't load properly online. Be sure to upload the images to an images folder on your server. If you don't have an images folder, make one and upload the images to it.

For simple web pages, PhotoImpact 6 may be all you need. If you need to tweak the layout, you can open up the page in your favorite HTML editor and edit the document just as you would any other HTML page. 

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



Back to Homepage