Design a Nintendo DS Lite in Photoshop!
Here is the top screen completed. I used the rounded rectangle tool with a very small radius and used a guide to help position this in the center of the device.
Here are the Blending Options I used to create the top screen. First, a thick gray outer glow was used. I used a gradient going from the gray to white since I wanted a thin stroke of white on the outside.
Followed by a thin dark inner glow.
A large light-gray stroke (when this is applied, it covers up most of the outer glow).
Those settings should allow you to create a similar screen. Once you have that made, simply duplicate that layer and drag it to the bottom to serve as a touch screen. Since on the NDS, the touch screen is beveled slightly outwards, we’ll need to make some adjustments. Instead of working with the touch screen layer, I actually duplicated it, deleted all the blending options, and slotted it behind the actual touch screen layer to apply the bevel effect.
This one is easy, you only need to add an outer bevel to the layer:
This will make it look like the touch screen juts out from the bottom of the device.
Now we need buttons! We need sound! We need a microphone! And handy lights to tell us when our NDS needs some more juice! Head on to the next page.
There is an easy way to simulate this 'neon glow' effect by adjusting a Photoshop brush. Learn how to make a brush taper and fade.
This tutorial shows you the basics of Liquify and includes a few funny examples of what you can do with your new-found power.
Here is a pack of free Web 2.0 Calendar Icons for you to use. They've een designed using the method outlined in the 
great tutorial, good work
Thanks! Glad you like it.
Not bad.
Impressed took some time to do, but cool:D thx
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!
[...] 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 [...]
cool man … give you 4*
wonder you have for black ds lite?
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!
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.
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!
[...] dem iPod Shuffle nun ein Nintendo DS Lite. Manche Produkte wachsen über sich hinaus, vom normalen Alltagsgegenstand zum Kultobjekt, das sich [...]
[...] 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 [...]
It is great work and i will also try to make it .
Looks very good.
[...] 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 [...]
This is such professional, awesome stuff. Please make more.
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.
WoW really nice
*cooooll* i am also a graphic designer. but i sow this better then i have. thanks
[...] 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 [...]
[...] 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 [...]
really nice do a very cool design please best regards olle bosson in sweden
[...] 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 [...]
lol this is so crappy
[...] Draw a Nintendo DS Lite [...]
where is the blending option?
That is so real like, i’m looking at my DS lite right now and it’s hard to see the difference, amazing tutorials.
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!
lol i made an ipod shuffle in CS4 recently i like this n i love pheonix write 2 ^.^ im gonna have a go.. thxxx