View Full Version : Making a menu sing graphically
brianj
09-07-2007, 03:42 AM
Drop-down menus can be customized to fit your needs perfectly. You can go way beyond what the default look and feel of a drop-down menu like udm4.
Here is an example of a nicely done customization:
www.botanicgardens.org
If you have any questions on how to customize your menu to fit your existing branding or maybe you want some plain ol' good graphic design advise... post it here... I've been doing graphic design professionally for over 12 years, I started with Photoshop 2 and I'll be moderating this section!
am0463
09-07-2007, 03:50 AM
Well I currently am just trying to get the hang of photoshop, which I'm having troubles doing, and was wondering if you had any especially good tutorials I could try.
brianj
09-07-2007, 03:57 AM
I don't know of any tutorials off the top of my head. Why don't you ask me some specific questions and I'd be happy to help out.
kebtek
09-08-2007, 04:17 PM
Being a graphics noob, I'm often just struggling with the terminology. Bevel, shadows, something called belzier or something like that. Maybe just an overview of terminology would be good for people like me.
For example, I see lots of sites that use a "button" type of look and feel, but have no idea how to make decent buttons. Could that be done? And can you make a drop down menu as buttons?
am0463
09-09-2007, 06:04 AM
I'll ask you a few questions next week, my computer crashed about 2 weeks ago, so I lost my photoshop program. That and my computer's c drive apparently has no room so I have to delete music and pictures. Anyways I'll get back to you soon.
brianj
09-10-2007, 05:07 PM
Give this link a shot: http://www.graphicdesigndictionary.com It's not just for Photoshop, but it's looks to be pretty thorough.
What version of Photoshop are you using? I can give you some hints on creating a nice button.
And yes, you can do graphics for the drop-down menu buttons. But first, let me know what Photoshop version you are using and we'll go from there!
am0463
09-15-2007, 05:00 AM
I will be using photoshop cs3, is that the version you are looking for or does it get more specific than that?
brianj
09-15-2007, 02:01 PM
am0463, cs3 is perfect... I think I have a good idea. Find a button on the web you want to create... any button and I'll tell you how to make it... step by step. Just get me the URL.
kebtek
09-15-2007, 07:31 PM
I can't seem to find an example online of what I'm looking for, but I've always wondered how to make a "bubble" looking button. I'll see if I can show you what I mean.
brianj
09-17-2007, 08:28 PM
How about the 'Post Reply' button in this forum?? That is kindof 'bubble' like ;)
kebtek
10-01-2007, 09:02 PM
Yeah, that post reply button might be a good start. Can you post something on how to make a button like that?
kebtek
10-23-2007, 01:46 AM
Hey, just wondering if anyones going to reply? Also, I've got a student copy of photoshop, does that make a difference if I use that or if I use a "real" version?
Anyway, a good tutorial would be helpful. Thanks.
brianj
10-24-2007, 05:29 PM
Sorry for the delay. I jumped the gun on that button :) It's pretty advanced and probably not a good example to start with. I will find another example and put a tutorial together for that this week!
brianj
11-07-2007, 02:36 AM
Sorry this took so long...
Create a new document in Photoshop. Add a new layer and using your Shape tool(Rounded Rectangle Tool) create a shape like this... The edges are set at 16 px to create the rounded sides.
http://www.540interactive.com/step01.gif
Add a new layer and create a rectangle in the same color and overlap the bottom of the shape above.
Next click on the first layer and then shift-click the second shape layer. Both layers should be highlighted blue. Now right-click and select Merge Layers. Now you've got a nice button shape.
http://www.540interactive.com/step02a.gif
Now you need to apply the bubble look by using a Layer Style. Double click on the button layer in your layers window. The layer style box will pop-up. Click on Bevel and Emboss. I adjusted the depth, size and soften until I got the bubble look I preferred.
http://www.540interactive.com/menu.gif
Now create a text layer and add your text. Double click on the layer in the layers window again and apply the Stroke style. I used 50% opacity and a 1 px stroke. I then used the same Stroke style on the button to give the button a nice finished look.
http://www.540interactive.com/step10.gif
Voila!! A simple to do button that looks professional.
vBulletin® v3.0.1, Copyright ©2000-2024, Jelsoft Enterprises Ltd.