How to Create a Sleek Wii Controller

Posted in 3D Effects, Tutorials4 years ago • Written by 34 Comments

Today we will be creating one of the most beautiful and evolutionary product. The Wii is a video game system made by Nintendo that has a unique interface that forces players to get physically involved in the game playing action. For creating a Wii Controller in Photoshop, you just need to know the basics of Photoshop to get a great result.

Step 1 – Background

Let’s start by creating a new document of 30 by 50 inch.

Then create a layer, fill it (with any color) and add this Gradient Overlay in the blending Options.

Step 2 – The Wii Shape

Create new layer, select the Rounded rectangle Tool (U). After then,  set radius to 22px and create the Wii shape.

I have used following blending options which you can see to get exact result.

Step 3 – Glow

For a little bit glow, create a new layer and then draw a straight white line like I did.

Select the new layer, now hold down CTRL and click on the Wii Body layer thumbnail OR select the Wii layer and go to Select, Load Selection and hit okay.

Now select white then go to the Brush Tool (B) and select the Hard Round brush. Change the Master diameter to about 600 px and click one time like I did to create an inner glow effect.

Now deselect your selection by holding down Ctrl + D. Go to the layer and set the Opacity to about 50% then select your eraser (E) set its Opacity a little bit down like you want and erase a little bit of your glow like I did.

Step 3 – Speakers

Create a new layer. Set your color to the color code: #3a3a3a and create something like this using your brush tool.  (in the picture you can see the sizes of pixels i used to create the circles).

Now duplicate the layer (Ctrl + J) then set these blending options for the duplicated layer.

And now create the duplicated layer below the other layer. so it will be like this…

Step 4 – Player LEDs

Your speaker is done. Now let’s begin with the LEDs. So create a new layer and at the bottom of the Wii create 1 square using the color (858585#) and duplicate it twice.

To give a glow, create a new layer, create a square and add this blending options for it.

This is what you will get.

Now create a new layer and set the brush tool to 3px

For the first square set 1 circle, for the second set 2 circles, for the third  set 3 circles and for the fourth set 4

For this you need to select the same color of the Wii Body. Now because you can’t see what you are doing because it’s the same color of the Wii, select the Color Overlay in its Blending Options to see what you are doing. After you finish Deselect the Color Overlay and add this Bevel Emboss.

Below is the screen shot of blending options.

Step 5 – Power button

For the power button create a new layer and create a small circle like i did using your preferred tool. (the color doesn’t matter)

and add following Blending Options for it

Now you should have something like this…

Now to create the POWER symbol create a new layer, select a gray color , create a small circle and fill it like below

then create a smaller  rounded selection

and delete it.

Create a selection of a vertical rectangular

and delete it

now create a smaller vertical selection and fill it

if you did it good, you should have something similar like this.

then set these blending Options.

Now select the Text Tool (T) and write POWER using the font: Kartika (the color i used for the font is 8a8888#)

Step 6 – Logo

Let’s go down again to write the Wii logo.  The logo is just a text, so write “Wii” using your text tool with the color #989898 and using the Font: Sony Sketch EFF.

Step 7 – Home button

create a new layer and create a circle similar like this above the speaker

then add these blending Options.

Now duplicate this layer and set  this Blending Options for the duplicated layer WITHOUT deselecting the other settings.

then set the duplicated layer behind the original layer.

Now create a selection around on one of the 2 layers, create a new layer, select “white” and brush like we did in the previous step.  (STEP #3

Now create a new layer and create a small house  and fill it with the color #31befa

Write below the button, the word “HOME” using the font: Kartika OR Simplified Arabic with the color 878686#.

Step 8 – Minus (-) Button

And add these blending options for it.

then as we did in the previous step. you can do it to create a glow effect.

Then create a new layer and create a small horizontal rectangle line with a gray color

Step 9 – Plus (+) Button

create a new layer, and create a circle like this, but this time at the right side of the HOME button and do the same settings as we did in the previous step. but now create a “Plus at the end.

Step 10 – the A button

Now create a new layer above the home button and create a bigger circle and fill it.

then add these blending options.

Now you should have something like this.

Then create a new layer and create a glow effect like i did below

now create a new layer create just a little bit smaller selection than the button, fill it with white and erase some parts like i did

Now write a Capital Letter “A” with  Grey color. For the font use: Simplified Arabic.

Step 11 – the 1 and 2 buttons

Now create a new layer, create a circle and fill it with gray.

then duplicate it and move the duplicated a little bit add the right (The selection is created just to show you what i mean)

After that, add these blending options.

And create a glow effect for it.

then write number “2″ on it. i used the font Kartika.

now duplicate this layers and write “1″ in place of “2″.

you can move the gray circle layer of the other layer a little bit to make it looks different.

Step 12 – The Control Pad

To create the control pad shape select the rounded rectangle tool set it to 2px. Create new layer and follow the picture steps…

create a vertical one…

then a horizontal one.

then add this blending option.

Now if you want, you can create a new layer and brush a little bit on it for a cool glow.

Then create a new layer again to create the 4 lines like this.

Step 13 – Optional

To make this Wii controller like a real one, you can go back to the Power symbol and change the gray color to red.

so let’s go to the Power symbol layer, and change this blending options

Now to get some shadows and some glow, create a new layer and brush with a dark gray color over here.

Step 14 – Reflection

Now for the final step, let’s select all the other layers except the background and holding down “ctrl” or “shift” and selecting them. Then right click on one of them and select “merge layers.  Then duplicate the layer (Ctrl + J) and go to Edit, Transform, Flip Vertical, set it below the other layer. and bring the opacity a little bit down.

and this is the end.

Let me know if you have some questions and I will answer you in comments section.

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

22 Written Articles

34 Comments Best Comments First
  • Marcell Purham

    Sunday, May 2nd, 2010 08:03

    1

    Great tutorial! Loved the outcome

    0
  • Emily

    Monday, May 9th, 2011 16:13

    12

    My son loves the Wii. I think I’ll give this tutorial a shot, and send him a birthday card with his name on the remote…

    0
  • Gemma

    Saturday, May 7th, 2011 16:28

    11

    I actually thought the first image was a photograph of the controller. It’s amazing what you can achieve with Photoshop! Nice work!

    0
  • Valerie

    Tuesday, May 10th, 2011 20:16

    13

    I can’t believe how much detail goes into making the remote, since it seems like a simple image. Makes you really appreciate entire animated scenes.

    0
  • Angel Simon

    Wednesday, May 11th, 2011 05:36

    14

    I have tried the process right now and I got overwhelming result because it is just my first time to do it. Following the steps is so simple. I thing the one who just made this tutorial is a great teacher.

    0
  • Yasmin

    Wednesday, May 11th, 2011 17:21

    16

    That totally looks 3D! So cool, I gotta try it…

    0
  • Morris B.

    Wednesday, May 11th, 2011 13:24

    15

    I love the glow effect… it will be very handy in the future.

    0
  • Gary

    Thursday, May 5th, 2011 23:19

    10

    That’s a remarkable likeness! It’s a lot of work, but worth it!

    0
  • Warren Kimmel

    Tuesday, May 3rd, 2011 17:04

    9

    Thanks for all the detail… I learned a lot of new techniques that I think are invaluable!

    0
  • Cosmin Negoita

    Sunday, May 2nd, 2010 09:36

    3

    This is a nice and well explained tutorial. Cheers!

    0
  • Daniel C

    Sunday, May 2nd, 2010 07:40

    2

    The result is amazing – few can reproduce details so fine, while using photoshop practices that are so sound. Whether I can think of a practical use for a Wii remote or not, it remains an extremely comprehensive effort! Well done.

    0
  • Jared

    Sunday, May 2nd, 2010 21:12

    4

    A while ago I did a version of the Wiimote in Illustrator ( here: http://www.flickr.com/photos/jaredaucourant/4479847291/in/set-72157623743986228/ ) using only gradient meshes… The font by the way is Avenir-

    Cheers

    0
  • wpBlast

    Tuesday, May 4th, 2010 05:01

    5

    Wow, the remote looks so realistic it’s insane!

    Great job with the tutorial

    0
  • Gina Cittone

    Monday, May 2nd, 2011 23:32

    8

    I just installed Photoshop and I’m looking forward to learning how to use it, and this will be a fun way to practice!

    0
  • Peg Rhodes

    Thursday, April 21st, 2011 22:02

    7

    Very nice tutorial, extremely easy to follow and well put together.
    Thank you

    0
  • Carl

    Tuesday, October 26th, 2010 11:16

    6

    Perfect step-by-step guide, I was looking for it, for a long time. Thanks a lot, I’m going to test it right now.

    0
  • Ian

    Thursday, May 12th, 2011 16:18

    17

    This Wii remote looks amazing. Also really easy to follow instructions, which is nice. Keep the tutorials coming!

    0
  • John Austin

    Thursday, May 12th, 2011 22:34

    18

    Thanks so much for going into so much detail. Really awesome job with very clear instructions. I need to design something similar for a presentation I’m working on and I couldn’t have come across this at a better time.

    Thanks again

    0
  • Steve F

    Wednesday, June 29th, 2011 21:31

    29

    Great tutorial. I don’t use Photoshop, but the techniques you’ve described here I can use on GIMP and, to a (much) lesser extent, on Paint.net. It turned out great, but you could have then added in some customization on the case, and really made it cool! Maybe a set of shark’s teeth, like on a P-40 fighter plane or something. The one you made looks just like the Wii controller in my playroom!

    Thanks, again,
    Steve

    0
  • Chris Garden

    Wednesday, June 15th, 2011 15:47

    28

    I thoroughly enjoyed reading this post, it was beautifully written, clearly illustrated, and informative enough to follow by even a moderately experienced Photoshopper (like me!). Thank you very much for sharing this post with us.

    0
  • Viper

    Wednesday, July 6th, 2011 20:52

    30

    This is an easy to follow, well explained tutorial. Thanks a lot.

    0
  • Garry

    Wednesday, July 6th, 2011 21:36

    31

    I am very amazed at the quality of your work. I will be sure to visit your website again as it is a great resource.

    0
  • Andrea

    Friday, January 27th, 2012 00:08

    34

    Amazing work, didn’t even imagine it could be so easy

    0
  • Norwalk

    Wednesday, September 14th, 2011 09:52

    33

    I’m looking to find this out as well! It seems like this is a great topic to discuss and I’m looking to see what comes from future research. Great tool.

    0
  • Chase

    Sunday, July 10th, 2011 16:58

    32

    I really thought the end result was a photograph. Very impressive! Thanks for sharing your skills…

    0
  • Susan

    Sunday, June 5th, 2011 14:55

    27

    I just love that glow effect, excellent tutorial and very informative. Thanks for sharing this. One of the better Photoshop guides I’ve found online.

    Susan

    0
  • Giorgio

    Friday, June 3rd, 2011 18:29

    26

    Thank you for this tutorial. I just started working with Photoshop and you helped me learn something about a few functions that I will definitely need. Will subscribe to RSS and explore the site for more.

    Thanks again!

    0
  • haska

    Saturday, May 14th, 2011 20:05

    19

    absolute rubbish – “create the wii shape” ?! ..how about giving the dimensions?!

    what a waste of time..

    0
    • Rean John Uehara

      Saturday, May 14th, 2011 22:00

      20

      Well, if you will follow the whole tutorial I’m pretty sure you’ll get the proper shape since it’s on the images. Giving dimensions is useless because you’ll get the “wii shape” by following the instruction. :)

      0
  • Yasmin

    Wednesday, May 18th, 2011 05:00

    21

    That was fun! Took me a while, but it turned out great. Now, how about adding a companion tutorial for the wii system?

    0
  • Jack P.

    Saturday, May 21st, 2011 20:42

    22

    I learned some great tricks here, like shadows and glow. Awesome tutorial!

    0
  • Mark

    Tuesday, May 31st, 2011 16:06

    25

    thanks for the article.. it was an interesting read.. it is quite an art form.. beautiful

    0
  • Quinn

    Tuesday, May 31st, 2011 06:02

    24

    Usually I search YouTube for Photoshop tutorials but this was actually much easier to go through at my own pace. I’ll check here from now on!

    0
  • Zane

    Thursday, May 26th, 2011 16:40

    23

    The screenshots with the steps indicated in red were very helpful. I’m a visual learner, so as a tutorial, it’s much easier to understand the concepts when seeing them rather than just descriptions.

    0
  • Andrea

    Friday, January 27th, 2012 00:08

    34

    Amazing work, didn’t even imagine it could be so easy

    0
  • Norwalk

    Wednesday, September 14th, 2011 09:52

    33

    I’m looking to find this out as well! It seems like this is a great topic to discuss and I’m looking to see what comes from future research. Great tool.

    0
  • Chase

    Sunday, July 10th, 2011 16:58

    32

    I really thought the end result was a photograph. Very impressive! Thanks for sharing your skills…

    0
  • Garry

    Wednesday, July 6th, 2011 21:36

    31

    I am very amazed at the quality of your work. I will be sure to visit your website again as it is a great resource.

    0
  • Viper

    Wednesday, July 6th, 2011 20:52

    30

    This is an easy to follow, well explained tutorial. Thanks a lot.

    0
  • Steve F

    Wednesday, June 29th, 2011 21:31

    29

    Great tutorial. I don’t use Photoshop, but the techniques you’ve described here I can use on GIMP and, to a (much) lesser extent, on Paint.net. It turned out great, but you could have then added in some customization on the case, and really made it cool! Maybe a set of shark’s teeth, like on a P-40 fighter plane or something. The one you made looks just like the Wii controller in my playroom!

    Thanks, again,
    Steve

    0
  • Chris Garden

    Wednesday, June 15th, 2011 15:47

    28

    I thoroughly enjoyed reading this post, it was beautifully written, clearly illustrated, and informative enough to follow by even a moderately experienced Photoshopper (like me!). Thank you very much for sharing this post with us.

    0
  • Susan

    Sunday, June 5th, 2011 14:55

    27

    I just love that glow effect, excellent tutorial and very informative. Thanks for sharing this. One of the better Photoshop guides I’ve found online.

    Susan

    0
  • Giorgio

    Friday, June 3rd, 2011 18:29

    26

    Thank you for this tutorial. I just started working with Photoshop and you helped me learn something about a few functions that I will definitely need. Will subscribe to RSS and explore the site for more.

    Thanks again!

    0
  • Mark

    Tuesday, May 31st, 2011 16:06

    25

    thanks for the article.. it was an interesting read.. it is quite an art form.. beautiful

    0
  • Quinn

    Tuesday, May 31st, 2011 06:02

    24

    Usually I search YouTube for Photoshop tutorials but this was actually much easier to go through at my own pace. I’ll check here from now on!

    0
  • Zane

    Thursday, May 26th, 2011 16:40

    23

    The screenshots with the steps indicated in red were very helpful. I’m a visual learner, so as a tutorial, it’s much easier to understand the concepts when seeing them rather than just descriptions.

    0
  • Jack P.

    Saturday, May 21st, 2011 20:42

    22

    I learned some great tricks here, like shadows and glow. Awesome tutorial!

    0
  • Yasmin

    Wednesday, May 18th, 2011 05:00

    21

    That was fun! Took me a while, but it turned out great. Now, how about adding a companion tutorial for the wii system?

    0
  • haska

    Saturday, May 14th, 2011 20:05

    19

    absolute rubbish – “create the wii shape” ?! ..how about giving the dimensions?!

    what a waste of time..

    0
    • Rean John Uehara

      Saturday, May 14th, 2011 22:00

      20

      Well, if you will follow the whole tutorial I’m pretty sure you’ll get the proper shape since it’s on the images. Giving dimensions is useless because you’ll get the “wii shape” by following the instruction. :)

      0
  • John Austin

    Thursday, May 12th, 2011 22:34

    18

    Thanks so much for going into so much detail. Really awesome job with very clear instructions. I need to design something similar for a presentation I’m working on and I couldn’t have come across this at a better time.

    Thanks again

    0
  • Ian

    Thursday, May 12th, 2011 16:18

    17

    This Wii remote looks amazing. Also really easy to follow instructions, which is nice. Keep the tutorials coming!

    0
  • Yasmin

    Wednesday, May 11th, 2011 17:21

    16

    That totally looks 3D! So cool, I gotta try it…

    0
  • Morris B.

    Wednesday, May 11th, 2011 13:24

    15

    I love the glow effect… it will be very handy in the future.

    0
  • Angel Simon

    Wednesday, May 11th, 2011 05:36

    14

    I have tried the process right now and I got overwhelming result because it is just my first time to do it. Following the steps is so simple. I thing the one who just made this tutorial is a great teacher.

    0
  • Valerie

    Tuesday, May 10th, 2011 20:16

    13

    I can’t believe how much detail goes into making the remote, since it seems like a simple image. Makes you really appreciate entire animated scenes.

    0
  • Emily

    Monday, May 9th, 2011 16:13

    12

    My son loves the Wii. I think I’ll give this tutorial a shot, and send him a birthday card with his name on the remote…

    0
  • Gemma

    Saturday, May 7th, 2011 16:28

    11

    I actually thought the first image was a photograph of the controller. It’s amazing what you can achieve with Photoshop! Nice work!

    0
  • Gary

    Thursday, May 5th, 2011 23:19

    10

    That’s a remarkable likeness! It’s a lot of work, but worth it!

    0
  • Warren Kimmel

    Tuesday, May 3rd, 2011 17:04

    9

    Thanks for all the detail… I learned a lot of new techniques that I think are invaluable!

    0
  • Gina Cittone

    Monday, May 2nd, 2011 23:32

    8

    I just installed Photoshop and I’m looking forward to learning how to use it, and this will be a fun way to practice!

    0
  • Peg Rhodes

    Thursday, April 21st, 2011 22:02

    7

    Very nice tutorial, extremely easy to follow and well put together.
    Thank you

    0
  • Carl

    Tuesday, October 26th, 2010 11:16

    6

    Perfect step-by-step guide, I was looking for it, for a long time. Thanks a lot, I’m going to test it right now.

    0
  • wpBlast

    Tuesday, May 4th, 2010 05:01

    5

    Wow, the remote looks so realistic it’s insane!

    Great job with the tutorial

    0
  • Jared

    Sunday, May 2nd, 2010 21:12

    4

    A while ago I did a version of the Wiimote in Illustrator ( here: http://www.flickr.com/photos/jaredaucourant/4479847291/in/set-72157623743986228/ ) using only gradient meshes… The font by the way is Avenir-

    Cheers

    0
  • Cosmin Negoita

    Sunday, May 2nd, 2010 09:36

    3

    This is a nice and well explained tutorial. Cheers!

    0
  • Daniel C

    Sunday, May 2nd, 2010 07:40

    2

    The result is amazing – few can reproduce details so fine, while using photoshop practices that are so sound. Whether I can think of a practical use for a Wii remote or not, it remains an extremely comprehensive effort! Well done.

    0
  • Marcell Purham

    Sunday, May 2nd, 2010 08:03

    1

    Great tutorial! Loved the outcome

    0

Comments are closed.

54.81.129.89 - unknown - unknown - US