Paint Shop Pro Version 8

BAR INTERFACE - Tutorial

Overview:  (Good reading while the images download)

In this tutorial we will build an interface design using bars. The final image file can be sliced up into smaller files and posted on a web page as a navigational bar. (see image above)

Tools Used:
1. Create New Image
2. Pen Tool
3. Create Selection from Vector Object
4. Save Selection as an Alpha-channel
5. Gaussian Blur
6. Create Guides
7. Contract a Selection
8. Convert Vector layer to Raster layer
9. Merge Down a Raster Layer
10. Paste as a New Selection
11. Rectangular Selection Tool
12. Create New Raster Layers
13. Flood Fill with Pattern
14. Inner Bevel Tool
15. Flood Fill with Gradient
16. Add a Texture Effect
17. Create a Circular Selection
18. Merge Visible Layers
19. Create a Rounded Rectangular Selection
20. Cut Out a section of a Layer
21. Add Text
22. Adjust Text Position with Ctrl+Arrow Keys
23. Object Alignment Tool

Basic Steps Taken:
Step 1. Create blank image with guides placed at given locations
Step 2. Build Title bar
Step 3. Build Item bars
Step 4. Build base plates
Step 5. Build background
Step 6. Add screws
Step 7. Merge layers to allow a drop shadow of interface on the background
Step 8. Add text on the Title Button and the Item Buttons
Step 9. A Look at web implementation - "The Next Step"

Those are the basic steps and the tools we will use in building our interface image.  This will be a challenge to the novice user but I have confidence that you can do it.  Most of the techniques that I use in this tutorial was learned from others who were kind enough to post them on the web.  If you notice something that looks familiar then I thank you for your effort in educating me.
If this tutorial helps you to use and enjoy PSP8 then please email me and let me know.  I get no monetary rewards for doing my web page and these tutorials, your interest and comments are all I desire.

Downloads:
- Download the Metallic gradient and unzip into your "My PSP8 Files/Gradients" folder (See below)
   example: C:\Documents and Settings\username\My Documents\My PSP8 Files\Gradients
- Download the Line Style Round Ends and unzip into your "My PSP8 Files/Styled Lines" folder (See below)
   example: C:\Documents and Settings\username\My Documents\My PSP8 Files\Styled Lines
- Optional - I have created the blank image with guides to save you some time if you wish.
   You can skip to step 2 if you use the downloaded file.  We will still add some guides later so you will get some experience with guides.

 

Instruction Steps

Step 1. Create a blank image as per our desired size with guides at given locations.

HINT: Square brackets contain short-cut keys for the current command.
- Create a new image [Ctrl+n]. 400 wide x 400 high (Pixels), 16 million color, background white
- Toggle on the Ruler display with [Ctrl-Alt-r]
- Toggle on the Guide display with "View menu>Guides"
- Toggle on the Snap to Guides option with [Shift-Alt-g]
- With LMB click & drag on the top ruler to place horizontal guides at:
      50, 110, 160, 210, 260, 310 and 330 pixels
- With LMB click & drag on the left ruler to place vertical guides at:
      20, 40, 60, 120, 180, 200, 360 and 380 pixels

Step 2. Build Title bar.

- Save your image as a .pspimage file with the name navbar.pspimage.
- Important: It is a good rule of thumb to save your image after you add new features.
- Create a new raster layer above the back ground layer by "Selecting the background layer in the Layer palette and with the RMB menu select "New raster layer".  Name it "Title Bar".
- Make sure that the new "Title Bar" layer is selected in the Layer palette.  The next operation will create a vector layer and it must be above the raster layer "Title Bar".
- Select the Pen tool [v]
HINT: New Shape Icon Select between creating objects
- Tool Option Settings:  Check "Create as Vector", Mode: Drawing, Segment type: Line
     Line Style: Round Ends, Width:50, Check "Anti-alias"
- Material Palette Settings: Foreground: Black, Background: White.
- Draw a line as shown below.  Note that the end points will snap to the intersection of the guides.

- Now create a selection using the current vector object with "Selection menu>From Vector Object" or
     [Crtl+Shift+b].
- Now save the selection as an alpha-channel with "Selection>Load>Save Selection>
     Save Selection to Alpha-Channel".  Name it "Title Bar".  You may need this selection later and having it as an alpha-channel you can load it anytime.
- Next convert the current vector layer to a raster layer with RMB menu on the "Vector 1" layer in the
     Layer palette by selecting "Convert to Raster Layer".
- Now we want to move the "Raster 1" layer into our "Title Bar" raster layer by RMB menu on the "Raster 1" layer in the Layer palette by selecting "Merge>Merge Down".  Note that we now only have the "Title Bar" and it contains our black line.  Make sure this layer is selected in the Layer palette.
- Toggle off the Guide display with "View menu>Guides"
- Select the Pen tool [v]
- Tool Option Settings:  Un-Check "Create as Vector", Mode: Drawing, Segment type: Line
     Line Style: Round Ends, Width:18, Check "Anti-alias"
- Material Palette Settings: Foreground: White, Background: White.
- Draw a line as shown below while you hold down the shift key.  Shift key will cause the line to be horizontal. Also, if you zoom in you can draw the line easier.

NOTE: We have drawn a line as raster in a selection.  As long as you can see the path and end points you can edit the line by moving the end points and changing the tool options. Once you select another tool your becomes part of the raster layer.
- Now let's draw a smaller line as shown below but first select the "New Object" button on the
     Tools option palette (see left sidebar).
- Select the Pen tool [v]
- Tool Option Settings:  Un-Check "Create as Vector", Mode: Drawing, Segment type: Line
     Line Style: Round Ends, Width:10, Check "Anti-alias"
- Material Palette Settings: Foreground: White, Background: White.
- Draw a line as shown below while you hold down the shift key.  This will cause the line to be horizontal. Also, if you zoom in you can draw the line easier.  Note that the bottom small line is shorter on each end than the top larger line.

- Now to get the desired effect we want to apply a "Gaussian Blur" with "Adjust menu>Blur>Gaussian Blur".
- Settings: Radius:4.00
- This creates a 3D effect which turns our line into a chrome bar with rounded ends.

- Now we are going to place a long button on our bar.  This is where the text will be placed.
- Toggle on the Guide display with "View menu>Guides"
- Delete the current selection with "Selection menu>Selection None" [Ctrl+d]
- With LMB click & drag on the left ruler to place vertical guides at: 80 and 320 pixels
- Make sure that the new "Title Bar" layer is selected in the Layer palette.
- Select the Pen tool [v]
- Tool Option Settings:  Check "Create as Vector", Mode: Drawing, Segment type: Line
     Line Style: Round Ends, Width:35, Check "Anti-alias"
- Material Palette Settings: Foreground: Gradient "Metallic", Background: White.
- Gradient Settings: Style: Linear, Angle: 0, Repeats: 0, Un-Check Invert
- Draw a line as shown below.  Note that the end points should snap to the new guides.

- Now create a selection using the current vector object with "Selection menu>From Vector Object" or
     [Crtl+Shift+b].
- Contract your selection with "Selection menu>Selections>Modify>Contract"
- Settings: Number of Pixels: 5
- Now save the selection as an alpha-channel with "Selection>Load>Save Selection>
     Save Selection to Alpha-Channel".  Name it "Title Button".  You will need this selection later when we colorize the button.
- Next convert the current vector layer to a raster layer with RMB menu on the "Vector 1" layer in the Layer palette by selecting "Convert to Raster Layer".
- Now we want to move the "Raster 1" layer into our "Title Bar" raster layer by RMB menu on the "Raster 1" layer in the Layer palette by selecting "Merge>Merge Down".
- Fill with the Fill Flood tool on the Tools toolbar.  If the selection marquee disappears hit [Ctrl+Shift+m]
- Fill Settings: Match mode: none, Blend mode: normal, Material Foreground: Gradient "Metallic"
- Toggle off the Guide display with "View menu>Guides"
- Select the Pen tool [v]
- Tool Option Settings:  Un-Check "Create as Vector", Mode: Drawing, Segment type: Line
     Line Style: Round Ends, Width:7, Check "Anti-alias"
- Material Palette Settings: Foreground: White, Background: White.
- Zoom in, hold down shift key and draw line as below.  Remember, you can move your line and the end points as long as it is selected (see large view below).

- Select "Adjust menu>Blur>Gaussian Blur" with Setting: Radius: 2.00
- To redisplay our selection type [Ctrl+Shift+m] or "Selection menu>Hide Marquee"
- To give our button more detail we will add a drop shadow with "Effects menu>3D Effects>Drop shadow"
    Settings: Vertical:3, Horizontal:0, Opacity:70, Blur:6, Color: Black
- Delete the current selection with "Selection menu>Selection None" [Ctrl+d]
- Recap: You have built your "Title Bar" and it is on layer "Title Bar".  You have save (2) Alpha-Channels. One encloses the complete "Title Bar" and the other encloses the "Title Button".  You also have guides that we will use later for building the other components of our interface.  There are (2) layers called "Title Bar" and "Background".  If your image does note agree with our recap then please review and correct before continuing.

Step 3. Build Item bars.

- Now we want to build an Item bar and copy it to the other (5) locations.  In building the "Item Bar" we
     will use the same procedure as with the "Title Bar" with the exception of a smaller size.
- Create a new raster layer above the back ground layer by "Selecting the background layer in the Layer palette and with the RMB menu select "New raster layer".  Name it "Item Bar".
- Make sure that the new "Item Bar" layer is selected in the Layer palette.  The next operation will create a vector layer and it must be above the raster layer "Item Bar".
- Toggle on the Guide display with "View menu>Guides"
- Select the Pen tool [v]
- Tool Option Settings:  Check "Create as Vector", Mode: Drawing, Segment type: Line
     Line Style: Round Ends, Width:40, Check "Anti-alias"
- Material Palette Settings: Foreground: Black, Background: White.
- Draw a line as shown below.  Note that the end points will snap to the intersection of the guides.

- Now create a selection using the current vector object with "Selection menu>From Vector Object" or
     [Crtl+Shift+b].
- Now save the selection as an alpha-channel with "Selection>Load>Save Selection>
     Save Selection to Alpha-Channel".  Name it "Item Bar Top".  You may need this selection later and having it as an alpha-channel you can load it anytime.
- Next convert the current vector layer to a raster layer with RMB menu on the "Vector 1" layer in the Layer palette by selecting "Convert to Raster Layer".
- Now we want to move the "Raster 1" layer into our "Item Bar" raster layer by RMB menu on the "Raster 1" layer in the Layer palette by selecting "Merge>Merge Down".  Note that we now have the "Item Bar" layer and it contains our black line.  Make sure this layer is selected.
- Toggle off the Guide display with "View menu>Guides"
- Select the Pen tool [v]
- Tool Option Settings:  Un-Check "Create as Vector", Mode: Drawing, Segment type: Line
     Line Style: Round Ends, Width:14, Check "Anti-alias"
- Material Palette Settings: Foreground: White, Background: White.
- Draw a line as shown below while you hold down the shift key.  Shift key will cause the line to be horizontal. Also, if you zoom in you can draw the line easier.

NOTE: We have drawn a line as raster in a selection.  As long as you can see the path and end points you can edit the line by moving the end points and changing the tool options.  Once you select another tool your becomes part of the raster layer.
- Now let's draw a smaller line as shown below but first select the "New Object" button on the
     Tools option palette.
- Select the Pen tool [v]
- Tool Option Settings:  Un-Check "Create as Vector", Mode: Drawing, Segment type: Line
     Line Style: Round Ends, Width:8, Check "Anti-alias"
- Material Palette Settings: Foreground: White, Background: White.
- Draw a line as shown below while you hold down the shift key.  Shift key will cause the line to be horizontal. Also, if you zoom in you can draw the line easier.  Note that the bottom small line is shorter on each end than the top larger line.

- Now to get the desired effect we want to apply a "Gaussian Blur" with "Adjust menu>Blur>Gaussian Blur".
- Settings: Radius: 4.00
- This creates a 3D effect which turns our line into a chrome bar with rounded ends.

- Now we are going to place a long button on our bar.  This is where the text will be placed.
- Toggle on the Guide display with "View menu>Guides"
- Delete the current selection with "Selection menu>Selection None" [Ctrl+d]
- Make sure that the new "Item Bar" layer is selected in the Layer palette.
- Select the Pen tool [v]
- Tool Option Settings:  Check "Create as Vector", Mode: Drawing, Segment type: Line
     Line Style: Round Ends, Width:25, Check "Anti-alias"
- Material Palette Settings: Foreground: Gradient "Metallic", Background: White.
- Gradient Settings: Style: Linear, Angle: 0, Repeats: 0, Un-Check Invert
- Draw a line as shown below.  Note that the end points should snap to the new guides.

- Now create a selection using the current vector object with "Selection menu>From Vector Object" or
     [Crtl+Shift+b].
- Contract your selection with "Selection menu>Selections>Modify>Contract"
- Settings: Number of Pixels: 4
- Now save the selection as an alpha-channel with "Selection>Load>Save Selection>
     Save Selection to Alpha-Channel".  Name it "Item Button".  You will need this selection later when we colorize the button.
- Next convert the current vector layer to a raster layer with RMB menu on the "Vector 1" layer in the Layer palette by selecting "Convert to Raster Layer".
- Now we want to move the "Raster 1" layer into our "Item Bar" raster layer by RMB menu on the "Raster 1" layer in the Layer palette by selecting "Merge>Merge Down".
- Fill with the Fill Flood tool on the Tools toolbar.  If the selection marquee disappears hit [Ctrl+Shift+m]
- Fill Settings: Match mode: none, Blend mode: normal, Material Foreground: Gradient "Metallic"
- Toggle off the Guide display with "View menu>Guides"
- Select the Pen tool [v]
- Tool Option Settings:  Un-Check "Create as Vector", Mode: Drawing, Segment type: Line
     Line Style: Round Ends, Width:5, Check "Anti-alias"
- Material Palette Settings: Foreground: White, Background: White.
- Zoom in, hold down shift key and draw line as below.  Remember, you can move your line and the end points as long as it is selected.

- Select "Adjust menu>Blur>Gaussian Blur" with Setting: Radius: 1.50
- To redisplay our selection type [Ctrl+Shift+m] or "Selection menu>Hide Marquee"
- To give our button more detail we will add a drop shadow with "Effects menu>3D Effects>Drop shadow"
    Settings: Vertical:3, Horizontal:0, Opacity:70, Blur:6, Color: Black

- Now it is time to copy the "Item Bar" we just finished to (4) other places.
- Toggle on the Guide display with "View menu>Guides"
- Select the "Item Bar" layer in the Layer Palette
- Select "Edit menu>Copy" or [Ctrl+c] to place a copy of the "Item Bar" on the clipboard
- Select "Edit menu>Paste>Paste as New Selection" or [Ctrl+e].
- With the mouse move the copy to the location below "A" by placing the mouse on the Drop Point.
- Notice that the guides in the center of the bar and location will cause the bar to snap into position.
- Select "Edit menu>Paste>Paste as New Selection" or [Ctrl+e].
- With the mouse move the copy to the location 2 below "A" by placing the mouse on the Drop Point.
- Repeat for the more "Item Bars" as shown below.

- Recap: You have built your "Title Bar" and the (5) "Item Bars" and they are on layers.  You have save (4) Alpha-Channels. One encloses the complete "Title Bar", one encloses the "Title Button", one encloses the complete top "Item Bar" and one encloses the top "Item Button".  You also have guides that we will use later for building the other components of our interface.  There are (3) layers called "Title Bar", "Item Bar" and "Background".  If your image does note agree with our recap then please review and correct before continuing.

Step 4. Build base plates.

- Select the "Background" layer in the Layer Palette.
- RMB click on the "Background" layer and from the menu select "New Raster Layer", name it "Plates"
- Select the "Selection tool"
   Settings: Selection type: Rectangle, Mode: Add, Feather: 0, Checked Anti-alias
- Now select the (2) rectangles as illustrated below:

- Make sure your layer palette looks like the image below.  The "Plates" layer must be below the "Title Bar" and "Item Bar" layers.  The plates that we are going to build next must be under the bars and in order for this to happen the "Plates Layer" must be under the bars.  The stack order the the layer palette determines the stack order in the image.  Neat, right?

- To build our plates we will use the Flood Fill tool loaded with a pattern.  I would suggest that you experiment with different patterns to see the wonderful effects you can get.
- With the "Plates" layer selected, select the "Flood Fill" tool [f].
   Settings: Match mode: None, Blend mode: normal, Opacity: 100, Material Foreground: See Below
- Material Foreground: Pattern "Paper 04", Angle: 0, Scale: 100
- Now with the mouse pointer click in one of the selected rectangles.  You will see the fill go behind the bars and fill both rectangles.
- Just for grins, let's put a bevel on the top edge of the plates.  This is what makes PSP my favorite software program, "You can create as you go!"
- Select the Inner Bevel tool by selecting "Effects menu>3D effects>Inner Bevel"
   Settings: Bevel: 2, Width: 5, Smoothness: 5, Depth: 5, Ambience: 0, Shininess: 0
   Angle: 315, Intensity: 50, Elevation: 30, Color: white
- Delete the current selection with "Selection menu>Selection None" [Ctrl+d]

Step 5. Build background.

- For the background we will fill it with the Metallic gradient and then apply a texture.  You could also fill the background with the color of your web background.  This would give us a super effect in the web browser.
- Toggle off the Guide display with "View menu>Guides"
- Select the "Background" layer in the layer palette.
- Select the "Flood Fill" tool [f].
   Settings: Match mode: None, Blend mode: normal, Opacity: 100, Material Foreground: See Below
- Material Foreground: Gradient: Metallic, Style: Linear, Angle: 135, Repeats: 0
- Now with the mouse pointer click on the Background.  You will see the fill go behind the bars and the rectangle plates.  This is because our background layer is on the bottom of the layer stack. 
- Select "Effects menu>Texture Effects>Texture"
   Settings: Texture: Crisscross, Size: 100%, Smoothness: 7, Depth: 3, Ambience: 0, Shininess: 0
   Color: White, Angle: 315, Intensity: 50, Elevation: 30
- Our interface is starting to look very sleek.

Step 6. Add Screws and do cutout in the right plate.

- Toggle on the Guide display with "View menu>Guides"
- With LMB click & drag on the left ruler to place vertical guides at: 47 pixels
- RMB click on the "Item Bar" layer and from the menu select "New Raster Layer", name it "Screws"
- To create a circle selection, select the "Selection tool" [s]
   Settings: Selection type: Circle, Mode: Add, Feather: 0, Check Anti-alias
- Now create a selection circle as illustrated in the image below.  With LMB click in the center and drag to the right until the circle snaps to the guide at 47 pixels.

- Select the "Flood Fill" tool to fill our screws.
   Settings: Match mode: None, Blend mode: normal, Opacity: 100, Material Foreground: See Below
- Material Foreground: Gradient "Black-white", Repeats: 0, Check Invert, Style: Sunburst, Horizontal: 21, Vertical: 24, Check "Link center and focal points.
- Now with the LMB click in our selection circle to fill it with the gradient.
- Select "Edit menu>Copy" or [Ctrl+c] to place a copy of the screw head on the clipboard. We will use the clipboard content to place screws at all other locations.
- To give our screw head more detail we will add a drop shadow with "Effects menu>3D Effects>Drop shadow" Settings: Vertical:2, Horizontal:2, Opacity:85, Blur:4, Color: Black
- We will come back later and draw a screwdriver slot in each screw head after all screws have been created.  That way we can have them on different angles so they will look real.
- Now we are going to place a screw head at each location as illustrated in the image below.  To do this we will use the "Edit menu>Paste>Paste as New Selection" or [Ctrl+e].  The below steps will be repeated for each screw head.  MAKE SURE THE "Screws" LAYER IS SELECTED IN THE LAYER PALETTE.
   1. Type [Ctrl+e] or select
   2. Drop screw head in place
   3. Do a drop shadow with the settings as above.  By using a paste as selection we retain our selection for the drop shadow. 
- Repeat steps 1 - 3 for each location as illustrated in image below.  Note that the screw heads will snap to your guides at the correct location.


- Toggle off the Guide display with "View menu>Guides"
- Select the Pen tool [v] to draw the screwdriver slots
- Tool Option Settings:  Un-Check "Create as Vector", Mode: Drawing, Segment type: Line
     Line Style: Round Ends, Width:1, Check "Anti-alias"
- Material Palette Settings: Foreground: Black, Background: White.
- Zoom in close to each screw head so you can place the slot accurately.  See the image below for my placement.  Do not run the ends of the slot to the edge of the screw head.

 

Step 7. Merge layers to allow a drop shadow onto the background.

- Now we need to merge the Screws, Item Bar, Title Bar and the Plates layer into a single layer.
- Turn-off visibility of the background layer by LMB click on the Eye to its right on the layer palette.
- RMB on the "Screws" layer and select "Layers menu>Merge>Merge Visible" from menu.
- You now have a layer called "Merged" that contains our complete Interface minus the background.
- Turn-on visibility of the background layer by LMB click on the Eye to its right on the layer palette.
- Your Layer palette should look like the below image.

- Our final step to do to the interface is to cut out a rectangle in the right hand plate.
- Toggle on the Guide display with "View menu>Guides"
- With LMB click & drag on the top ruler to place horizontal guides at 90 pixels.
- With LMB click & drag on the left ruler to place vertical guides at 230 pixels.
- To create a rounded corner rectangle selection, select the "Selection tool" [s]
   Settings: Selection type: Rounded Rectangle, Mode: Add, Feather: 0, Check Anti-alias
- Now create a selection as illustrated in the image below.  With LMB click in the top left corner and drag to the bottom right as the selection snaps to the guides.
- To remove the plate material hit the [Delete] key.

 

- Select the Outer Bevel tool by selecting "Effects menu>3D effects>Outer Bevel"
   Settings: Bevel: 2, Width: 5, Smoothness: 5, Depth: 14, Ambience: 0, Shininess: 0, Angle: 133, Intensity: 50, Elevation: 30, Color: white
- The Outer bevel will make the cut-out match the other edges of the plates.
- Toggle off the Guide display with "View menu>Guides"
- Delete the current selection with "Selection menu>Selection None" [Ctrl+d]
- Now a Drop-shadow would give our interface a nice touch so let's do it!
- With the "Merged" layer selected in the layer palette select the "Effects menu>3D Effects>Drop shadow"
    Settings: Vertical:3, Horizontal:3, Opacity:70, Blur:4, Color: Black

Step 8. Add text.

- Now we want to add text to our image which will give the interface meaning and purpose.
- In our example we will label the interface as a menu for Paint Shop Pro tutorials.  The items will be different areas of techniques in PSP.  You may want to use different labels and that will fine also.
- First let's title our interface.  I have chosen "PSP8 Boot Camp".  Below are the steps I take when I place text on my drawing.  (Make sure your "Merged" layer is selected.  This will cause the new vector layer, that PSP creates, to be placed on top of the interface.)
1. Select the Text tool in the Tools toolbar or [t].
2. Create as: Vector, Font: Arial Black (your choice), Size: 16, Stroke width: 0, Check Anti-alias, Alignment: Center, Check Auto kern, Leading: 0
3. Material settings: Background color: R:106, G:30, B:10 (Red) (Foreground material does not come into play because our Stroke width is set to "0".)
4. LMB click in the center of the Title button and enter your text in the text entry box then hit OK
5. Use the Ctrl Key + arrow keys to position your text in the center of the button.  Here's mine.

Now we will add text for each Item button.  Keep in mind that you will want to edit the text later by changing the color for the Mouse roll-over effect.  Then, sometime I only change the color of the button for the roll-over.  We will decide on this one later in step 9.  For now let's place the Item names.
- Make your labels like I have done mine in the image below using these steps.
1. Select the Text tool in the Tools toolbar or [t].
2. Create as: Vector, Font: Arial Black (your choice), Size: 10, Stroke width: 0, Check Anti-alias, Alignment: Left, Check Auto kern, Leading: 0
3. Material settings: Background color: R:106, G:30, B:10 (Red)
4. LMB click in the left side of the Item button and enter your text in the text entry box then hit OK
5. Use the Ctrl Key + arrow keys to position your text on the left side of the button. 
- Do these steps for each Item button.  Line them up as best you can. Here's mine.

- To line up your text precisely on the left side you can use PSP's alignment tools.
- Select the "Object Selection" tool or [o] key.
- Now LMB click and drag a box over your Item labels.  A box will be draw around them to let you know which ones are selected.
- On the Options bar in the Object alignment: area select the "Align Left" tool.  This aligned the labels below the top select item using the top items position as the stationary position.
- You can now use the Ctrl + Arrow keys to move the complete stack of labels if you need to.
WE ARE FINISHED!!!
If you would like to read my thoughts on using the interface in a web page then go to step 9.

Step 9. A Look at the next step.

- The next step, the way I see it, is to create a copy of the "Navbar.pspiamge" file and change the color of the Item buttons and even the text color that would make a hi-lighted button as the mouse pointer passes over it.  After you have created the hi-lighted image you use PSP's tool called "Image slicer" to divide the image into smaller images and the buttons would be sliced so that would be a compete image.  Those would be the images that would change when the mouse pointer moved over them.
- You may also what to place an image in the rectangular opening in the right hand plate.  An image that pertains to your web site theme.
- I have plans to return to this tutorial and build a part two that will instruct in adapting our interface image for a web page.  I will cover building the Hi-Lighted image, the "Image Slicer" and the HTML programming.  So if you would like to move on into the realm of mouse overs and HTML just drop me a line.  Below is a preview of coming attractions ... now how did I get those colors in the Item buttons?  Simple ... PSP magic!

If this tutorial helped you to use and enjoy PSP8 then please email me and let me know.  I get no monetary rewards for doing my web page and these tutorials, your interest and comments are all I desire.  Also, let know it you would like to take the next step.

 

Please let me know if any information on this page is in error by using my "comment page".

 

Go HOME - Refresh Frames