Creating sidebar graphics with Blade Pro is dead easy. This tutorial will teach you how to create a solid interior side bar graphic and a patterned interior sidebar graphic with matching buttons and bars.

All the graphics on this page were created using the exact same Blade Pro preset (including the header graphic!). You can download this preset by clicking here. This preset is a good basic preset for creating solid color side bar graphics. All you need to do when you use it is to set the lights (both of them) to the color you want your sidebar graphic to be. Then play with the shape and radius until you find a combination you like.

Sidebar Graphic (Solid Color)

1. Open a new white graphic the width you want your sidebar to be and at least 150 pixels in height.
2. Apply a Blade Pro Filter. For this lesson, go for a filter effect that leaves the interior all one color. I will get to patterned interiors in the next lesson.
3. Make a selection on your sidebar the size you want your buttons to be (watch the coordinates in the lower left corner). For this pattern, you can make your button larger than you think you may need it because you can easly slice it up and put it back together to make it smaller (I'll demonstrate this later).
   
   
4. Select an interior portion of your sidebar graphic similar to the following:
   
   Note: You will want your final selection to be no more than 20 pixels high. Keep in mind that the larger your graphic is, the larger the file size will be and the longer it will take to load.
5. Crop your selection.
6. Add a white right border to give yourself working room for the shadow.
7. Add a right (horizontal) drop shadow that pleases you.
8. Because of a glitch in PSP 5, you will now need to repair your right drop shadow. To do this, select a portion of the drop shadow in the middle.
   
   
9. Copy this selection and paste it as a new selection. Move it down to the bottom (it will sort of "snap" into place. Repeat the paste and move to the top.
   
10. If you are working with a solid interior color graphic, you can also just do another crop of your graphic and cut out the clipped parts of the drop shadow.
11. Add a right border at least 900 pixels wide.
12. If you want to change the color of the main portion of your background, select it with the magic wand and flood fill with the color you want.

Variation

1. Create a side bar graphic similar to the above.
2. Blow up your graphic at least 1 time.
3. Carefully select the bar portion of the right side.
4. Copy your selection and paste as a new selection. Move the selection to the right of the original bar.
5. I cleaned up the right edge by selecting part of the edge and deleting it since it ended rather abruptly.
6. Repeat this procedure with the left bar.
7. Add your drop shadow if you want to.
8. Crop your selection again to eliminate the possibility of improper alighment of the newly pasted selections.

Matching Button

1. Create a new graphic the dimensions you recorded from your "button" selection in step 3 above.
2. Apply your Blade Pro selection to this graphic.
3. Save your button.
4. If you find later that your button is too large, with a solid color interior such as this one, you can slice your button up and move it until you get the size you want. As an example, your button is too tall (height). Make a selection from somewhere in the middle of the button to enclose all the bottom. Now, just slide your selection up until the button is the size you want it to be.
   
   
5. You can do the same procedure if the button is too wide. Just select from the middle to the right margin and slide your selection left.
6. Now, select the part of the button left after you create your new button, invert your selection (this will then select your button only), and crop your selection.
7. If your button is a solid color, all your edges should match up just fine.

8. Add text to your button. I added text in a very light (almost white) version of the background color and added a black drop shadow, no blur and offset 1,1.

Horizontal Bars

Icons & Decorations

Textured Side Bars