HV-Designs.co.uk

April 13th, 2011 in Photoshop Tutorials by Aaron

Create a Nintendo DS in Photoshop

• Share

Today we are going to be using basic layer styling and some basic tools in Photoshop to create a gorgeous Nintendo DS Pt. 1. In this tutorial you will learn to create the top view of a DS from scratch, using nothing but basic tools and filters. Be sure to follow this tutorial and save your document as Pt II will walk you through the process of creating the opened DS style. Now, let’s get started.As always this is what we will be creating:

Let’s Get Started

Create a new document 600px by 350px and fill it with white. Now, change your foreground color to #9a0000 and grab your rounded rectangle tool. Set your radius to 15px and drag out a rectangle that is 530px (w) by 260px (h).

Now, open up the layer styles for our Shape and apply the following layer styles.

The Top Bar and Hinges

Sweet! It’s time to move on to creating our top bar. This gets a little intense so pay pretty close attention. The first thing that you want to do is to zoom in on your document to 189%. Now you will be able to make a selection that is 40px tall on your shape.

Right click and choose “Layer via Cut”. Now right click your layer you just created and choose “Clear Layer Styles”.

Alright, now make sure the layer we just created is on top and use your down arrow key and click on it eight times. This will move it down 8px and cover up the top part of our bevel for the main DS part.

Ok, now we can go back to “Actual Pixels” size and work on our top black bar. What you are going to want to do, to keep organized, is create a new group and name it Black Bar. Put your layer we were just working on in that group.

Now, grab your paint bucket fill tool and fill it with black. I know it looks like crap, but don’t worry about it. We will get it fixed in the next few steps.

Hide the layer you just filled and grab your rounded rectangle tool again. Keep the radius the same but drag out a rectangle that is 530px (w) by 30px (h).You will want to line it up with the edges and with the very top of the DS.

Now apply the following layer style. With the Gradient Overlay you will want to drag up the gradient a little bit to give it a better look.

Now unhide your black layer. It looks a little funny but we can take care of that right now. Make a selection like below and hit your delete key.

-insert key-

Great! We are ready to move on to creating the distinction between the buttons and the main part of the hinge. What you will need to do is grab your rectangle marquee tool and make a selection that is 425px by 45px, like below.

Create a new layer and fill your selection with #2c2c2c. Now, click the thumbnail of our rounded rectangle layer. This will create a selection of the rectangle, now right click and choose select inverse and hit the delete key.

Now, apply the following layer style.

Hinges

It is looking good, now we just have to add a few different things to spice it up. Grab your line tool and choose 3px for the weight and black for the color. Draw our a line that is 40px tall and line it up with your button/hinge seperation and the top of our hinge.

Now, grab your line tool again but change the weight to 2px. Drag out another line that is 40px tall and space it 5px from our other line. This will give the hinge effect.

Now, duplicate your layers, flip them horizantally, and move them to the right hand side of our DS. This will give our second hinge.

Now to add our bottom part to our main hinge area. Grab your rectangle marquee tool again and this time make a selection that goes from the end of our left button to the end of our right button and is as tall as the black space.

Create a new layer and fill it with #222222. Now, apply the following layer style:

Power Buttons

We are looking good so far. It’s time to add our power and charge buttons. Grab your line tool again, with 3px set as your width. For our first “Charge” button we are going to use #a20000. Drag out a line that is 30px tall and space it 35px from the end of our right side button. It should stop at the end of our button.

Now apply the following layer styles:

Duplicate your layer and move it over to the right 10px. Change the color to #58a831 and apply the following layer styles.

You should have this:

Now you’re top bar is finished! Its time to put the finishing touches on your DS top. Grab your rounded rectangle tool again and choose 10px for your radius. Use whatever you want as a fill color as we will take care of styling in the next step. Drag out a rectangle that is 70px by 45px.

Now, lower your fill to 0% and apply the following layer styles.

Duplicate your layer and move it down so it is 15px from the bottom of your first “rectangle”. Now center them both on your DS and you are all finished.

Lighting Effect

For the final touches we have to work on some lighting effects. Create a new layer above everything and make a selection that is 555px by 5px and fill it with white. It should be at the very bottom of your hinge.

Now go to filter–blur–gaussian blur and choose 7.5px for your radius. Be sure that your selection outline is not on the screen anymore of the blur won’t work right.

Now, delete all the white that mades its way onto the hinge so its only on your top layer and lower the opacity to 55%.

And now you are completely finished. If you want to add some gloss go ahead, but I always add gloss depending on what I am using the project in.

Conclusion

I hope you guys enjoyed this quick tutorial and I am looking forward to releasing Part II showing you some more ways to use the basic tools in Photoshop to create wonderful effects. You can always check out a sneak peek of the tutorial final image on my Dribbble and be sure to follow us on Twitter, below, to get sneak peeks and exclusive content!

• Share