Lol this is so crappy …

I created the D-pad with the rectangle marquee tool. Remember to hold down shift to add to your selection – this will allow you to create the cross shape.

Here’s what we’re going for.

First we need a white inner shadow to make the d-pad pop.

A dark outer glow to represent the gap between it and the bottom part of the console.

And finally, a pinch of console-coloured overlay.

Once that’s finished, you might want to add a bit of a sheen (as seen in the original reference image) to the d-pad. Select a side with the elliptical marquee tool, then get rid of the excess.

Fill it in with white, then adjust the opacity of the layer down to give it some transparency.

Add in the d-pad markings (similar to the microphone, except a dark gray colour as opposed to fathomless black).

And your d-pad is complete!

And finally, it’s time to add the buttons! Use the circle tool (and remember that shift is you’re good friend) to create your first button. Get it just right (using the blending styles described below), then duplicate it three times and arrange it in a thumb-friendly pattern.

To your first button, add a gray drop shadow.

And a nice bright white inner shadow.

The color overlay will be the same as that of the console.

And finally, add a gray stroke (same shade as your drop shadow) to make the button slightly more pronounced.

Start and Select buttons were added by duplicating one of the buttons above, shrinking it down, then dragging it into place.

And here is our DS, fully functional!

Remember to add in the details, most obviously the words. Add YXAB, START and SELECT to your buttons. Don’t forget the MIC as well. If you check the top of the console, I’ve also added a few subtle touches (as seen in the reference photo) to make it even more realistic.

Finally, slip in some screenshots of your favourite game, and perhaps add a sheen to finish it off!

Congratulations! You’ve created a realistic Nintendo DS Lite! If you would like to look at the PSD file, feel free to download it from the link below. Happy designing, and gaming!

>> Download the NDS PSD File Here <<
Downloaded 112 times

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. Both comments and pings are currently closed.

29 Responses to “Lol this is so crappy …”

  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. lol this is so crappy

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

  26. where is the blending option?

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

  28. Wow!! I am so impressed!!! I wanted to ask you if you would be willing to share your design/template……I would like to use it for a birthday invitation. My son is turning 7 and he loves his DS. This would be perfect and would totally surprise him. Thanks!

  29. lol i made an ipod shuffle in CS4 recently i like this n i love pheonix write 2 ^.^ im gonna have a go.. thxxx