Subscribe Via RSS

3921 Subscribers

Subscribe Via RSS
Subscribe Via Twitter

Followers

Subscribe Via Twitter
3D Mp3 Player

June 3rd, 2008 in Photoshop Tutorials by Richard Carpenter

3D Mp3 Player

1 Star2 Stars3 Stars4 Stars5 Stars44 Votes, Rating: 4.66
Loading ... Loading ...

Create a new document 600×440 with a background of your choice, select the “rounded rectangle tool” with a radius of 20px.

Draw out your mp3 player shape fill with the color black. Now goto “edit > transform > distort” OR “edit > transform > perspective” OR use a combination of both and transform your shape into something like this.

Label your layer “top”, duplicate this layer and drag the duplicated layer below the “top layer” label the duplicated layer “middle shine” and move it down once using the down arrow key on the keyboard. (ive colored mine in yellow just for your benifit we’ll be adding layer styles later.)

Now while the “middle shine” layer is selected hold down alt on your keyboard and press the down arrow key on the keyboard 15 times, everytime you click the down arrow a new layer is created and moved down. Merge all your 15 duplicated layers together as one, lable this layer “middle. (showed in green on the image below)

Do the same again but only do it 12 times and label this layer “bottom” (showed in grey on the image below)

You should have something like this. Althou it does help if you change the colors so you can see what goes where.

So to recap then we should have 4 layers top, middle shine, middle and bottom. Starting from the bottom upwards we shall add our layer styles. On the layer “bottom” add these layer styles.

Add these layer styles to the “middle” layer.

Add this layer styles to your “middle shine” layer.

And finally add these layer styles to your “top” layer.

You should end up with something like this.

Now on a seperate layer called “display LCD” create your lcd screen.

Make sure your screen is all on one layer, once done ctrl – click your layer to make a selection, then press ctrl-c to copy your lcd to the clipboard. Now create a new layer above your “top layer”, leave this blank for now, just goto “filter > vanishing point” Once vanishing point has loaded up the 1st thing we need to do is create a plane select the plain tool or press “c” just make 4 points like this.

Now press “ctrl – V” to paste your lcd screen into the vanishing point, drag your lcd screen over your plane that you made in the previous step. You may also resize it a little bit by clicking the transform tool (T). Once you think its ok press enter. You’l be left with this.

The edges of out LCD screen are abit jaggy so cut around it using your prefered cutting tool, just cut 1 pixel off all the way around.

You should be left with this.

Now add these layer styles.

You should have something like this.

Now create a logo for your mp3 player, create it the same way you did your LCD screen, once created goto vanishing point, your plane should still be intact.

Now make a selection like this.

Fill with the color white and set opacity to 20%.

Also add a line, created by the pen tool, just use the color black, this will act as our crease for the lid.

Now select the rectangle tool and create a yellow rectangle to act as a button, copy it, then goto into vanishing point and setup a new grid.

Paste your button the same way as we did the LCD screen. Press enter when done, now add these layer styles to your button.

You should have a final image like this.

About The Author

About The Author: Richard Carpenter

Hi im Richard Carpenter and im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of Photoshop Plus. You can follow me on twitter HERE. You may also view my portfolio HERE.

 

Richard Carpenter has written 364 posts.

Be Part Of The Community!

Become part of the hv-designs community.

Subscribe Via RSS or Follow Us On Twitter.

Subscribe Via RSS Follow Us On Twitter

168 Responses to “3D Mp3 Player”

  1. PimpStylerz says:

    Great ! Good tutorial ;)

  2. iddouchayt says:

    very good, continue

  3. Helpfull hand says:

    It was worth the waiting ;)
    To bad it’s a little pixelated, scaled the image?
    Anyways, I’ll try this later on ;)

  4. wenomraid says:

    hey man real artist name is LINKIN PARK… :D anyway tutorial great

  5. ADMIN says:

    hhaha just noticed the linking park :( my bad

  6. tjjttrj says:

    lol, why not using a 3d-program instead?

  7. silver says:

    Very very nice tut, but just wondering, what version of photoshop do you need, cos I only have 7

  8. ADMIN says:

    should be able to achieve the effect in all photoshop versions, but i think the vanishing point filter was only added in cs2 plus versions, you can get around this by just using the “edit > transform > perspective” method instead.

  9. Dushi says:

    i can’t do that thing with holding down alt and pressing down arrow key to copey it :S

  10. jono says:

    amazin tutorial its 1 i actually leant new things eg vanishing point, also mine looks pretty good made it thinner i was tryin to achieve the iphone or touch. Please can you just add for people like me how to trim i did my way contract 1px but still jagged.

  11. ADMIN says:

    yea i used that method 1st, but also got jaggy edges, so as i said in the tutorial, just use the pen tool or polygonal lasso tool cut the edges off. just make sure its only like 1pixels all the way around

  12. dfdf says:

    awesome tutorial!

  13. gomes says:

    i found that real, real nice!!!

  14. zech says:

    nice tutorial,never knew anything about the vanishing point,wow!

  15. catmandu says:

    Great looking tut but I can’t get the hold ‘alt’ and down arrow click to work. The selection moves down but no new layer is created.
    What am I doing wrong?

  16. teh1337 says:

    Can you please publish your brushes?

  17. ADMIN says:

    no brushes were used in this tutorial.

    hold alt key and tap the down arrow key, a new layer should be created everytime the down arrow is pressed.

  18. shriram.s says:

    really gud and userfrendly wen i saw d first time ve

  19. ahmed says:

    it is a nice tutorial,i had made one watch in photoshop but i was laking with the basic nthings u have done here.

  20. mj says:

    THANKS..
    I LEARNED.

  21. andrei says:

    Great stuf, very easy to do. Thanks.

  22. Travis says:

    Geek!!

  23. mansoor says:

    good

  24. Greg-J says:

    Awesome !!! Very good job !!!

  25. projectgrfix says:

    Awesome!! It looks so real, just like a pic of real mp3 player.

  26. Good tut

  27. exellent>so great you man in design.
    really i loved your design .
    and thanks for this easy lesson

  28. Sky - Des says:

    coool

  29. Jagamohan says:

    Thanks!!!!!!!!!!!!!!

  30. Miguel says:

    Great turorial, thank you.

  31. nirmal says:

    nice tutorial

  32. krishna says:

    Nice work..I like it

  33. Bartek says:

    linkin park rocks xD

  34. Michael says:

    Hey, I really like this tutorial but when I try to do the Vanishing Point part, it doesn’t work like it does in the tutorial. It doesn’t look yellow and when I try pasting my LCD screen into that Vanishing Point layer, it doesn’t paste like I want it to. It just pastes like regular. Can you please help? Thanks.

  35. Siver coin says:

    Awesome!

  36. Epic fail :P

  37. MAIKEL says:

    Hermano….te felicito…espero seguir tus pasos…es sorprendente la creatividad que tienes….me gustaria tener tus conocimientos….voy a tratar de hacer diseƱo….y quizas podamos competir….

  38. JINU says:

    GREAT TUTORIAL !!!!
    llooks lik real i-pod is placed .

  39. akhil says:

    Oh….Amazing work……………!!!!!!!!!!

  40. j000 says:

    That was one awesome mp3 player maybe I will make it work using Actionsctipt 3 one day. Loved the colors you used. Thanks for sharing.

  41. Malcolm says:

    I am impressed. i have to say that this is what i called hard work. by the way, i have a question to ask you. how do you put those pictures like the way you did in this tutorial? did you use a software, or a camera? if a camera, how did you do it?

  42. isa says:

    cool………… thank’s

  43. ilkut says:

    When i saw this tutorial i think it’s really hard.But when i see it i began to think it’s easy but a good picture with an easy tutorial.Cool tutorial

  44. Martin says:

    It’s impressing. Great job. i learned smth new as well, as far as I’m often working on photoshop. Thanks.

  45. Amadis says:

    excellent lesson, appreciate it!

  46. zaenal says:

    i’ll try this. certainly

  47. rex says:

    its amaze me,,i love ur designs..

  48. 21web says:

    Its just amazing! Thanx !! God bless you

  49. CodeGeass says:

    Hey, very good Tut :)
    I gave it a trie and this is my final result:

    http://img682.yfrog.com/i/mp3player.png/

    I added a more detailed screen, with album-cover and so on
    and with some headphones :)

    (sorry for my english spelling, i’m from germany)

  50. Ahmed says:

    Very Nice Man , Thanks .

  51. evilkitty75 says:

    I DID IT thankyou man hehe so kool ^.^ xxxx xx

  52. murtaza says:

    Thanks for tuts.
    it is really helpful to me.

  53. Kathleen says:

    nice :) looks realistic enough :) thanks for the tutorial – kathleen :)

  54. shaunah says:

    thanks for the tutorial, I would pb do this in a larger dimension because it becomes pixellated easily at this size!

  55. amazing tutorial thanks.

  56. PRASAATH says:

    Richard Carpenter Excellent mentor excellent ur realy so generous dude thank u so much mentor

  57. PRASAATH says:

    Mentor i would like to share mp3 player which i created. if u dont mind can u review my work ?

  58. Aaron says:

    Go ahead and post a link and we will take a look at it.

  59. thanks so much. it’s great

  60. your site is very interesting. thank so much

  61. Hi, I just wanted to tell you that I love your work and that I want to add a direct link to your site from mine here: http://www.easypornhub.com so all my buddies can see it.

  62. Carl Molla says:

    Excellent work !!

  63. Candy says:

    Hey Richard,

    This is great Tut , look amazing !

    I like make picture with Photoshop,but I don’t have more exp about color !

    Great Work,let continue !

  64. Great Site love the info i just bookmarked this

  65. krem says:

    himm It was a very nice idea! Just wanna say thank you for the information you have diffused. Just continue composing this kind of post. I will be your true reader. Gives Thanks once more…

  66. I am happythat I came here, Very useful articles and a million thanks for sharing this very well written post

  67. Nice dear friend……. amazing for to this player and special thanks for you friend for the helm me by this tutorial I understand it completaly

  68. 26. Excellent blog here! Also your web site loads up fast! What host are you using? Can I get your affiliate link to your host? I wish my website loaded up as fast as yours lol

  69. krisna says:

    awesome.

  70. Nice tutorial, thanks for sharing.
    Probably can be done quicker and cleaner with Illustrator.

  71. your site is very interesting, i just bookmarked your site. keep up the posts

Leave a Reply