page title button

example

Using only PhotoImpact we'll design and save a web page with buttons that link to other places as well as showing off your favorite project. This isn't as complicated as it sounds. PI does all the work, you do the fun part...the Designing.

What you will need:

The webset you created in Project 94 of the Beginner's Workshop.
Or a basic Webset including a background.

Let's begin...

  • Go to File/New/New Web Page
    example
  • This looks a bit different from the New Image screen and there are some important things we need to do here at the beginning before clicking OK.
  • Under Page Settings is where you enter the Title of your Page. The title can be anything you like, from "My First Web Page" to "HOME on the WEB". For the purposes of this tutorial let's use My Web Page
    example
  • Now look down to Page size and click on that button on the right of Standard to see a selection of choices. We'll be skipping the preset sizes and entering our own as shown highlighted in blue. Width=800, Height=1000 in Pixels.
    example
  • To use the background you created,put a check next to Generate Background.
    example
  • Then down at the bottom right corner click the Details button. You will get a new pop-out control box.
    example
  • Click the Background Tab and go down where it says File and click on the Icon of the Folder. This will allow you to browse and find your Background created in Project 94. When you find it click the open button and you should then see it appear in the box to the right that shows what your background looks like.
    example

    Now click on the Image File Tab.
  • Be sure that "Put image files in sub folder" and "Copy background image to sub folder" are both checked.
    example
  • And now finally you can click the OK button. Your new web page will open in your workspace displaying the background you created for it. Notice that it is not being displayed at full size. Because of this your background might look a little funny. But when it's viewed full sized it will look normal. PhotoImpact automatically reduces the size to make it fit in the available workspace to allow you to have more room to work.
    Here's what mine looks like...
    example

Now for the fun part, putting the web set to work on your new page, link the buttons and add some text.

  • Open the webset you created in Project 94. You should have a Banner, and three buttons--Home, Email and Guestbook.
  • Drag each one to your web page and place them like so. Use the Alignment tools on the Attributes tool bar to even them up in a horizontal line and space them evenly apart.
    example
  • Click on the Home button to make it active and then right click it and choose Properties from the menu. It's the last choice at the bottom.
    example
  • When the control box opens, click on the Image Map button so you can add a URL so that visitors to your page can click on this button to be taken to another page.
    example
  • The area I have highlighted here in blue, is where you will enter the URL of the page the button will link to. For this first button, Home, we will add the URL to the BW home page. So type in http://pirc-bw.com. Then click the OK button. You won't notice any changes to your button, it will look just as it did before. What you have just done is make that button clickable. If you preview your page and move your mouse over the button your status bar will display the URL for PIRC. The same will be true when your page has been published to the Web. You will NOT see this change in PI.
  • Repeat this last step for each of the other two buttons with the following changes. Add the url for COREL to the Guestbook button. (I suggest you copy and paste this since it is such a long and complicated address)  http://www.corel.com/corel/category.jsp?cat=cat20138&rootCat=cat3610089&storeKey=us&languageCode=en
  • On the email button you will need to type mailto: followed by your own email address. Be certain you don't include any spaces.

Now we need some text...

  • Grab your text tool and set it up as follows.
  • Font - Arial
  • Size - 14
  • Color - Black
  • Style - Bold
  • No Border or Shadow

    Type something for your visitors to read. You might say welcome, or say something about yourself.
    Add the following lines:
    While I have been in the Beginner's Workshop, I have participated on the PhotoImpact International Bulletin Board and the PIRC Forums. Both are great places to find a project and share ideas and techniques with fellow PI users.

    And finally before you finish...

    Here is my favorite Project from the Beginner's Workshop:
  • Here's more of the fun part. Find your favorte BW project and open it in PI. Now Copy it and Paste it onto the page. It will appear at the top, so grab your Pick tool and move it down below your text. The web page is large enough to allow for most any project result to fit. But do downsize it if need be to make it fit nicely on the page. Use your alignment tools if necessary to make it look nice.
    For my example I chose Project 55.
  • Now you are ready to save your Web page. But, saving this time will be a little bit different than just optimizing and saving an image. We are going to save it two times. First we will save it as a .UFO. This is so that the page can be opened again in PI and edited. So, go to FILE/Save As and choose the UFO as the file type. Name it mywebpage.
  • Next we will save it again as HTML. This time go to FILE/Save for Web/as HTML. You should see mywebpage, or the name you chose for your UFO, already in the space where the filename goes. But for posting on the web we need to name it index. Be sure you do not skip this step, and do NOT capitalize index. When saved it will have the file extension '.html' behind it. Also in the process of saving as html, a new folder entitled 'images' will be created and all the images that make up your page will automatically be saved inside it.
    example

Congratulations, you now have completed a web page in PhotoImpact.

  • Yours might look something like mine below, reduced in size by 50%. You can see all the elements, the banner, buttons text and project. Click on it to see the real thing. If you are using a large size monitor you may see your background border repeat. Remember that the page was designed with only 800 pixels in width.
    example

Copyright © Merlene Guldager

     This document and the images contained therein may not be translated, duplicated, redistributed or otherwise appropriated.