Newest Tutorials    Most Popular Tutorials    Design a Tutorial    Contact    Bookstore



RECOMMENDED LINKS
Good-Tutorials.com
WebMonkey.com
PHP.net
FastClick Ad Network
PhotoshopTechniques.com
Daily Cooking Recipes

Photoshop Tutorials » View Tutorial
Category
Level
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
Level:Intermediate
Description:Create a new-style menu with mouseovers the easy way.
Views:36,064
Date:12/14/2004


| 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 |




Comments
No comments yet.


Click Here to see the MOST POPULAR tutorials!


Add a Comment

You must have javascript enabled to use this form

Name
(30 characters max)
Your Comment
(200 characters max)
Verification Code: 20374

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