Create the New Nintendo Wii U Controller in Photoshop

Nintendo Wii

In this article we’re going to create the Nintendo’s Wii U controller. It may look a bit complicated, but it’s definitely not.

 

Step 1

Create a new file in Photoshop.

ninwii-01

 

Step 2

Grab the Rounded Rectangle Tool (U) and set the radius to 150-160px. Draw a big shape like the one on the first image and fill it with #dee0df. Then apply the two following styles. Once you’re done, duplicate this shape, clear the existing styles, turn the Fill to 0% and add the Inner Shadow style shown on the third image. Rename those two layers to “Base” and “Base 1″.

ninwii-02

ninwii-021

ninwii-022

ninwii-023

 

Step 3

Create a new layer and place it before the two Base layers. Pick the Pen Tool (P) and draw the side buttons. Apply the following styles.

ninwii-03

ninwii-031

ninwii-032

 

Step 4

Group all the layers created so far and name the group “Base”. Now, create a new layer and pick the Ellipse Tool (U). Draw a relatively small circle and fill it with #dee0df. Then apply the following styles.

ninwii-04

ninwii-041

ninwii-042

 

Step 5

Duplicate this circle twice and turn the Fill of the copies to 0%. Replace the existing styles of the first copy with the one shown on the first image. Do the same with the second copy (second image). Finally, add a text layer and type “Y” (color: #959595, font: Arial/Helvetica, size: 4pt).

ninwii-05

ninwii-051

ninwii-052

 

Step 6

Group the “Y” button layers and name the group “Y”. Duplicate this group three times and place the copies accordingly to the image below. Remember to change the text layers.

ninwii-06

 

Step 7

Group all these “Y”, “X”, “A”, “B” groups and name this new group “XYAB”. Duplicate this group and keep only two of the sub-groups (eg. “Y” and “X”). Scale down the buttons and modify the text layers. Add some text under the buttons to decorate them. Rename the group to “+-”.

ninwii-07

 

Step 8

Create a new layer and grab the Rounded Rectangle Tool (U). Set the radius to 5px and draw two shapes like the ones on the first image (color: #dee0df). Then add this style.

ninwii-08

ninwii-081

 

Step 9

Draw two circles for the eyes. Merge the two shapes and apply the following styles.

ninwii-09

ninwii-091

ninwii-092

ninwii-093

 

Step 10

Duplicate once again the cross shape and turn the Fill of this new copy to 0%. Then add the style shown on the first image and decorate the cross with four small lines (color: #959595).

ninwii-10

ninwii-101

 

Step 11

Group the layers created in Steps 8-10 and name the group “Cross”. It’s time to create the two analogue sticks now. So, create a new layer, grab the Ellipse Tool (U) and draw a circle. Fill it with #dee0df and turn Fill to 0%. Then apply the following style.

ninwii-11

ninwii-111

 

Step 12

Duplicate this circle and clear the existing Bevel and Emboss style. Turn Fill to 100% and apply these styles.

ninwii-12

ninwii-121

ninwii-122

ninwii-123

 

Step 13

Duplicate this circle again and turn the Fill of the copy to 0%. Replace the existing styles with the following ones.

ninwii-13

ninwii-131

ninwii-132

 

Step 14

Duplicate once again the circle and apply this style (Fill: 0%).

ninwii-14

 

Step 15

Duplicate one last time this circle and add this Outer Glow style (Fill:0%).

ninwii-15

 

Step 16

Create a new layer and pick the Pen Tool (P). Draw a circle path and apply a Stroke Path (hard round brush, size: 2px, color: #dbdddc). Then add the following styles.

ninwii-16

ninwii-161

ninwii-162

 

Step 17

Create a new layer and using a soft round brush, add some highlight spots. Group all the layers created in Steps 11-17 and name the group “Right analogue stick”.

ninwii-17

 

Step 18

Duplicate the “Right analogue stick” group and place it on the other side of the device. Rename the group to “Left analogue stick”.

ninwii-18

 

Step 19

Now, we’re going to create the screen. Pick the Rectangle Tool (U) and draw a big rectangle like the one on the first image. Then, turn the Fill to 0% and apply the following style.

ninwii-19

ninwii-191

 

Step 20

Draw another rectangle (color: #ffffff). Make it a bit smaller and add the following styles.

 

ninwii-20

ninwii-201

ninwii-202

 

Step 21

Add your logo on a new layer. Group the layers created in Steps 19-21 and name the group “Screen”. Your design should by now look like this.

ninwii-21

 

Step 22

Draw a couple of circles (a black one and two white) to finish the eye (you can add some highlights if you want – pic 2).

ninwii-22

ninwii-221

ninwii-222

ninwii-223

 

Step 23

Create a new layer and pick the Ellipse Tool (U). Draw a small circle (color: #282828) and apply these styles.

ninwii-23

ninwii-231

ninwii-232

 

Step 24

Duplicate this circle and scale the copy down a little bit (img – red circle). Change its color to #84919a and replace the existing styles with this one.

ninwii-24

ninwii-241

 

Step 25

Duplicate this blue circle and once again, scale the copy just a little bit. Replace the existing Inner Shadow style with these ones.

ninwii-25

ninwii-251

ninwii-252

 

Step 26

Finally, add some highlights using a soft round brush. Group all the layers created in Steps 22-26 and name the group “Camera”.

ninwii-26

 

Step 27

Create a new layer and select the Pen Tool (P). Using the Stroke Path technique (color: #b7b7b7, brush size: 2px) decorate the space under the cross.

ninwii-27

 

Step 28

Create a new layer and pick the Rounded Rectangle Tool (U). Set the radius to 10px and draw a very small shape. Fill it with #000000 and apply the following styles.

ninwii-28

ninwii-281

ninwii-282

 

Step 29

Duplicate this shape and place the copy under the “Select” button. Finally, add your logo or use the original Wii U logo.

ninwii-29

 

Step 30

Using the same styles, draw a couple of small circles (color: #000000) and decorate them with some text.

ninwii-30

 

Step 31

Group these layers and name the group “Lower parts” or something. Then, create a new layer and draw a bigger circle. Fill it with a random color, turn the Fill to 0% and apply the following styles.

ninwii-31

ninwii-311

ninwii-312

ninwii-313

 

Step 32

Decorate this “Home” button with a house icon (you can find thousands of these in the internet or you can create your own combining a square with a triangle) and some text under the button.

ninwii-32

 

Step 33

Duplicate the circle created in Step 31 (keep the Fill at 0%) and replace its styles with these.

ninwii-33

ninwii-331

 

Step 34

Group the layers created in Steps 31-33 and name this group “Home”. Next, create a new layer and draw a small circle (Ellipse Tool – U). Fill it with #dee0df and apply this style.

ninwii-34

ninwii-341

 

Step 35

Duplicate this circle twice and turn the Fill of both of the copies to 0% (clear their existing styles). Then add the style shown on the first image to the first copy and the one on the second image to the second copy.

ninwii-35

ninwii-351

 

Step 36

Decorate the button with an I/O (power) icon (color: #d1200e) and some text.

ninwii-36

 

Step 37

Create a new layer and grab the Rounded Rectangle Tool (U) (radius – 6 px). Draw a small shape (as big as the circle in the power button). Fill it with #dee0df and repeat Steps 34-35.

ninwii-37

ninwii-371

 

Step 38

Decorate the button by adding some text; type “TV” (color: #079389, font: Arial/Helvetica, size: 3,5pt). Then add another text layer and type “Control” under the button.

ninwii-38

 

Step 39

Add some highlights if you want and your Nintendo Wii U controller is ready.

Nintendo Wii

 

Conclusion

That’s the end of this tutorial. Add a cool background or any effects you want to make the controller look even better. We hope you enjoyed the article.

 

Thanks to Alan Klim

Facebook Like

We are in social

Zizaza Twitter social profile

Blogspot zizaza free design ocean blog

Pinterest zizaza free design ocean profile

Facebook Zizaza - design ocean page

Deviantart Zizaza design ocean biggest free icon storage group

Zizaza design ocean home page