Solved

help creating a menu in photoshop

Posted on 2006-10-19
3
128 Views
Last Modified: 2010-04-03
Hi, Guys.

Does anyone know of any tutorials around that can help me create the green menu box on this webpage

http://www.zufanek.cz/o-spolecnosti.html

Think it looks great and would love to have a go at creating one.

Cheers guys
0
Comment
Question by:dthomas31uk
3 Comments
 
LVL 16

Accepted Solution

by:
BongSoo earned 400 total points
ID: 17765700
There are probably a myriad of ways to do this - I'll offer one:

Assuming you have created a new RGB image just a little larger than your actual image needs to be, and at 72 dpi..

1) Create the shape you want as a path. (make sure your paths pallete is showing by going to Windows > Paths. Click on the drop down menu and select New Path). Use the Pen tool to draw your path (I am assuming you know how to use Bezier curves, if not :http://amanda.dd.com.au/cgi-bin/advice/view.cgi?1046, http://www.hypergurl.com/beziercurve.html is a start. Google Bezier Curves Tutorials for more.).

2) Create a new layer(optional- you could use the bottom background layer, but I usually don't). Fill it with the background lighter tint. (Have the color in your foreground in the tools palette, select all, Edit > Fill > Foreground Color (there are key command shortcuts, but I am skipping those for now))

3) Create a new layer. Make sure it is selected, and then click on your path in the paths palette and on the drop down menu, select Make Selection and make sure New Selection is checked and Zero feathering  and click ok. Then choose Select > Modify > Contract and choose any where from at least 10-20 pixels. Then choose Select > Feather the same amount (you can play with this in both stages later). Choose Select > Inverse and then choose the darker color you want in the foreground palette, and then choose Edit > Fill > Foreground Color.

This will fill the whole outside with the darker color. Thats ok. The point is to check the feathered edge and make sure it is soft enough for what you want. If you need to, you can click on your path to show where it will be cut off once it is masked. Once you are happy with the results proceed, if not, Select All on that layer, delete, and go back and play with it until you get it right.

Once you are happy with that, there are two ways to go. I will explain the way I do it, as you can always go back and change things if you want.

4) Choose the darker color layer. Select your path, and Make Selection again as a new selection, no feathering. Go to Layer > Layer Mask > Reveal Selection. This will mask the area outside the dark color.

5) repeat this on the light color layer. If this is good to go, got to File > Save For Web and I usually choose JPEG and medium quality, but you can play with that as well to suit your tastes.

Hope that helps, let me know if you have any questions.

BongSoo
0
 
LVL 7

Assisted Solution

by:Animasu
Animasu earned 100 total points
ID: 17766736
http://www.pixel2life.com   many a tutorials on menus!
0
 

Author Comment

by:dthomas31uk
ID: 17801624
cheers for that guys it worked a treat :) :)
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
Introduction When sharing photos, especially via e-mail, the large resolution images that most cameras take today make for extremely large file sizes. The time required to upload these files to forums, send in e-mails, post to blogs or even placi…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question