DJ Layout #2

Posted on April 4th, 2008.

15 Votes, Rating: 4.271 Star2 Stars3 Stars4 Stars5 Stars
Loading ... Loading ...


Learn how to create a DJ layout.

Create new document 850×850 pixels select the colors #333333 & #000000 and drag a linear gradient over the canvas.

Select the rectangular marquee tool and create a small black rectangle at the top of the canvas

Select the rounded rectangle tool and draw a small rectangle under your black bar.

add these layers to your rounded rectangle.

Your image should now look like the one in step 3 above. Add your navigation text and a small divider.

Now select the rectangular marquee tool, on a new layer draw out a rectangle. Fill with a linear gradient using the colors #f08808 & #fee27d. Add a 2 pixel black stroke to it also.

Now using some cloud brushes add a few clouds inside the rectangle, set the layers blending mode to linear dodge. Then add a few more elements I.E logo and dj name and/or maybe a picture of yourself dj’ing.

Now draw out a rounded rectangle under your header using the color #333333, add this drop shadow.

Your rectangle should look like this.

Now add your content. I wont go into detail on this step as its mainly just text.

Repeat the above steps and create some more content boxes. Also adding your content as you go along

Create another rounded rectangle the same width as your canvas minus a few pixels each side. Fill with the same color as your content boxes. Add your sites logo and your footer information.

Last but no least back to your header. Select the pen tool and create a selection like this.

Fill with the color white, set layer opacity to 38% and blending mode to soft light.

All done. Enjoy.

Tags: , ,

Post Options

Permalink | | Print This Post

7 responses so far!


Note: We now use Gravatars here on HV-DESIGNS, they are little icons that appear next to your name on this site and on many others next to your comments. You can get a Free Gravatar account for free and any other site that supports it will show your avatar also!


  • 1 Naveed ~ Apr 6, 2008 at 1:17 am

    wow really nice simple yet effective :)

  • 2 Dj Wolssy ~ Apr 11, 2008 at 3:21 am

    Catchy….

  • 3 Hazem ~ Apr 20, 2008 at 8:11 pm

    Congratulations for your good site :)

  • 4 alldemo.net ~ Apr 21, 2008 at 6:38 pm

    How to make High Energy Website template for Dj’s…

    Learn how to make website skin or template from scrap for DJ’s or music sites….

  • 5 Likenota.com | Photoshop Tutorials ~ May 5, 2008 at 4:26 pm

    very nice layout you got going there. colors have a great color combination.

  • 6 Helpfull hand ~ Jun 1, 2008 at 9:19 pm

    1 Word: Awesome ;)

  • 7 Xphunt3r.blogspot.com ~ Jun 19, 2008 at 5:27 am

    no words

Leave a Comment