For a game that I am developing, I am trying to include a non-intrusive overlay to help the player understand what keys to use as they progress through the game. I'm looking to design something like this: this. How is the Wii controller outline created like that?

Edit: More specifically, how would make an outline look like the outline of the controller using some sort of tool like photoshop?

  • 1
    You use opacity. How to do this specifically would require an understanding of how you're building the app and what software you are using, As it is now, this question is simply too broad.
    – DA01
    Commented Aug 26, 2015 at 3:31
  • I'm looking for the general way to approach this. For example, "you would use a combination of technique X with technique Y etc". Also, it's an overlay so I'll design it in a vector graphics application of some sort as opposed to via code. It doesn't need to be generated dynamically.
    – 02fentym
    Commented Aug 26, 2015 at 3:34
  • "Generally", it's using opacity. It's an object (in this case using white) laid on top of another object and the opacity is then set to something less than 100% (in this case, it looks maybe 60% or so).
    – DA01
    Commented Aug 26, 2015 at 3:42
  • I tried that, but it looks like there's some sort of effect on the outline that makes like the outline gradually fades almost like a gradient of sorts. Sorry, it's hard for me to describe. Make sense or am I seeing things?
    – 02fentym
    Commented Aug 26, 2015 at 3:45
  • Yes, they are also using gradients, drop shadows, and glow effects.
    – DA01
    Commented Aug 26, 2015 at 3:47

1 Answer 1


If you're asking what kinds of techniques were used for that specific image, it could include:

  • outer glows (the white glow around some elements)
  • inner glows (the glow inside the controller)
  • drop shadows (the shadows beneath the text)
  • gradients (the arrows going from light to transparent)
  • opacity (the entire thing has an opacity less than 100% an individually elements are layered with various opacity settings)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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