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

Music Software Layout


Right lets get started, create a new document with the dimensions 950 x 935 pixels. Set your forground to the color #36c8ff and background to #0090c5, select the gradient tool then with a radial gradient start from the middle of your canvas at the top and drag downwards about half way down.

Img

In the middle of your canvas at the very top add your website title and slogan. Ive also used a CD icon as my logo. Once you've added your text add these layer styles to your website title.

Img

Img

Img

You should have something like this.

Img

Select the rectangular marquee tool, zoom in on your canvas. Underneath your website title and logo create two 1 pixel lines on top of each other, see image below for color codes.

Img

Make the lines the whole width of your canvas then add a layer mask to your lines. Select the gradient tool with a reflected gradient, start from the middle of the canvas and drag towards the edge of the canvas.

Img

The end result should look something like this.

Img

Duplicate your line and move the duplicated layer down about 40-50 pixels.

Img

Inbetween the two sets of lines, make a selection with the rectangular marquee tool. Make the selection the width of your canvas but dont go over the lines.

Img

Fill the selection with the color #24b3e8, add a layer mask to the blue rectangle layer then select a reflected gradient, using the same method as we did for our lines drag from the middle towards the edge of the canvas.

Img

Inside the blue rectangle add a simple navigation. Inbetween each link add a small bullet point using the elliptical marquee tool.

Img

Select the rounded rectangle tool with a radius of 20px. The radius of the rectangle reflects the amount of curvature on the rectangle, the bigger the number the bigger the curves.

Img

Create a fairly big rectangle underneath your navigation.

Img

Add these layer styles to your round rectangle.

Img

Img

Img

Goto your favourite stock site or use google images and find an image preferably music related also with a white background. Copy your image to your canvas, the load the rounded rectangle selection by clicking on the thumbnail within the layers window whilst holding CTRL + Left mouse click. Goto "edit - paste into". Place your image on the right side of your rectangle, blending in the edges on the left of the image if you need to by adding a layer mask.

Img

On the left side of the rectangle add some text with some nice typography. Underneath the text add a small button using the round rectangle.

Img

Add these layer styles to your button.

Img

Img

Img

Img

On top of the button make a small selection like this.

Img

Fill the selection with the color white and set layer opacity to 5%. Add an icon to your button from the icon pack you downloaded. Add another button next to it, you should have something like this.

Img

On the right side underneath your big rounded rectangle, add a content title with a little speaker icon from the icon pack, make a divider using the two 1pixel lines like we did for the navigation then add a couple of paragraphs underneath.

Img

Select the color #009bd6 and #006b94 with the rounded rectangle create a box on the left next to your paragraph fill your box with a rounded gradient just like we did our background at the start of the tutorial.

Img

Add these layer styles to complete the effect.

Img

Img

Inside the box add some content, the buttons on the bottom of my box are duplicates of the ones inside the big rounded rectangle.

Img

At the bottom of the canvas add a simple footer, i've duplicated my navigation with the top divider. Stretched the actual blue navigation box down by clicking CTRL + T, then drag the middle anchor point. Thats it all done.

Img



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


Like us to: