Learn How To Create A Nintendo WiiU From Scratch In Photoshop

Part #2: Learn How To Create A Nintendo WiiU From Scratch In Photoshop

What We’ll Be Creating

Learn To Create A WiiU In Photoshop

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.

Learn To Create A WiiU In Photoshop

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.

Learn To Create A WiiU In Photoshop

Add the following layer styles to the newly formed shape.

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

You should have something like this.

Learn To Create A WiiU In Photoshop

Next, create the shape again only this time make the shape slightly smaller.

Learn To Create A WiiU In Photoshop

To the smaller shape add the following layer styles.

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

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.

Learn To Create A WiiU In Photoshop

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.

Learn To Create A WiiU In Photoshop

To each of the buttons add the following layer styles.

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

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.

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

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.

Learn To Create A WiiU In Photoshop

To each of the speaker rectangles add the following layer styles.

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

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.

Learn To Create A WiiU In Photoshop

To the MIC circle add the following layer styles.

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

To the LED circle add the following layer styles.

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

To the power button add the following layer styles.

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

You should now have something like this.

Learn To Create A WiiU In Photoshop

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.

Learn To Create A WiiU In Photoshop

Once the 3 circles have been created add the following layer styles.

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

Learn To Create A WiiU In Photoshop

Finally the buttons should look like this.

Learn To Create A WiiU In Photoshop

Finish off the button area with the button labels and icons.

Learn To Create A WiiU In Photoshop

Conclusion

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.

Learn To Create A WiiU In Photoshop

Purchase Psd Now

About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

10 comments
Rob says

Great Tutorial! very easy to understand(just the way we like it)

Reply
Max says

Very Nice Tutorial!

Reply
selec says

Great tutorial! thank you!

Reply
John says

Amazing Tutorial Richard. Now i see that all these types of designs require a good understand of using layer styles. I believe its about the colors. how to use them. I mean if you know how to do a certain effect. then you can pretty much create anything. I

Reply
geri dönüşümlü bez çanta says

Thanks have a perfect expression

Reply
PS-Tasarım says

Great tutorial, thanks really.

Reply
Nick says

Great tut again.! kudos.

Reply
Dhruv says

Thanks a lot. Fantastic tutorial. Well explained.
Thanks again.

Reply
Jennifer says

In advance sorry for the mistakes I might make as English is not my mother language.
Thanks a lot for this tutorial !
This is a great job you did.
I re-did the whole tutorial and really appreciated the really accurate work-trough.
Though I just wanted to tell you that you worked from the pictures of the prototype given to the press. On the final product :
-the start and select buttons are right under the XYBA button
– there is a CONTROL button between the POWER button and battery light
– the mic is on the left of the HOME Button
– there is a NFC touchpoint under the control point.
Once again thanks a lot for sharing that tutorial with us :)
Thanks from France

Reply
Jennifer says

And this is the result of your tutorial + the modifications I made
http://img23.imageshack.us/img23/6865/finalyv.jpg

Reply
Add Your Reply

Popular posts

css.php