Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout DJ Layout #2

DJ Layout #2


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

image 1
Click to enlarge

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

image 2
Click to enlarge

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

image 3
Click to enlarge

add these layers to your rounded rectangle.

image 4

image 5

image 6

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

image 7
Click to enlarge

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.

image 8
Click to enlarge

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.

image 9
Click to enlarge

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

image 10

Your rectangle should look like this.

image 11
Click to enlarge

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

image 12
Click to enlarge

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

image 13
Click to enlarge

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.

image 14
Click to enlarge

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

image 15
Click to enlarge

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

DJ Layout #2
Click to enlarge

All done. Enjoy.



Author's URL: Hv-Designs.co.uk
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Reader's comments
comments DJ Mark July 28, 2011 says:
Your comment...
Reply
Add comments to "DJ Layout #2"

Captcha