What We’ll Be Creating
Creating The D-Pad
Select the “Rounded Rectangle Tool” (U) with a radius of about 15 – 20 pixels. On the left side of the WiiU base underneath the left thumbstick drag out a vertical rectangle.
Whilst holding down the “Shift” key on the keyboard drag out another rectangle only this time make it horizontal. Holding down the shift key will automatically add the shape the vector mask.
Add the following layer styles to the newly formed shape.
You should have something like this.
Next, create the shape again only this time make the shape slightly smaller.
To the smaller shape add the following layer styles.
On each of the D-Pad buttons add a small rectangle in the middle using the “Rectangular Marquee Tool” (M). Fill (G) each of the rectangles using the color #9e9fa3, the finished D-Pad should look something similar to the image below.
Creating The X, Y, B, A Buttons
Select the “Ellipse Tool” (U) then create 4 circular buttons on the right side underneath the right thumbstick.
To each of the buttons add the following layer styles.
Inside each of the circles add the letters “X, Y, B, and A” using the “Type Tool” (T). Once you’ve added the letters add the following layer styles to each one of the letters.
Creating The Little Speakers
At the bottom of the WiiU there a few items we need to create, the first being the speakers. Simply select the “Rounded Rectangle Tool” (U) with a radius of about 50px. Create two small rectangles either side of the WiiU underneath the screen.
To each of the speaker rectangles add the following layer styles.
Creating The Power Button, LED and MIC
As all of the items noted in the title of this step all use the “Ellipse Tool” (U) we’ll be creating them all in one step. Create 3 circles next to the right speaker, two small ones the same size and one bigger circle.
To the MIC circle add the following layer styles.
To the LED circle add the following layer styles.
To the power button add the following layer styles.
You should now have something like this.
Creating The Main Buttons
Using the “Ellipse Tool” (U) create 3 circles to the left side of the MIC circle. Two of the circles should be the same size with a bigger one in the middle.
Once the 3 circles have been created add the following layer styles.
Finally the buttons should look like this.
Finish off the button area with the button labels and icons.
Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page.
Richard is a creative designer & blogger. He writes for Crayonify about Graphics, Creativity and UX Design. Richard loves to unlock his creativity with writing.