Tutorials

Create the New Nintendo Wii U Controller in Photoshop

advertisement

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.

Tutorial Details

  • Program: Adobe Photoshop
  • Version: CS5
  • Difficulty: Intermediate
  • Estimated Completion Time: 1.5-2 hours

Final Result

ninwii-final

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.

ninwii-39

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.

  • samantha resser

    Well presented. thank you Alan.

    • charlot tismo

      I agree with you.

  • margo clarkson

    Thanks for your tutorial but I don’t feel trying it for now.

    • kate alejandre

      Why?may be because you don’t know how to do it?Try to ask help from the author of this article,surely he will help you.

  • linda cadiz

    good tutorial sir.

    • chris davison

      True

  • ethan reyes

    If I will put a background,I think I will use a glossy color to be more attractive and a template like smiley.

    • karl wenfield

      nice suggestion

  • dianara fernandez

    I enjoyed your tutorial.

  • james cruz

    nice tutorial sir. can you make a tutorial using 3d features in photoshop?

    • marguerette conrad

      I’m excited to see if you try 3D features in Photoshop,.

  • lilly tan

    you’re good in giving the details on how it goes. i will try this later

  • chiu shin

    Good tutorial but we need more professional touch

  • matt lanchman

    Detailed. thanks for this.

  • joshua apolinar

    Not bad,try to use other BG color.

    • Alan Klim

      The tutorial is concentrated on the controller itself., that’s why I left the background black. :)
      It’s up to you to make it look better. I’m just giving you the main idea, some tips and the basic design.

      • margo clarkson

        ohh I get it.Good job

  • http://www.babaweb.fr/ Babaweb

    Thanks ! Great tutorial, hard work…

  • http://fotology.dk/tryksager/ Tryksager

    Great and easy to follow tutorial. Thumbs up mate.

  • Marco Le

    i am struglling with step 9.anybody help me?i dont understand “draw 2 cirlce for eyes”?