Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

What's the best way to create something similar to the panel that the controller sits in:

Example image

This is for the web and using photoshop.

I think the gist of it is an inner glow on a low opacity background, what I'm struggling with is that the glow/stroke almost looks like a gradient and I'm not sure how to achieve this. Would it be a mask of some kind?

Does anyone know of any good tutorials for this kind of effect? I think I understand the bulk of it, but I'm struggling to achieve a similar level of polish.

share|improve this question
up vote 2 down vote accepted

Gradients can have a transparency too. Check out the layer style for gradient overlay (while making the layer itself 0% fill).

There are many tutorials (e.g. google for layer style, gradient, transparency, tutorial), but this specific style can all be done in layer styles with trying around just a bit.

Feel free to ask if you are stuck at a specific point.

Edit: enter image description here

This is one shape layer with:

  • inner glow
  • 1px stroke
  • gradient overlay
  • drop shadow
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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