PSP Tut 4 cont
Web Basics
FrontPage Tuts
PSP 7 Tuts
Links
FeedBack

 

Home Site Map

Making your Own Buttons, Dividers, and Web Design Elements Continued

Buttons Cont: Steps to making a simple web button and other web elements
First you need to determine the size you wish your navigation button to be.  The buttons for this page *width 120, height 30*.
  1. Open PSP

  2. Click File

  3. Click New * Make sure your settings match those in graphic 1, then click ok. * Setting are: *Width 120, Height 30, Resolution 72,000, Background Transparent, Image type, 24 bit*
     

Graphic 1

 New Image Dialog Box

  1. Now click on the Flood fill tool *click here to see the tools*

  2. Click on the Foreground Color icon *See graphic 2 below*.

Graphic 2                          Graphic

 Color Palette           pop up color picker

  1. Choose your color from the colors palette pop up *see graphic 3* By clicking the color of your choice. Click ok.

  2. Click the (>) arrow on the Style icon * see graphic 2 *

  3. Click the brush Icon * this will give you a solid color through-out your button.

  4. Now Click inside the transparent Button area. This fills the transparent area with the color you picked. You should now have a flat colored rectangle.

  5. Now click effects from your menu bar

  6. Click 3D

  7. Click Buttonize

  8. Set desired settings for our button we used height 20, width 20,Opacity 75%

  9. Click on file

  10. Click save for web

  11. Name your button purple navigation button   Congratulations you've just created a web button.This is the finished simple purple button we made with this tut >>

Using the same steps above *to make the buttons*  you can easily make other design elements. Like Banners a good size to play with is 600 x 60 and web elements like Backgrounds and logo's
( make sure to change your settings for width and height for each individual element like the horizontal line used on this page.

bullet

< Bullets keep these small. And keep your eye on the file size of all your graphics the smaller the better and the faster they will load for you and your viewers.

Remember to play with the different settings.  Example: adding a simple gradient effect to the button navigation button the results are vastly different. I added two colors using the styles Option choosing the gradient icon to get this button effect. I changed the setting to 10, 10, 75. Which gives a smoother softer look.  Put your imagination to work and come up with your own unique designs.  Enjoy ... 

End of Tut...

 star
Back to Top

Home | Up | Web Basics | FrontPage Tuts | PSP 7 Tuts | Links | FeedBack

 

Updated: 01/02/2004
NOTE: Any Script errors or Banner ads within this website...belong to Tripod.  We have nothing to do with the content nor can we control there coding or placement.
Site Design ©  2004 Colors by Trixie All rights reserved
Please report any web problems by clicking here