Digital Street - Photoshop tutorials

Photoshop tutorials


Glowing menu

Category: Web interfaces

1) Create a new image 200×240 pixels with white background.

2) Fill the background with dark grey color #666666

01.png

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.

02.png

4) Right click the “element” layer and choose Blending Options, use these settings:

Drop Shadow:

03.png

Outer Glow:

04.png

Gradient overlay: use these colors #ffba00 —> #f3d481

05.png

06.png

Stroke: use this color: #f4f4f4

07.png

The result is:

08.png

5) Now add some text to the menu element. I have used Trebuchet MS bold 18 px:

09.png

6) Right click the text layer and choose Blending Options, use these settings:

Drop Shadow:

10.png

The result is:

11.png

7) Duplicate the element layer and text layer to make more menu elements.
The final result is:

12.png

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:

13.png

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

  1. sefat June 15th, 2006 1:15 pm

    This is my first project done completly and succesfuly as well with adobe photoshop.Thank for ur great work.

  2. -MagnuM- June 15th, 2006 2:23 pm

    Thx Dude! Its a great guide! :)

  3. Abhijit June 21st, 2006 3:23 am

    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…

  4. esphan June 21st, 2006 6:29 am

    veryyyyyyyyyyy niceeeeeeeeeeeeeeeeeeeee!

  5. matt June 26th, 2006 1:22 pm

    Thanks, this has realy helped :P

  6. Lucasoff June 27th, 2006 9:14 am

    Cool tutor!I like this!

  7. web designer India June 27th, 2006 4:47 pm

    keep going. Cool one

  8. Raj July 11th, 2006 1:51 pm

    Excellent tutorial i ever came across…

  9. Nocturnal August 1st, 2006 7:25 pm

    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.

  10. Ingmar August 18th, 2006 4:25 pm

    I’d like to say that this is the first Photoshop tutorial, where I made it to the end of it! Well done!