Music Player Photoshop Create A MusicPlayer in photoshop

[sachavdk 0]

The next tutorial should create some kind of mp3-player (with Photoshop).

It is not really basic but it should be possible for little experienced users.

The complete psd file can be downloaded here: http://forums.xisto.com/no_longer_exists/

 

1. Create a new document (500*500px) with transparent background

2. Rename the layer to "Basic"

3. Set forecolor to #eeeeee

4. Select "Rounded rectangle tool" and draw a form like this:

5. Goto layer pallet, rightclick on the layer and select "Blending options".

Use these settings:

6. Duplicate the layer, rename the duplicated layer to "Basic_Noise" and remove the blending options by rightclicking it and Selecting "Clear layer style"

7. With the "Basic_Noise" layer selected goto Filter=>Noise=>Add noise with these settings:

____Amount:30

____Distribution:Gaussian

____Monochromatic Checked

8. Set in the layer pallet the opacity of the "Basic_Noise" layer to 50%

9.You should now have something like this: (only with transparant background)

 

Now we are going to create a volume controller:

1. First make with the "Ecliptical selection tool" a selection with more or less the size off the button on the picture above, while holding the "Alt" and "Shift" buttons, which keep your selection centered and keeps a square aspect ratio.

KEEP YOUR SELECTION!!!

2. Add "Blending options" and use following settings:

http://forums.xisto.com/no_longer_exists/404.png

3. You should still have your circle selection. Now goto Select=>Modify=>Contract and contract by 10 pixels.

4. Now make while holding "Alt" a second selection like on the picture

http://forums.xisto.com/no_longer_exists/404.png

You should get a selection like this:

http://forums.xisto.com/no_longer_exists/404.png

5. Press D and X.

6. Select brushtool with these settings:

http://forums.xisto.com/no_longer_exists/404.png

7. Color the selection like on the next picture:

http://forums.xisto.com/no_longer_exists/404.png

 

The next thing is the display. I'm only gonna explain the basic of the display.

Since what you want on it, is just text and lines etc.

1. Select "Rounded Rectangle Tool" and use following settings:

http://forums.xisto.com/no_longer_exists/404.png

2. Draw such a rectangle like this one:

http://forums.xisto.com/no_longer_exists/404.png

3. Again add "Blending options" using these settings:

http://forums.xisto.com/no_longer_exists/

http://forums.xisto.com/no_longer_exists/404.png

The overlaycolor is: #e8e5c7

The result should be something like this:

http://forums.xisto.com/no_longer_exists/404.png

 

It might be not perfect and the player is far from finished but this is what I became after some time:

http://forums.xisto.com/no_longer_exists/404.png

 

Hope you like it :PB)

[snlildude87 0]

Nice tutorial.

 

Now, are you just creating an image of an mp3 player, or are you actually going to implement a mp3 player such as radio.blog?

[sachavdk 0]

No its just to give people who want to make music/video players a help to the design of the user interface. Even if it's totally different from this one.

[Kubi 0]

Wow, this is pretty cool, so basically you can change all those options(most) and it'll change the way it looks. That's awsome, always wondering how they made it. I'm guessing making it actually WORK requires a TON more work huh? That would be pretty awsome if you could make that a working MP3 player.

[sachavdk 0]

Wow, this is pretty cool, so basically you can change all those options(most) and it'll change the way it looks. That's awsome, always wondering how they made it. I'm guessing making it actually WORK requires a TON more work huh? That would be pretty awsome if you could make that a working MP3 player.

161119[/snapback]

Like I said it wasn't the meaning of making a player, but maybe I'll try if I find some time, so don't count on it.

[DjLuki 0]

that's a cool tutorial...thanks for sahring...

[Saint_Michael 3]

not badm but i have a felling though doing the coding will be pain in the butt to do.