Feb 16th

Beautiful Music Streaming Website Design in Photoshop

Matthew Heidenreich in Tutorials with 46 comments

In this tutorial you will learn how to create a beautiful and clean music streaming website in Photoshop. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Excellent Quality Brochures Online Color Printing at PsPrint

Final Result

Click on the image to view the full-scale final result.

Did you know you can register your domain name, get web hosting, and even find eCommerce software at Network Solutions? Go with a name you can trust when you’re ready to start your online presence.

Lets get started

1. The first thing we want to do is create a new document with the dimensions of 1020×1180.

2. Starting from the top, we want to begin with our header. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000.

3. Keeping it black would just be boring, so the next step is to add some blending options. To do so, go to your layer in the layers palette and right click it and choose Blending Options from the drop down menu. Insert the following:

4. For our navigation, we want to give it a “bubbly” look at the bottom. To achieve this, there are a few different ways of doing it, and the way I am going to show you is very simple. Using your Elliptical Marquee Tool, make a circle simple to the following and fill it with #000000.

5. Now what we need to do is duplicate this layer by selecting your layer in the layers palette and hitting CTRL+J (Command+J). Place your duplicated layer in a similar way as the following:

6. Merge your layers and keep repeating this process until you get something that looks like this going across your header:

7. Using your Rectangle Marquee, make a rectangle similar to the following and fill it with #000000 on its own layer.

8. Merge your “bubbles” layer, and your newly created rectangle layer together and then lower your layers opacity to about 80% and insert the following blending options onto your layer.

9. For the logo I used the font Chunk , and for the musical icon, I downloaded the Mono Icon Set. Keep this set handy as we will use it in other parts of this tutorial. I then applied the following blending options to both the icon layer, and my text layer:

It will look something like this:

10. Our links will be fairly basic on the right side of our header. Using a font similar to helvetica, go ahead and add some white text to represent our links. For our active link text, I used the color #1F282F. I then used the Rounded Rectangle Tool with a radius of 5px to create a box behind my link with the following blending options:

11. Your header should look something like this:

12. Next we want to create the color glow that will be behind our screenshot preview in our featured area. Create a new group in your layers palette (Command+G), and label it “Color Glow”. Then Command+Click your blue background layers thumbnail preview in your layers palette to make it an active selection. With your new group selected in the layers palette, go ahead and chose the layer mask icon at the bottom of your Layers Palette. This will make it so nothing will be visible in our content area of the site.

13. Next use a soft brush to add some bright colors in a similar way to the following, each on their own layer. Then lower the opacity of each layer until you like your results. This is what I came up with:

14. I wanted to add a little starburst effect as well that will radiate behind our screenshots, so I downloaded this rising sun brush pack and added a starburst effect.

15. Take a screenshot of your favorite music streaming site (I chose last.fm for this tutorial), and place your screenshots in a similar fashion.

16. All that is left for this is to add a little shadow underneath our screenshots. Use your Elliptical Marquee with a bit of a feather, and fill a selection similar to the following with #000000 and then lower the opacity to a point you like.

17. The last thing I did was to add a “Play” icon that I made using my Elliptical Marquee with a black fill, and my Polygonal Lasso Tool with a white fill. Lower the opacity on it and the left side of our featured area will look something like this when we are complete. We will then be able to move onto the right side.

18. Using your Text Tool, add some text in a similar way to the following. Our heading is #1E282F, while our body text is #FFFFFF.

19. With your Pen Tool, make a path similar to the following under your heading:

20. We want to add a stroke to our path. Chose your Brush from your Tools Palette and make sure your foreground is set to #1E282F, with about a 2px soft brush active. Make sure you are on a new layer, and then select your path from the Paths Palette, and then choose the Stroke Icon at the bottom to add a stroke to your path.

21. On your strokes layer, insert the following blending options:

22. The last thing we need to do for our featured box is to add our “Sign up now” button, and our “Find out More” button. To do this we want to use our Rounded Rectangle With a Radius of about 20px.

23. Add the following blending options to your layer:

24. Using your Text Tool, add some text in a similar way to the following. I then added an icon from the Iconic Icon Pack.

25. On your icons layer, added the following blending options to give it a nice green gradient.

26. Then follow the same steps to create a “Find out more” button. The only thing that changes is that our icon will use a different gradient. I used the same gradient as our blue background, except it is reversed. Your header will look like this when it is finished.

27. Our content area is up next. With your Rectangle Marquee, make a selection similar to the following and fill it with #FFFFFF.

28. Insert the following blending options onto its layer.

29. Starting with the left side of our content area, we are going to make the “Start Listening” box. So pull out your Rounded Rectangle Tool from your Tools Palette and set the radius to 10px.

30. On this newly created layer, we then want to add the following blending options:

31. To make the the heading of our box, we want to Command+Click (CTRL+CLICK) the thumbnail in our layers palette of our rounded rectangle layer to select it. On a new layer, fill your selection with #000000. Using your Rectangle Marquee Tool, select most of the box that will house content and choose Edit>Clear. It will look something like the following:

32. Insert the following blending options onto your newly created layer:

33. All that is left for the heading is to add some text to describe the content box. I chose to add a little icon on the right to add a “open new window” type option.

34. Once you add some content into the box, you can have something that looks like the following:

35. The right side of our content area houses a “featured Artist” box, and “What members say” box. These boxes are fairly basic. Using the Rounded Rectangle with a radius of 10px is how I created the container, and the back of the heading. Use the same gradient you used in step #32 for the background of your box, and then use the same gradient you used for your active link in step #10. Add some content and your content area will look like this:

36. All that is left is the footer and then we will be done! Using your Rectangle Marquee Tool again, make a rectangle similar to the following and fill it with #1F282F.

37. Now insert the following blending options onto its layer:

38. All that is left is to add some icons and text and your footer will be complete. All icons are from the Iconic Icon pack we downloaded previously. When it’s all said and done, your final template should look like the following:

Download testking 642-067 study pack to get useful information related to photoshop and web design. We offer best quality testking 642-654 video demos and testking JK0-016 tutorials to provide in detail learning.

Written by Matthew Heidenreich

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, DeviseFunction. You can follow him on Twitter @Spicypepper.

Share Your Thoughts46 Comments

Imon February 16th, 2010 at 10:01 pm

Nice tutorial and great outcome, good luck with future tutorials

Reply
web development Kolkata February 17th, 2010 at 6:22 am

Hey man, its cool!! When I started reading the post, I never thought it was that an easy task. I want to keep a track of this URL and will get back whenever I’m in problem making a musical website. I know, You don’t mind me sharing your URL with my friends. Thanks buddy!

Reply
Motti February 17th, 2010 at 6:40 pm

very nice tutorial, lots of info and very detailed, thanks

Reply
melek February 21st, 2010 at 8:55 am

great tutorial!!! thanks.

Reply
Nishant February 23rd, 2010 at 9:01 am

Great tutorial Thanks a Lot For Sharing This….And Gud Luck For ur Future tutorials….

Reply
David Gravely February 25th, 2010 at 4:04 am

Wow… This is really cool. Nice work. Thank you.

Reply
syed March 8th, 2010 at 11:48 am

nice work with advance designing skills.

great work

Reply
Shekhar Mehta March 18th, 2010 at 8:00 am

Thanks for sharing resources and tutorials. We are web design company and this article will be helpful to us.

Reply
Filipino Website Designer March 28th, 2010 at 6:37 pm

Wow! Thanks for this tutorials, This is very helpful to me because I’m a freelance web designer and It helps me also in creating a website like this.

Nice tutorials dude!!! You rock my work!!!

Reply
Marcell Purham April 16th, 2010 at 7:13 pm

Great tutorial. You had some pretty good techniques that you used in this.

Reply
Web Tasarım, Grafik Tasarım April 17th, 2010 at 6:09 am

çokkkk güzel teşekkürler,
very beatifuLL thanks

Reply
Kamilah April 26th, 2010 at 2:56 am

Thank you, great tutorial.

Reply
Bankster April 30th, 2010 at 10:21 am

I’ m newbie webdesigner
Thank you for share your skill

Reply
clippingimages June 7th, 2010 at 11:54 pm

Great tutorial:)

Reply
Peter | laptop comparison August 4th, 2010 at 9:39 pm

I think the result is great and I also learned a few new tricks.
One question though, how did you come up with the overall concept. Do make a wire-frame in advanced, or are you just creating by trial and error?

Reply
- Matthew Heidenreich August 4th, 2010 at 9:52 pm
  
  That’s a good question. I actually will draw out a wireframe in most cases and determine where things need to go. I actually made a sketch before writing this tutorial. If I can find the original, i’ll add it to the post.
  
  I will say, I have not always sketched ,and the trial and error mode works good for many people as well.
chinese boy September 13th, 2010 at 4:25 am

SO COLL!You are my star!
3Q very much!

Reply
sam September 17th, 2010 at 2:51 am

how to add link to all these icoins that are created like home, register, etc.

Reply
- Matthew Heidenreich September 17th, 2010 at 10:12 am
  
  you would have to slice and code this in html and css.
Ahmad October 19th, 2010 at 6:38 pm

Very nice tut thanks alot

Reply
Joanna Griffin November 23rd, 2010 at 9:43 am

Hi,

Wonder if any one of you can help with this. I’m looking to buy the best GPS for the money as mine has died on me but it’s ages since I have bought one and they’re so different now.

There seems to be much more real-time features and plenty of focus on the specifics of local areas but I rarely go out of my own neighborhood and work 2 minutes from the house so precisely what would be a more sensible choice for me so I spend less if I don’t need these traits? Thanks

Reply
Internet Hizmetleri December 1st, 2010 at 2:18 pm

Hey man, its cool!! When I started reading the post, I never thought it was that an easy task. I want to keep a track of this URL and will get back whenever I’m in problem making a musical website. I know, You don’t mind me sharing your URL with my friends. Thanks buddy!

Reply
Paul December 9th, 2010 at 5:31 am

Hi

I am constantly on the look out for realy good tutorials to follow and create xsitepro templates out of the results.
This is another one that has been bookmarked and will be on my site in the very near future.
Thanks so much, keep up the great work.

Reply
Paul December 9th, 2010 at 12:54 pm

Just to clarify, I will not be copying this template, I will use this tutorial as inspiration, when I see something as nice as this I like to go do it exactly as the tutorial I then do it my own way with my own spin.

Please do not think I would steal this design, not my bag

Reply
azul December 30th, 2010 at 11:36 am

its great!! i never thought that someone could make such a good website maker, lets say it like that, thenk you !!

Reply
Ntalia December 31st, 2010 at 8:13 am

buenisimo¡¡¡¡¡¡¡

Reply
webdeveloper January 6th, 2011 at 4:58 am

Cool j’adore j’ai une idée pour ce désigne si épuré !

Reply
Cairo escorts ladies February 24th, 2011 at 2:59 am

In the form of chap guru out of the approach area, I uncovered any web blog to be valuable. I’ve repeatedly experienced determine with the fashion all my life accordingly I’ve generated an absolute website regarding industry pros another collectively and then review practically all situations inclination. I’ve gotten a variety of superb techniques for items internet page coming from encountering this

Reply
tushar pandit(Nagpur,India) April 23rd, 2011 at 4:18 pm

great1,thank u so much.

Reply
Morton Riveron April 24th, 2011 at 4:15 pm

I¡¦m now not sure the place you’re getting your info, but great topic. I must spend some time learning more or understanding more. Thanks for excellent information I used to be searching for this information for my mission.

Reply
Sharon W May 5th, 2011 at 6:07 pm

Nice tutorial, love the header.

Reply
lola pixie May 19th, 2011 at 4:58 am

Hmm it appears like your blog ate my first comment (it was extremely long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog. I as well am an aspiring blog blogger but I’m still new to everything. Do you have any tips and hints for first-time blog writers? I’d genuinely appreciate it.

Reply
Anon June 1st, 2011 at 12:06 am

Amazing.

Reply
dating sites June 17th, 2011 at 9:12 am

This is a excellent site, might you be involved in doing an interview regarding how you developed it? If so e-mail me!

Reply
cluster headaches treatment August 10th, 2011 at 11:05 am

of course like your website but you need to check the spelling on quite a few of your posts. Many of them are rife with spelling issues and I in finding it very bothersome to inform the truth however Iˇll surely come back again.

Reply
CRYSTAL September 9th, 2011 at 10:38 am

These are really cool music website! Just wanna say thank you for the selective information you have distributed. <a href="

Reply
jason November 3rd, 2011 at 12:56 pm

beautiful tutorial… learnt a lot

Reply
arcade game sales November 10th, 2011 at 6:14 pm

Oh my goodness! an amazing article. Thank you!

Reply
lancaster auto body November 10th, 2011 at 6:18 pm

Thank you for all of the effort on this blog

Reply
paving reading pa November 10th, 2011 at 6:18 pm

I am often blogging and i really appreciate your content. The article has really peaked my interest. I am going to bookmark your site and keep checking for new information.

Reply
data recovery boston ma November 10th, 2011 at 6:19 pm

Hello! I just would like to give a huge thumbs up for the great info you have here on this post. I will be coming back to your blog for more soon.

Reply
Sacramento Personal Injury Attorney December 16th, 2011 at 12:52 pm

Such amazing tutorials, i really love them!

Reply
Crestor Lawyers December 30th, 2011 at 7:54 am

Some amazing designs, thank you so much.

Reply
Web Hosting February 13th, 2012 at 6:14 am

Thanks for the great tutorial! You make designing seem so easy.

Reply
Taupo Accommodation February 27th, 2012 at 9:01 pm

This kind of tutorial is ideal for newbies! Thanks a bunch

Reply
Building Inspections Auckland March 7th, 2012 at 8:30 pm

I’ve learned a lot, thanks for the post!

Reply