Welcome To BlogerDesign

First of all create a new document with the dimensions: 1080 by 880 pixels. Now we are going to fill in the background with a solid colour by going Edit > Fill, and use the colour #CDECFF.

Step 2

We are now going to be creating the navigation background. Create a new layer (Layer > New > Layer) and using the rounded rectangle tool make a selection (860 by 120 pixels) in the center, at the top of the document so that only the bottom curves are showing (hide the top ones outside the document by moving the selection up). Fill (Edit > Fill) the selection with the colour #151515 using the same method we used in the first step.

Step 3

On the navigation background layer go Layer > Layer Styles > Gradient Overlay and enter in the settings below. Clicking on the picture beside "Gradient:" brings up the window on the top.

Now your navigation should be looking like this:

Step 4

Now we are going to be adding in some text links to act as the navigation for the site. Select the text tool from the tool box and add in some names of pages that you'd have for a photography site. I've chosen home, about, portfolio, services and contact. The font I've used is Verdana (16pt) and the colours are #EAEAEA for the links and #010101 for the bars between the links.

Step 5

Next up we are going to be adding in the logo / header for the site. So create a new layer and using the rounded rectangle tool again make a selection of about 200 by 240 pixels (with a radius of 10 pixels) on the right hand side of the navigation, and using the technique we used for the navigation background make it so that only the bottom curves are showing (not the top ones). Select the gradient tool and set it to radial. Set your foreground colour to #E0E1E1 and your background to #F1F1F1, fill the selection with a gradient (left click somewhere near the top center and drag to the bottom and release).

Step 6

Now we are going to be adding a layer style (an outer glow) to the logo background. To do this we go Layer > Layer Styles > Outer Glow. I've used the settings below.

Your layout should now be looking like this.

Step 7

Using the text tool add the name of the site and a small description underneath. I've made up a name "PhotoSmart" for the site and the description is "Professional Photography" - alliteration :) The colorus I have used are #272727 (for the darker colour) and #7b7b7b (for the lighter colour).

Step 8

Now we are going to be doing the actual logo of the logo ;) If you don't want to make a shape from scratch for your logo, just use a custom shape from Photoshop. I've filled my tick with the colour #85c7ff and added a small white outer glow (Layer > Layer Style > Outer Glow).

Step 9

Create a new layer (Layer > New > Layer) for the top content background area. Using the rounded rectangle tool make a selection of 860 by 590 pixels and fill (Edit > Fill) with #181818.

Step 10

Create another new layer and make a rounded selection of 860 by 400 pixels at the bottom of the background (leave a 10 pixel margin at the bottom). Fill this selection with white (#FFFFFF).

Step 11

Add in some fill in text for the top content area. The colour I have used for the titles is #85C7FF.

Step 12

Now we are going to be adding a divider between the two paragraphs. On a new layer make a selection of 40 by 180 pixels (however high it is between the top and bottom of the black section). Fill the selection with a linear gradient from #181818 to #1e1e1e using the gradient tool.

Step 13

Duplicate the divider layer and go Edit > Transform > Flip Horizontally. Move the duplicated layer to the right so there is a one pixel gap between the original and the duplicate.

Step 14

Add in some fill in and footer text in the white content area and you are complete.

Final Results

Add some finishing touches, maybe a brush in the background underneath the navigation and you're complete. Click on the image below to see the full version.

Firstly create a new document (File > New) 540 by 440 pixels. Fill the background with the colour #1b1b1b by going Edit > Fill.

Step 2

Secondly we are going to be creating the background of the navigation box. Create a new layer, you can do this by going Layer > New > Layer or using the short cut Ctrl + Shift + Alt + N. Select the rounded rectangle tool and set the radius to 5 pixels. Make a selection of 250 by 300 pixels.

We are now goingt to be filling this selection with a red gradient. Select the gradient tool and set it to radial. Fill the selection with a gradient from the top center (#bc0303) to the bottom center (#3f0000).

Step 3

Thirdly, we are going to be adding an outer glow to our navigation background by going Layer > Layer Styles > Outer Glow and enter the settings below.

Now it should be looking like this.

Step 4

Select the text tool and add in some text for the title of the navigation box. The font I have used is Verdana, Regular, 22pt, Strong, #ffffff.

Step 5

Create a new layer and using the rounded rectangle tool again make a selection of 230 by 250 pixels at the bottom of the navigation background (with 10 pixel spacing on the sides and bottom).

Fill this selection with a dark grey colour (#111111).

Step 6

We are now going to be adding a shine effect to the new layer. So on a new layer (keeping the selection that you had before) go Select > Modify > Contract by 10 pixels.

Fill the selection with a radial gradient from the top left (#ffffff) to the bottom right (transparent) using the gradient tool.

Lower the opacity of the layer to 5%.

Step 7

Now for the text links, using the text tool add in some text to act as links. The font that I have used for this is Verdana, Regular, 12pt, None, #5a5a5a (#ffffff for the hover effect). Set the line height to 30 pt.

Step 8

Next up is adding in dividers to go between each text link. Make selections of 210 by 1 pixel using the rectangular marquee tool between each line and fill with the colour #1e1e1e.

Step 9

The last step is to add in a background colour behind the active link (in my case I've made the Photoshop Tutorials link active) so create a new layer behind the text layer and make a selection of 210 by 30 pixels and fill with #171717.