Glowing menu
1) Create a new image 200×240 pixels with white background.
2) Fill the background with dark grey color #666666
3) Create a new layer, rename this layer as “element”, make a rectangle selection and fill it with any color. I have done a selection 140×20 pixels.
4) Right click the “element” layer and choose Blending Options, use these settings:
Drop Shadow:
Outer Glow:
Gradient overlay: use these colors #ffba00 —> #f3d481
Stroke: use this color: #f4f4f4
The result is:
5) Now add some text to the menu element. I have used Trebuchet MS bold 18 px:
6) Right click the text layer and choose Blending Options, use these settings:
Drop Shadow:
The result is:
7) Duplicate the element layer and text layer to make more menu elements.
The final result is:
8) I like the obtained result, but if you still want more glow, just change the Outer Glow to the element layers.
Just test with the Size property, I have changed the original 8px to 12px and this is the result:
Now you can start to design your website with this nice glowing menu.
Want more tutorials?
See more recent tutorials HERE !
10 Comments so far
This is my first project done completly and succesfuly as well with adobe photoshop.Thank for ur great work.
Thx Dude! Its a great guide!
Indeed it is a good tutorial. i am using photoshop since a long time. i learnt how to use these blending options more smartly to get the desired results!!! thanks…
veryyyyyyyyyyy niceeeeeeeeeeeeeeeeeeeee!
Thanks, this has realy helped
Cool tutor!I like this!
keep going. Cool one
Excellent tutorial i ever came across…
Great tutorial. I like how you have zero mistakes and everything is how it should be. You follow everything step by step and it comes out perfect. Wish more tutorials were like this.
I’d like to say that this is the first Photoshop tutorial, where I made it to the end of it! Well done!