One of the premium members suggested this tutorial. If you’d like to suggest a tutorial be sure to contact me :)

First off create a new document to house the search box (or add it to one of your existing designs). I’ve filled the background of mine with the colour #2e3033.

Step 2

Using the Rounded Rectangle Tool make a white rectangle with radius 10px and dimensions 200x40px. This will be where we enter our search terms. If you want help aligning the layers check out this tutorial.

Step 3

Using the text tool add in some dummy text. The font styling I’ve used is Arial, Bold, 15 pt, Sharp, #37393d.

Step 4

Now we’ll make a button for the search action. Using the same tool make a 80x40px rectangle.

Step 5

Apply this gradient overlay to the button layer.

Product:

Step 6

Add some text for the button. The font styling I’ve used here is Arial, Bold, 15 pt, Sharp, #ffffff with an outer glow of 30% #000000. I’ve also added another darker rectangle behind the search field and button and a radial gradient in the background. That’s the design part complete, now on to the design to html/WordPress section.

Related posts:

1. Clean Two-Level Navigation
2. Professional Tabbed Box
3. Modern Web 2.0 Web Layout

First off, we need to make a new document; I’ve made a relatively small one for the purpose of this tutorial (600x420px) but yours will probably be for a web design (1000px or so wide).

To make the background less boring I’ve just added in some clouds (foreground and background colours: #33556e and #1e2a38) and applied a motion blur; both are accessible through the Filter menu.

Step 2

Now we’ll make the main, white bar. Select the Rounded Rectangle Tool with a radius of 10px and a fixed size of 550x65px (or wider if your web design wants it). The colour doesn’t matter at this point as we’ll quickly change that. You’ll most likely want it centered so check out this tutorial on aligning objects.

Step 3

Add an outer glow and a gradient overlay to this latest white bar layer.

Product:

Step 4

Chuck in some text with the text tool for your top level navigation. The font I’ve used is Arial, Regular (and Bold), 15pt, Sharp, #000000.

Step 5

Now for the second bar, using that Rounded Rectangle Tool again make a selection a few pixels shorter in width with a height of 50 pixels. Move this new bar layer underneath the white one (in the layers window).

Step 6

Apply these outer glow and gradient overlay settings:

Product:

Step 7

Lastly, add some text for the sub-level navigation (I’ve put in some links for the Tutorials pages). The font I’ve used for this is Arial, Regular, 15pt, Sharp, #7ca1bc. If you’d like to now learn how to code this into html/css then read this tutorial.

Related posts:

1. Clean White Navigation
2. Search Box
3. Dark Navigation Menu

Firstly get out the design that you want to use, if it’s in a PSD file, an easy way to copy all the layers and compress them so that you can straight copy and paste is the short cut keys Ctrl + Shift + Alt + E (there you go, that might be your first four-key short cut – it comes in very handy when coding layouts ;)

The size of the browser window we’ll be adding the design to is 1024 by 686 pixels, so using the rectangular marquee tool (with a fixed size of these dimensions) select the design ready for a step later on.

Step 2

Now we want the frame of the browser to stick our design into, there’s a few online and the one I’ve chosen to use is at teehan+lax. I’ve chosen to use the Safari browser because it looks nicer even though I use FireFox :P But there’s also Internet Explorer in that PSD file too. If you’re using Windows and want to use the Safari frame make sure you have the Lucida Grande Font (another free download too). Copy the frame across to a new document (1200 by 840 pixels are my dimensions used) and edit the page name etc – and I’ve added a dark background.

Step 3

Flick back to your design that we selected back in step 1 and copy & paste it onto the browser frame. Using the move tool align it so that it fits perfectly :)

Step 4

If say you have some neat rollover effects (unlike mine) that you designed in Photoshop and want to display it with a cursor you can use the cursors provided in that downloaded PSD file and move it across to your link.

Related posts:

1. Modern Web 2.0 Web Layout
2. Widescreen Wallpaper from Merging Photos
3. Screenshot Focus Points

Firstly create a new document, I’m just using 600 by 420 pixels like my other tutorials but you might be adding it to a web design so just whatever :) Fill the background with a dark radial gradient, the colours I have used are #2e2e2e and #1c1c1c.

Step 2

On a new layer (Layer > New > Layer) make a selection the width of your document and 50 pixels high using the rectangular marquee tool. Select the gradient tool and set your foreground colour to #fafafa and background to #c4c4c4. Fill your selection with a linear gradient from top to bottom.

Step 3

Apply the following layer styles to the navigation by right clicking it and going blending options.

Outer Glow

Gradient Overlay

Stroke

Result:

Step 4

Now we are going to be adding the text for the navigation. Using the text tool add some text (aligned center).

Step 5

To give the text some depth, apply this drop shadow by going Layer > Layer Style > Drop Shadow.

Step 6

Lastly we’re going to be adding a hover effect to one of the links. So zoom in a bit on one of the links and select the rectangular marquee tool. Make a selection around one of the links like so.

Step 7

Fill the selection in with a linear gradient from #dadada to #969696.

Step 8

Apply this stroke by going Layer > Layer Styles > Stroke.

Step 9

Set this hover layer to 40% and you’re complete! If you’d like to now learn how to code this into html/css then read this tutorial.

Related posts:

1. Sleek Dark Navigation
2. Dark Navigation Menu
3. Clean Two-Level Navigation

Step 1

Create a new document, the size I have used is 1200 by 840 pixels. Fill the background with the colour #0d0d0d.

Step 2

Using the rounded rectangle tool make a shape at the top center of the document 800 pixels wide and 150 pixels high with a colour of #31aa19 and a radius of 10 pixels. This is going to be the basis of our header.

Step 3

Now apply this gradient overlay setting to the header.

Step 4

Now we are going to be adding some texture to the header to make it less boring ;) Firstly select the area of the header (on a new layer) and with the foreground colour set to black and the background colour set to white (the default colours) go Filter > Render > Clouds.

Step 5

Go Filter > Pixelate > Mosiac and set the cell size to 12.

Step 6

Set the blend mode to overlay and the opacity to 50%.

Step 7

To define the edges a bit better (if you want to) go Filter > Sharpen > Sharpen. Repeat this step until you have a desired effect.

Step 8

Using the text tool add in the name of your portfolio site. The font type I have used here is Cambria.

Step 9

Apply this drop shadow effect so that the text stands out a bit better against the header.

Step 10

Add some smaller text below the title and add the same drop shadow except with a distance of only 1 pixel. And that’s the header complete.

Step 11

The next part of the layout is the navigation. Below the header (10-20 pixels space), using the rounded rectangle tool, create a rectangle 1000 by 60 pixels – with the same 10 pixel radius and #31aa19 colour.

Step 12

Apply this gradient overlay to the navigation background.

Step 13

Select an icon for your home button, I am using icons from the dellipack available from smashingmagazine for free.

Step 14

Using the text tool add in the name of the link – in this case ‘home’ (white) and also some text underneath (#69cf54) in a smaller font.

Step 15

Now we are going to be adding a divider on the right hand side (which will be between each of the buttons). Make a one pixel wide selection with a height of 60 pixels and fill with the colour #257d14. Move the selection to the right by one pixel and fill with the colour #33ac1b.

Step 16

Repeat this process for the rest of the links you want for your portfolio site.

Step 17

The next section of the layout is the content area. Using the rounded rectangle tool again, make a rectangle 1000 by 500 pixels below the navigation – this time with the colour white.

Step 18

Using the text tool add in a couple of titles for content sections. The font type I’ve used here is Cambria and the size is 30 pt.

Step 19

Create a selection 980 by 1 pixel using the rectangular marquee tool below the two titles and fill with the colour #dadada. This is just a faint underline below the headers.

Step 20

Either add some dummy text for the about me section for now or add in some information about yourself.

Step 21

Now add some images of your latest projects – I’ve just added my four latest tutorials I’ve written.

Step 22

Our last part of the tutorial is on the footer. Using the rounded rectangle tool make a selection of 1000 by 60 pixels below the content box – the time the colour is #000000.

Step 23

Apply this gradient overlay to the footer background.

Step 24

Lastly add some text in the footer and you have completed the design of your portfolio. To turn the design into a html template to use for your portfolio site follow the coding side of this tutorial.

Related posts:

1. Modern Web 2.0 Web Layout
2. Professional Tabbed Box
3. Dark Navigation Menu

Start a new document 600 by 420 pixels and fill with a dark radial gradient using the colours #181818 and #040404.

Step 2

Create a new layer (Layer > New > Layer) and using the rectangular marquee tool make a selection of 290 by 310 pixels in the center of the document.

Step 3

Fill the selection with the colour #202020 by going Edit > Fill.

Step 4

Apply this outer glow to the layer by going Layer > Layer Style > Outer Glow.

Step 5

On a new layer make a selection of 290 by 40 pixels and fill with a linear gradient from #8ddc0c at the top to #40b80a at the bottom.

Step 6

Apply this gradient overlay to the header background by going Layer > Layer Style > Gradient Overlay.

Step 7

Add in some text for the header using the text tool.

Step 8

Add an outer glow to the text so it is easier to read.

Step 9

Select the text tool from the tool bar and add some text for the links.

Step 10

Select the rectangular marquee tool and make a selection of 290 by 40 pixels behind the second link.

Step 11

On a new layer fill this selection with the colour #171717 by going Edit > Fill with colour.

Step 12

Apply this stroke to the layer by going Layer > Layer Styles > Stroke.

Step 13

Duplicate this layer and move it down to the 4th link, and the same for the last link. To turn this photoshop file into a fully functioning html file check out the code part of this tutorial.

Related posts:

1. Sleek Dark Navigation
2. Clean White Navigation
3. Clean Two-Level Navigation

First off, create a new document – for the purpose of this tutorial I’ve chosen a size of 600 by 420 pixels but you could be adding this to your web design. Fill the background with a radial gradient using the two colours #2f4a5b and #15212a.

Step 2

Create a new layer and select the rounded rectangle tool set with a radius of 10 pixels and ‘shape layers’ (default). Make a shape in the middle 300 pixels wide and 300 pixels high with a colour of #0e161c. To make a fixed size shape click the down arrow on the left of ‘radius’ at the top and go to ‘fixed size’ and enter the values.

Step 3

On a new layer make another shape, but this time the colour is white and the height is 270 pixels. Make it 5 pixels higher than the bottom of the first shape.

Step 4

Now using the text tool add in some text links. The font I’ve used here is Verdana size 14 pt and colour #747474. Make sure that you have the line height set at 30 pt so the next step is easier.

Step 5

On a new layer make a selection 280 pixels wide and one pixel high between the first two links. Fill the selection with the colour #dedede. To fill a selection simply go Edit > Fill with colour.

Duplicate this layer and move it down 30 pixels (Ctrl + Shift + Down x 3). Repeat this until you have an underline for each link. If you did not have a line height of 30 pt then you would of had to move the line down one pixel at a time until it was half way between the two links.

Step 6

Create a new layer and using the rounded rectangle tool again (this time set it to unconstrained not fixed size) make a shape similiar to the one below with a colour of white.

Step 7

Lastly, add in some text for the tab parts. The font is Verdana, and the colour I’ve used for the active tab is #15212a and for the others the colour is white. If you’d like to learn how to code this design using html and jQuery follow the code side of this tutorial.

Related posts:

1. Simple Professional Logo
2. Modern Web 2.0 Web Layout
3. Sleek Dark Navigation

Firstly we need to create a new document, the size I have chosen is 1200 pixels by 840 pixels because it is big enough and when halved it fits nicely on PSDCORE. Fill the background with the colour #f7f7f7.

Step 2

There are going to be quite a number of layers in this tutorial, so I suggest that you label them and sort them into groups. Firstly create a new layer and make a selection of 1200 by 30 pixels at the top of the document and fill with the colour #151515.

Step 3

Using the text tool add in some text links in the top right corner. The font I’ve used is Arial, and the colour #8a8a8a. If you can’t see this text very clearly or other parts of the layout, go down to the bottom and go to the full size view.

Step 4

On a new layer make a selection of 1200 by 100 pixels underneath the top (and one pixel down). Fill the selection with a radial gradient using the two colours #353535 and #1d1d1d.

Step 5

Apply this stroke by going Layer > Layer Style > Stroke.

Step 6

On a new layer add in your logo or just create a simple one. I’ve made a circle with the elliptical marquee tool and filled it with a radial gradient using the two colours #02a2e0 and #246f99. There is also a simple gradient overlay and outer glow.

Using the custom shape tool I’ve also added a little white shape in there.

Select the text tool again and type in the name of your site. The font I’ve used is Adobe Caslon Pro and applied the same two layer styles as the logo.

Step 7

Now we are going to be adding a search box on the right hand side, on a new layer select the rounded rectangle tool and set the radius to 10 pixels. Make a shape (fill colour white – #ffffff) like the one below.

Add some text like ‘Search…’ to the box. The font is Arial and colour #6c6c6c.

Using the custom shape tool again make a magnifying glass icon on the left of the text using the same colour – #6c6c6c.

Step 8

Next up is the navigation buttons for the categories. Create a new layer and select the rounded rectangle tool (still at 10 pixel radius) and make a selection with the two curved corners on the top of the background and the bottom below. Fill this selection with a gradient from #02a2e0 to #5acffc using the gradient tool set to linear.

Select the area of the background behind the logo (Ctrl + Click the layer’s icon) and invert selection (Ctrl + Shift + I) and delete it (delete key on your keyboard). This leaves just the top part of the button – the part we want.

Using the text tool add in some text. The font here is Arial again and the colour is white.

Repeat this process for a button beside it – this time the gradient is from #d7d7d7 to #fcfcfc and the colour of the text is #2f2f2f.

Now you can either repeat the process again a couple of times for the other buttons or just duplicate the layers and move them across (the short cut to duplicate a layer is Ctrl + J).

Step 9

We are now going to be adding a featured content section – so it needs a background that stands out. Create a new layer and make a selection of 1200 by 200 pixels – again with a one pixel gap. Fill this selection with a radial gradient using the two colours #02a2e0 and #246f99.

Step 10

Apply a stroke to this featured content background. You can adjust layer styles for a layer by right clicking it (in the layers window) and going blending options. This gives it a little highlight which makes the background stand out that little bit more.

Step 11

Add in some text for the featured content area. Go grab some dummy text from lipsum.com if you do not have anything to stick there yet just to make it look more complete. The font is again Arial and white.

Step 12

Now that we have finshed the header we can begin on the content. Add a couple of bold titles using the colour #151515.

Step 13

On a new layer make a selection using the rectangular marquee tool a couple of pixels high under each title and fill with the colour #d7d7d7.

Step 14

Add in some dummy text and images. The font is Arial and colour #464646.

Step 15

Our last task is the footer, on a new layer make a selection 1200 pixels wide and 140 pixels high at the bottom of the document and fill with the colour #242424.

Step 16

Apply this stroke to the footer.

Step 17

Last of all, chuck in some copyright details and links to your pages. The font here is Arial, and the colours are white and #5a5a5a. Now continue this tutorial by coding it up into css & html in this tutorial.

Related posts:

1. Portfolio Web Layout
2. Professional Tabbed Box
3. Dark Navigation Menu

Firstly create a new document – the size I’ve chosen to use is 600 pixels wide and 210 pixels high. Although if you are turning this into a web layout, you might want to have it larger. Fill the background with a dark radial gradient, I’ve used the two colours #282c30 and #1b1b1b.

Step 2

On a new layer make a selection of 550 pixels by 50 pixels in the middle of the document. The easiest way to make this selection is to use the rectangular marquee tool and use the fixed size option.

Step 3

Select the gradient tool and fill the selection from top to bottom with a linear gradient using the colours #161616 and #0a0a0a.

Step 4

Now apply an outer glow to this layer using these settings. Right click the layer and go blending options to adjust the layer styles.

Step 5

We are now going to be adding a shine effect to the navigation bar. On a new layer make a selection on the top half using the rectangular marquee tool (fixed size of 550 pixels by 25 pixels).

Step 6

Fill the selection with a linear gradient from white to transparent. Set the opacity to 10%.

Step 7

Now we are going to be adding a highlight to the bottom of the bar to give it some colour. Make a selection of 550 pixels by 3 pixels at the bottom of the bar.

Step 8

Fill the selection with the colour #74ab00. To fill a selection simply go Edit > Fill with colour.

Step 9

Using the text tool add in some text to act as links. The font I’ve chosen for this is Verdana.

Step 10

Lastly, we’ll be adding a hover effect for one of the links. Create a new layer. Using the rectangular marquee tool make a selection around one of the links.

Step 11

Fill the selection with a linear gradient from white to transparent. Set the blend mode to Overlay and the opacity to 75%. To learn how to turn this .psd file into an html file read this tutorial.

Related posts:

1. Dark Navigation Menu
2. Clean White Navigation
3. Sleek Dark Button