WORK MODE
PhotoImpact 12 has several preset work modes. For this tutorial, we will be using the Full Edit mode so all of the tools in PhotoImpact will be available to you.
As you work, use your mouse to drag this  along with you to mark your place.
LET'S GET STARTED
You will be creating a banner (or welcome sign), three buttons, and a bordered background strip. These are the basic elements needed to create a simple web page. Check out the Basic Web Set Samples before you start. It will give you some good ideas.
Basic Web Set Samples
CREATING THE BANNER
Use the Component Designer (web\component designer) to create a banner of your choice. Keep in mind that you will also be creating a background and buttons to match.
- When you have finished designing your banner, export it as component object. This will automatically merge all the objects for you. It will also create the banner in the correct width (470 or less). Here is a sample banner.
- Save your banner with a transparent background. Make sure you select a matte for either a light or dark background so you won't have jagged edges.
MAKING THE BUTTONS
You may use the Component Designer to make your buttons or make them yourself. Make the buttons approximately 175 pixels wide, 65 pixels high. Make 3 buttons and add text to each as shown below:
  
Save each button with a transparent background. Be sure to use the appropriate matte color so they won't have jaggies.
MAKING THE BACKGROUND
For the background, you will be making what is commonly called a side border or "strip". This consists of a graphic down the left side and a different color for the rest of the background.
- Create a new image around 150x200. Fill the image with your choice of background color. Create a rectangle in a contrasting color for your border.
- Make sure the rectangle is large enough so there are no gaps at the top and bottom. To test for gaps, click on File\Preview in Browser\As Tiled Background. You should see several repetitions of your border. If there are gaps, fix them now and re-check.
 
- Decorate your strip with images from the Component Designer or use Path shapes from the Shape Gallery. Add a drop shadow if desired or even a second color strip as shown below:
- Test again to insure that there are no gaps. Now we need to make the strip wide enough to fill an entire web page. Select Adjust\Expand Canvas. Expand only the RIGHT side by 1600 (the example shows 200 because the window is not large enough to show the full 1600) Use the same color you used as your fill color when you made the image. The reason for expanding it this large is so your web page will look good on monitors set at higher resolutions. If it's not long enough, it will "wrap" around and your border will repeat itself somewhere on the right side.
Test your background one final time in the browser. This will show exactly what your background will look like.
- Merge all and save your background strip. This completes the elements needed to create your first web page.
BEGINNER WORKSHOP PROJECT
If you are doing this project for the Beginners Workshop, arrange your banner and buttons on the background as per the example below. Merge all and crop. Use the cropped image to display to the group.
You're invited to join the PIRC Fourm! This is an active PhotoImpact Forum where you'll find a wonderful group of warm, friendly, talented, and knowledgeable people who are ready and willing to share their expertise with you. There are creative activities for all levels of PhotoImpact users. This forum is 100% free and everyone is welcome.
|
Copyright© MaryLou White.
This document may not be translated, duplicated, redistributed or otherwise appropriated without permission.
|
