Step three:
  • We will start from the bottom then work our way up, the first element found at the bottom of the controller is the name.
  • Create a new layer.
  • Select rounded rectangle tool, set the radius to 20 px then draw a wide #FFFFFF rectangle.
  • Add a stroke layer style and set the blending mode to Darken.
  • The font used in this tutorial is Century Gothic, Bold, Sharp and #73767B.



    Stroke
    Structure Size: 2
    Position: Outside
    Blend Mode: Normal
    Opacity: 100
    Fill Type: Color Color: #73767B


    Step four:
  • Next to the name are little buttons labelled with small numbers.
  • Create a new layer.
  • With the round rectangle tool and radius of 1 px, draw a small #4D4E53 button. Were going to light up the first button so add a gradient overlay, stroke and color layer-styles:
    Color
    Structure Blend Mode: Hard Light
    Color: #70B8F3
    Opacity: 100

    Gradient Overlay
    Gradient Blend Mode: Normal
    Opacity: 38
    Gradient: Default
    Reverse: Check
    Style: Radial
    Align with Layer: Check
    Angle: 62
    Scale: 125

    Stroke
    Structure Size: 1
    Position: Outside
    Blend Mode: Normal
    Opacity: 81
    Fill Type: Color Color: #FFFFFF
    Step five:
  • Duplicate the button three times but delete the color layer-style and set them up evenly on the case.
  • Add the numbers with this color #737374.