Developing Webs logo
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions Tools to help you create your site Free and shareware fonts to download Photographs to use in your projects Shop for your site needs Free Online classes REcommend this site to others Log in or edit your information when logged in Developingwebs Log Out Change My Account details and preferences
RSS Newsfeed
for your site
DW News
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Remember to book mark this site!

Request a Tutorial

Creating Buttons



1. Open a new image by clicking


2. Set the file size to the dimension of the button you wish to create. In this case I selected width = 125 pixels and height = 50 pixels.

3. Click the layer menu and select



4. Select the marquee tool as ELIPSE and draw an oaval marquee on layer1. Fill this with the color button you want. In this tutorial we used orange.

5. Double click LAYER 1. This will bring up your LAYER STYLES window. Check and highlight BEVEL and EMBOSS. Set the style to INNER BEVEL. Set the technique to smooth.  To make the button look raised, select direction UP.

Set the other values as in the diagram below. Make the highlight color a light shade of the color of the oval. The shadow color should be a dark shade of the oval

6. Add a lens flare to the lightest part of the oval but clicking



7. Your button should now look like the button on the right. It is time to add text layers, one layer for each menu item.

8. Type in the work HOME in your favorite font and size, in a deep orange (contrasting color).

9. Double click the text layer to bring op the layer style panel.

10. Select bevel and emboss. This time we will use a pillow style, make the direction DOWN so it will look burned into the button. Select the shading to be opposite the global setting, you will need to uncheck global. Select the following setting:

11. The end result for button number one is here. Save it.

When you want another button, you hide the current text layer and add your new text to a new layer and repeat 9-11 above.


"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2020 All Rights Reserved
Privacy and Legal