«
»

Design a Nintendo DS Lite in Photoshop!

I love my Nintendo DS Lite. I love it to pieces. So what better way to show it affection than immortalizing it in Photoshop?

Photoshop Nintendo DS Lite
Made completely in Photoshop!

I do have to warn you that this is a little different than my other Photoshop Tutorials. It’s meant for a more intermediate-advanced level user, as I will not be explaining every single step like I usually do, although I will try to describe critical points the best I can. Of course, I will be willing to answer any questions you may have – just post in the comments section. Mostly, I will show you my thinking process and the techniques I use so you can apply it to your own creations!

The PSD file is also included at the end of this tutorial for you to download. Head on after the break to start!


Before designing the NDS Lite, I performed a quick Google search to find a good reference image. This is the one I used:

Now we’re going to try to recreate this. The first thing I did was create the top and bottom parts of the unit. I did this by using the Rounded Rectangle Tool to drag out the entire unit (from top to bottom). I rasterized that layer, then selected and deleted the middle. I copied the remaining top part of the unit to a new layer so I could apply individual blending styles to each.

For the top part I used the following blending options. A subtle inner shadow to make it look like the top part of the unit is sunken or concaved.

A dark outer glow to act as the ‘rim’ of the unit.

An off-white colour overlay (colours picked directly from reference picture).

And finally small stroke of pure white around the unit. This white stroke will appear inside the dark outer glow rim.

That’s the top completed! Now to move on to the bottom. Although it looks similar to the top part of the unit, the bottom part is not caving inwards and is instead quite flat. We’ll have to adjust our blending options accordingly. Add a dark outer glow, which will again act as the rim or outline.

Add an off-white colour overlay, slightly darker than the one used for the top screen (once again, this was pulled directly from the reference image).

And again, add a white stroke.

That should get you the effect shown above.

Now we have to add in the hinge. I again used the Rounded Rectangle Tool to draw the hinge between the top and bottom parts, but I used a much large radius (40 px). If you look at the reference image, you can see that the hinge is aligned with the rest of the unit, so don’t make it too short or too long.
Once the blending options are applied, the hinge looks something like this:

Here are the settings to recreate it. First, add in a thick drop shadow.

Add in a light-gray inner glow. Combined with the gradient overlay (below), this will make the hinge appear like it is ‘bulging’ out.

Finally add a reflected light-gray (same shade as the inner glow) to white gradient.

Once the blending options are applied, you need to ‘connect’ the top part to the hinge. Create a new layer over the hinge and draw a selection that covers the dark rim. Fill it with the background colour of the NDS.

Extending down from that selection on both sides, create two dark lines to show where the hinge connects to the top.

Once you’re finished with all that, you should have something that looks like this.

Without any screens, this awesome electronic is not very entertaining! Head over to the next page to learn how to add in the top and bottom screens.

Pages: 1 2 3 4

This entry was written by Minty Ferret on Monday, January 14th, 2008 at 12:06 pm and is filed under Photoshop Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

26 Responses to “Design a Nintendo DS Lite in Photoshop!”

  1. great tutorial, good work

  2. Thanks! Glad you like it.

  3. Not bad.

  4. Impressed took some time to do, but cool:D thx

  5. Thanks guys! Hey remember, if you end up following the tutorial I’d love to see the final result of what people got. :) Feel free to post!

  6. [...] I’ve seen something cool at DS Fanboy. There’s a step-by-step guide on how to make your own Nintendo DS Lite in Photoshop. Isn’t that [...]

  7. cool man … give you 4*
    wonder you have for black ds lite?

  8. Hey glad you like it!
    Nah, I don’t have a tut written for a black DS lite – I think you’d just change the layer styles from white to black, and adjust the highlights accordingly. If you give it a try, be sure to let me see what you come up with! :)

  9. Cool, however I’m wondering why you rasterized your initial shapes. If you had left your shapes as vectors it could be scaled up without loss. I’m looking at the PSD and checking out the layers, although I haven’t actually followed the tutorial just yet. I’m will give it a closer look in time. One other observation about the PSD you provided; the “Y” on the button is Eras Light while all the rest is Eras Medium. Also, for those who don’t have the fonts you might want to consider converting them into shapes as well. Don’t get me wrong, this is awesome. I like it a lot.

  10. Hey Collin! For the first step I rasterized the shape so that I could delete the middle portion easily – of course, if you wanted to keep the entire thing scalable, you could make the top and bottom shapes by altering them with the pen tool. However I wasn’t keeping scalability in mind (tutorial is moreso teaching how to recreate and image using various techniques) and rasterizing the layers is the easiest way to create the initial shapes.
    Regarding the ‘Y’ button – you’re right! I didn’t notice it, thanks for pointing it out! I’ll probably correct the PSD later down the road. Also, you’re right in that I could’ve converted the text to shapes – however you can basically use any font that is similar (I didn’t specify one in my tutorial) if you don’t have Eras – and converting them to shapes would render them uneditable, in case someone wanted to mess around with the fonts.

    Anyway, thanks for visiting and for your suggestions, I’ll keep em in mind for future tuts. :) Cheers!

  11. [...] dem iPod Shuffle nun ein Nintendo DS Lite. Manche Produkte wachsen über sich hinaus, vom normalen Alltagsgegenstand zum Kultobjekt, das sich [...]

  12. [...] nach Create a Sony Playstation 3 in Photoshop , Design a Nintendo DS Lite oder Create An iPod Shuffle haben Sie ein beliebtes Gerät nachgebildet, und das beruhigt [...]

  13. It is great work and i will also try to make it .

  14. Looks very good.

  15. [...] 4.5MB rar file, what’s in there ? that white NDS was made based on a tutorial that can be found at Design a Nintendo DS Lite in Photoshop! you can follow that tutorial. i simply follow that (with some tweak here and there), and get the [...]

  16. This is such professional, awesome stuff. Please make more.

  17. Glad you like it! :) I’m a little caught up with other work at the moment, but I’m hoping to get a few more articles up for next week.

  18. WoW really nice

  19. *cooooll* i am also a graphic designer. but i sow this better then i have. thanks

  20. [...] good tutorial before but I lost the link. Yeah. All I did was download A PSD from this tutorial: Design a Nintendo DS Lite in Photoshop! And Edited the layers, if you know the basics of Photoshop. You can edit it really [...]

  21. [...] it up in layers, The only thing that i can not get to work is the dpad as shown on this page Design a Nintendo DS Lite in Photoshop! I can make the shape but when to click on it when finished it dissapears, Please any [...]

  22. really nice do a very cool design please best regards olle bosson in sweden

  23. [...] nach Create a Sony Playstation 3 in Photoshop , Design a Nintendo DS Lite oder Create An iPod Shuffle hat man ein beliebtes Gerät nachgebildet, und das beruhigt bestimmt [...]

  24. [...] Draw a Nintendo DS Lite [...]

  25. where is the blending option?

  26. That is so real like, i’m looking at my DS lite right now and it’s hard to see the difference, amazing tutorials.

Leave a Reply