I found the following question : Photoshop: how to create buttons that look "subtly pushed"? and I fell in love with the menu (Dashboard, contacts, deals, mail).

I tried to reproduce it but I can't. I'm a photoshop noob. I made a rectangle with gradient overlay, picked the colors from the picture itself. Then I made shape, tried inner shadows and white dropped shadow. Still, not as good as the original. The green ribbon has 1 pixel lines on the top and the bottom. I d'ont understand how their color has been chosen (or maybe it's just playing with layers and opacity). For the CONTACTS button that looks pushed, I tried inner shadow and also noise and a subtle light that seems to come from the bottom, still, not as good as the original.

I exactly need that kind of menu for a personnal app. Can anyone tell how to make it ?

enter image description here

Here is what I made so far (I 'duplicated' the DASHBOARD icon with the pen tool).

enter image description here

  • 1
    Could you edit to show a screenshot of your attempt at making the CONTACTS button. – Ryan Oct 29 '15 at 12:55
  • 1
    This doesn't look like anything special beyond a light, radial gradient behind the white icon and text, with the latter having a drop shadow. The 1-pixel lines on the top and bottom might be in the code and not part of the graphic. – paulmz Oct 29 '15 at 14:08
  • If anybody is interested in my .psd file that I made to obtain the "replica" I can post it. It is different than Yorik's. – Michel L Oct 31 '15 at 21:16

There is more to this than meets the eye. The pressed button is the easy part, but you need to create three states:

  • Normal
  • Hover
  • Selected

After that, you need to add some kind of script, say JavaScript to change those states. Also, the normal, hover, and selected states need to have different icons on them. I am not sure if you are creating a Web site from scratch with hard-coded HTML. But you may be better off using a content-management platform and pick a theme that suits your needs. I am partial to WordPress and highly recommend it, it has a huge theme library and even the "commercial" themes are around $100.

My two cents worth.

  • Thanks for the replay. I'm not creating a web site but an app. And I have one more state : disabled. I don't use the hover state since it is a touch screen. – Michel L Oct 30 '15 at 15:38
  • 1
    I stand corrected. It also shows the need for a more complete question to provide context. – user45605 Oct 30 '15 at 16:50
  • Thanks for the up vote on the answer but it did not really answer the question. I understand it on my comment above but not and the answer itself. As I complain about undue down votes, in fairness I should also point this out. – user45605 Oct 31 '15 at 13:33

I made a sample:

enter image description here

One base layer with a color.

Two type layers, both set with black type.

I then made a new layer, made a rectangular selection, filled it with RGB 128,128,128 and then still selected, I applied a render > lighting effect to it. I set it to overlay and moved it above the type type layer. I then duplicated this layer, INVERTED the color of one layer, and arranged it over the other type layer. One will be for the highlight, one will be for the "lowlight."

One type layer I applied a drop shadow at 90degrees and set the opacity low. I set the color overlay to white.

One type layer, I set an emboss with downward direction, 1% depth 1px size 0 soften, 90degree angle. I added an inner shadow, low opacity, and a color overlay that is the same color as the base color layer but slightly darker.

And bob's your uncle.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.