Newest Tutorials    Most Popular Tutorials    Design a Tutorial    Contact    Bookstore

FastClick Ad Network
Daily Cooking Recipes

Photoshop Tutorials » View Tutorial
Search (3 or more characters):

Featured Photoshop Tutorials:
Changing color: Hair, Eyes, Clothes
Author: kromefx | Category:Color | Level:Intermediate | 12/11/2004
Rounded Corners
Author: kromefx | Category:Basics | Level:Beginner | 11/24/2004

     Title:     MouseOver Menu Images
Author:kromefx | view all by kromefx
Category:Web Layouts
Description:Create a new-style menu with mouseovers the easy way.

| Page 1 | Page 2 |

Step 1
Create a new document, 25 pixels high is good. Make it as long as you think you'll need -- you can trim it down later.

Step 2
Make a new layer and fill with white. Then in the blending options set a gradient overlay light blue>white and a 1 pixel black inside stroke.

Step 3
Now add your text. Make sure there's plenty of space between each option. When you're done, trim up the border length-wise to fit the text and center the text vertically. I generally use Arial without any smoothing for the most professional look.

Step 4
Duplicate the background layer and edit the blending options. This time change the color of the gradient overlay but leave everything else the same. I chose a light yellow/orange color. This is the mouseover layer.

Step 5
Take out the slice tool and draw a box around EVERY OTHER menu item. This will slice out each menu item to a separate image later.

| Page 1 | Page 2 |

No comments yet.

Click Here to see the MOST POPULAR tutorials!

Add a Comment

You must have javascript enabled to use this form

(30 characters max)
Your Comment
(200 characters max)
Verification Code: 95841

Privacy Policy | Terms of Service | Disclaimer
Newest Tutorials | Most Popular Tutorials | Design a Tutorial | Contact