Here I’m going to show you how to make the website original design where you can put your portfolio.

Firstly, you’ll have to create a new document in which you can make this web site. For this tutorial I’m going to be using a size of 1000×700 pixels with the default resolution (DPI) of 72. Then you need to find the pattern to add on the background. I found this one. Also feel free to use your own patterns. Open up the file and apply Edit > Define Pattern to save this picture as pattern, after that go back to our main document and use Paint Bucket Tool (just use Pattern mode instead of Foreground).

Then press Ctrl+Shift+E to desaturate pattern.

Apply Color Overlay layer style to the background layer.

See the result below:

Ok, we are done with background. Move to the next step. I would like to create the window for content. Create a new layer, then select the Rectangular Marquee Tool to make selection as on my picture below and fill it with color of #f4f4f4.

Remove selection with Ctrl+D. Then I would bring it paper view. Use the Elliptical Marquee Tool make round selection as on my picture below and press Delete to clear selected area.

Hold Shift button and press Right Arrow button two times to move selected area 20 pixels right and press Delete again. Do the same things until u finish white paper area.

Remove selection with Ctrl+D and move to the next step. Time to divide worksheet area on three main parts: Web Sites, Logotypes and Icons. Select the Line Tool and line weight about 4 pixels, then draw out the line with black color. After that set up opacity about 15% for this layer.

Add two lines more.

Time to add labels. How we can do this? Let me show you. Create a new layer and create the selection using Rectangular Marquee Tool. Fill selected area with color of #e04e21.

Then select the Polygonal Lasso Tool to create another one selection as was shown on my picture bellow.

Then use the Burn Tool (Brush: 45 px, Range: Midtones, Exposure: 30%) to add a dark spots to the selected label area.

Then use the Dodge Tool (Brush: 45 px, Range: Midtones, Exposure: 30%) to bring this label volume form.

After that invert the selection with Ctrl+Shift+I and make dodge work a little bit more.

Remove selection with Ctrl+D and press Ctrl+T to rotate the label and then apply Edit > Transform > Warp to transform it a little bit.

Ok, now time to add the shadow to the label. Apply Drop Shadow layer style to current layer style:

Then right-click on the layer thumbnails panel and select Create Layer.

Go to the layer under and apply Edit > Transform > Distort to transform it a little:

Then I would like to add a title. Select the Horizontal Type Tool and write out the name of the label.

I used Bernhard Modern font as my font choice. Now rotate the text a little using Ctrl+T.

First label is ready. Add two more labels in the same way.

Ok, move to the next step. We need to add the content. I went to Google Images and found some picture as website example there. Feel free to download it from here . Open up the picture and crop it with Crop Tool:

Then bring it to our main canvas and reduce a little bit after.

Apply Inner Glow layer style to this layer.

The result should be next:

Now I need to add the name of project with a short description. Select the Horizontal Type Tool again and write out some text in few lines using color of #45454 and Tahoma font.

Add more content in the same way. Logo picture you can download from here and icon picture you can download from here.

Ok, after that move to the next step. I would bring the logo to our portfolio. Select the Horizontal Type Tool gain and write out the text using the color of #b2d763 and Bernhard Modern font again.

After that apply Drop Shadow and Gradient Overlay layer styles to the text layer.

You can see the result on the picture below:

And the last one th9ng that we need to add is contact text on the bottom of website.

I used Tahoma font again and selected text colors as #f4f4f4 and #d5ea9f. Ok, we are dome with creating website for our portfolio. Hope you have the same good result as me!

In this lesson I will show you how to create an excellent navigation bar (menu) for your website, which you may use further as finished design.

In the beginning let’s create a background, on which we will put our menu bar. Create a new document with size of 800×600 px and fill it with white colour.

Then make selection with Rectangular Marquee Tool and fill selected area with colour of #78b000.

Remove selection with Ctrl+D. At this point we start to create menu bar. Select the Rounded Rectangle Tool (Radius: 15px) and make some form with any colour:

Set opacity fill up to 0% for this layer and apply following Blending Options for current layer:
• Drop Shadow
• Inner Shadow
• Outer Glow
• Inner Glow
• Bevel and Emboss
• Gradient Overlay
• Satin
• Stroke

As the result we have got the following button:

Now duplicate it five more times and locate as it shown at the picture bellow:

Now, we need to make these buttons coloured. To do this change some Blending Options for each button:
For second button:
• Drop Shadow
• Gradient Overlay

For third button:
• Drop Shadow
• Gradient Overlay

For fourth button:
• Drop Shadow
• Gradient Overlay

For fifth button:
• Drop Shadow
• Gradient Overlay

For sixth button:
• Drop Shadow
• Gradient Overlay

We have got the following result for each button:

After that we need to add the text to each button. Get out the Horizontal Type Tool and type the title for one button with white colour and using the Myraid Pro font. Try to get the same result as it’s shown on my picture bellow.

Then apply the following Blending Options to this text layer:
• Drop Shadow

Get a shadow from the text.

After that copy text layer five more times using Ctrl+J and locate copied layers above all buttons. For each button type own title as on picture below:

At this point we finished our menu. Now, I think, we should add the logo to finish off the site design.
Select the Horizontal Type Tool and write out the name and company slogan with white colour and using the AvantGarde Md BT font.

Time to add the logo. Select the Custom Shape Tool and choose the standard form from the palette:

And now draw the puzzle in the left bottom corner of canvas:

Now, rotate it a little bit using Ctrl+T:

Add a few shapes to our logo in the same way:

And the last step we need to do is add barely perceptible logo to the background behind the buttons. Copy three of layers with puzzle and apply the following Blending Options to each of copied layer:
• Color Overlay

Now, you get something like this:

After this move all grey copies of puzzle under layers with menu and proportionally increase to the following size like on picture below:

You will not lose the quality while increasing because all of these shapes are vectorial. Our lesson is over now. We have got excellent corporative design, haven’t we?

(what we’ll be designing – click for larger)

1. New Document, Create Background

Alright, let’s start by creating a new document in Photoshop, in which we can design our website template. I’ve used a document sized 960 x 1100 pixels, since most people browsing a clan website won’t really be using the 800 x 600 resolution. After creating your document, fill the background with a nice mid-grey color, (in this case I used #6c6c6c).

After filling your background with a solid color, you can give it a bit of texture by applying a pattern of some sort, or simply applying Filter > Noise > Add Noise with an amount of about 2.0.

View a small article I wrote about pattern resources here.

2. Design the Header/Banner

Alright, now we need to make a header. Start by finding a screenshot or some renders from the game your clan plays, or if you’re just designing this for the sake of … designing, then how about you just use this wallpaper of Command and Conquer 3 Tiberium Wars. Copy the wallpaper onto your canvas and crop it to a suitable banner size. I also made the corners for my banner rounded.

In the above image you may notice that it looks like I’ve touched the image up a little bit, well, I did. You can too by using the Burn Tool to darken up a few areas, then the Blur Tool to blur some of the background action.

I finished up the banner by adding in some grunge brushing to give nice detail. You can download the grunge brushes that I used from Misprinted Type. When adding in your grunge brushing, use very dark brown colors that you can sample from the wallpaper you’ve used for the banner.

(click for larger)

Let’s finish up with the header by adding in your clan name/description/slogan/whatever. Start by getting out the Horizontal Type Tool (the regular text tool, of course) then writing out your clan name in a size about 30 pt, then write out what your clan is, or your description underneath. This is what I managed to get using the font Myriad Pro:

Need free fonts? Try UrbanFonts.com. Looking good so far, but the text isn’t very easily readable. You can fix this problem by doing a little bit of soft brushing on a layer underneath the text layer. I used a couple of dark browns, with varying opacities.

Alright, we’re pretty much done for the header, what do you think? Feel free to add in some extras if you can think of any!

3. Navigation Bar & Buttons

Start by making a new layer. Now find and get out the Rounded Rectangle Tool, it’s with the Custom Shape Tool somewhere.

Set up the settings for this tool as shown below:

Now, in your new layer, draw a rounded rectangle onto your canvas, this will be the main navigation bar. If you need to you can use the Rounded Rectangle Tool to clean up the bar a little bit, such as if you need to make it wider or thinner.

Now, you need to lock the transparent pixels for your navigation bar – you can do this in the layer’s palette, don’t worry, there’s a screenshot below After locking the transparent pixels, get out the gradient tool and set it to a very dark gradient (colors used: #131212 & #3c3c42), after getting your gradient ready, you can drag the gradient inside of your navigation bar and it will only fill the pixels. You can unlock your layer now.

After all of this, it’s time to apply some layer styles to the navigation bar. I used the following:

1. Inner Shadow
2. Bevel and Emboss
3. Bevel and Emboss — Contour
4. Pattern Overlay (download X pattern)

Your navigation bar should now look pretty much like this:

Looking good, but could do with a few nice touchups. Start by creating a new layer, then selecting your navigation bar pixels (hold ctrl and click the layer’s thumbnail) after selecting the navigation bar, contract the selection by one pixel. After doing this, draw a white to transparent gradient inside of the selection.

Change the layer mode for this layer to either Overlay or Soft Light, and you might need to lower the opacity, depending on how strong your gradient was.

Again, select your main navigation bar, but this time you don’t need to contract the selection. In a new layer, draw white to transparent gradient from the top to the bottom of your selection. Now, cut your gradient in half (my navigation bar was 46 pixels in height, so I cut the bottom 23 pixels off)

Again with the layer modes/opacities! I changed the layer mode for this layer to Soft Light and lowered the opacity to 20-40%. Alright, the navigation bar is complete, now it’s time for some buttons.

Get the Rounded Rectangle Tool out again and make a smaller, button-sized shape (be sure you’re on a new layer!)

Looking pretty good so far, time for some layer styles…again! Apply the following layer styles to your new button layer:

1. Inner Shadow
2. Outer Glow
3. Inner Glow
4. Bevel and Emboss
5. Gradient Overlay
6. Pattern Overlay (download warning tape pattern)

And now your button should look pretty much like this one:

Pretty nice, eh? You can finish this step off by simply adding text to the button, duplicating both layers and moving them overlay, etc.

The font I’ve used in the above image is a free font called “PF Ronda Seven”, and you can download it for free from DaFont. I also applied this Outer Glow to each of the text layers.

View the complete design so far.

4. Categories/Sidebar Section

Before we do the categories/sidebar section, add in ‘Home > Recent News’ underneath the navigation bar, using a font such as Tahoma or Arial, and a really small size (11 pt), this is what I came up with:

Alright, now it’s time to make the categories section. For this you can either just remake the navigation bar, but this time make it shorter in width (200 pixels) or you can duplicate the original navigation bar layers and just cut them down. It would probably be best if you just created another bar using the Rounded Rectangle Tool, then copied all of the layer styles and effects over.

You want to come up with something like this:

After making the bar, you want to make a container kind of area for the links and stuff, so duplicate your main bar layer, move it underneath the layer then fill it with black. Move your duplicate layer down about 160 pixels or so, then stretch it upwards, as shown in the below image.

Hopefully the above image explained to you what you need to do to make our categories container area. If not, I’m sorry I couldn’t explain it any better, but if you have any questions please feel free to leave a comment!

After making your container area, lower the opacity for the layer to about 20%.

Now it’s time to populate your categories container with … well, categories. I simply copied/pasted the categories from my website here, but you might want to do something else with this sidebar section.

What you’ll want to do now is duplicate all of these layers, move them down and simply change the text layers. Some good examples are: Sponsors; Recent Matches; Member List.

View the complete design so far.

5. Content/News Updates Area

For the news/content area, you could simply copy the navigation bar or sidebar section over and change a few things around (stretch to fit), which you can do if you want, but I think the updates area needs a little bit more distinction from the rest of the template.

I did end up duplicating the sidebar section and moving it over, I then stretched it to the correct size and changed a few layer styles to make it look a little bit different.

1. Bevel and Emboss size: from 8 to 11.
2. Pattern Overlay opacity: from 10 to 20.

You want to come up with something like this:

(click for fullsize)

The font I’ve used in the above image is Arial, size 18 pt. You might want to use something a bit bigger than this, maybe even a different font (try Georgia)

Fill out your updates area with some dummy text. Go to www.lipsum.com for the official ‘lorem ipsum’ dummy text.

I just thought of this actually, you could also add a little bit of grunge to each of your heading bars, it would be a nice touch.

6. Finishing the Design

Well, to finish up this design, I think you’ll need to make a footer area, and just generally touch up the rest of the template, add in some extra features if you can think of anything, but you’ve pretty much done with the general/basic design.

Maybe add some Google Ads into your design? Probably not the best practise for a clan website template.

Well, thank you for reading this tutorial everyone! I hope you enjoyed it and learned a thing or two. If there was a part of this tutorial I didn’t explain very well, or you just need a little bit of help, you can download the PSD file from this tutorial at the bottom of this article. (4.27mb)

Or of course you can leave a comment using the comment form below!

(4.3mb)

(tutorial result. click for larger image)

1. New Document/Canvas

Alright, let’s start off by creating a new document in which we can design our template. For this tutorial I’ve used a document size of 900 x 1000 pixels, but you can use whatever size you want really, just keep it around the general template size.

After creating a new document, you’ll want to set up a nice background for your website design. For this I’ve used a background color of #003466. After filling your background with a solid color, you can give it more detail by applying Filter > Noise > Add Noise with an amount of about 0.5-1.5 (one of the current trends in web design is applying noise to the background), and you can also add detail to the background by adding a dark gradient at the top, then lowering the opacity. For this you can either use a black to transparent gradient, or a black to white gradient, although if you use the latter option, you’ll need to change your layer mode to Multiply and lower the opacity!

Now you’ve created your background, move onto the next step and create a container area for the rest of the template.

2. Template Container Area

You’ll need a simple container area for your website design for all of your content and such to go into. You can make a really simple one by simply making a white rectangle in the middle of your template, or you can go a little bit more complex and make a nice, round-edged container. You can make a round-edged rectangle by either using the Rounded Rectangle Tool or using the channels, you’ll probably just want to get the rounded rectangle tool and create one though.

You’ll want to make sure you set up your settings for the rounded rectangle tool aswell – similar to mine if you want.

Finished the container area, unless there’s something more you want to do? For more detail (might not be the most efficient) you can add an outer glow (shadow) to the container area, view my Outer Glow settings if you want to add a shadow to the outside of the container.

3. Footer Section

Normally you’d wait till last to add in a footer, but in this case we’re not, I think it’s best we add it in now. Firstly, start by making a selection, containing all of the width of your container area, but only about 30-40 pixels of the height, as shown in the screenshot below.

Simple enough. After creating your selection, similar to mine shown above, right-click your selection (with your selection tool still active) then click Layer via Cut, after doing this, your selected area will be on a separate layer. After making your footer section separate, right-click your layer and go into the Blending Options, click Gradient Overlay and apply these settings.

Now, finish your footer area off by simply adding in your copyright notice, and some links if you’re into adding links into your footer. Some people also make an extra-large footer area and add in things like Recent Posts, Archives, Blogroll even. But I’m not really into that kind of thing. So, you’re done for the footer area!

If you’re wondering how my design is going so far, you can view the design so far here.

4. Header/Logo/Navigation Area

Now we’re going to create the header area where the logo, and sometimes some navigation buttons go. Start by making a rectangular selection all the width of your container area, but only about 50-100 pixels in height, make this selection at the top of your container area.

My selection was 802 x 59 pixels to be exact. After making your selection, get out the gradient tool and make a black to transparent gradient from the bottom of the selection to the around middle area, like mine.

After making your gradient, change the layer opacity to around 10-20%. Now you should add in your website name/slogan/description into the left corner, if it doesn’t fit, you’ll want to move the gradient layer down a little bit. I managed to come up with this:

The font I’ve used above is called Myriad Pro, but I’m quite sure it’s a commercial font, so you might have to use something different. A good alternative to this font would be Arial, which is a free font that should come with Windows The colors I’ve used in my text logo are #f1360b (orange) and #969696 (grey).

Now, create some navigation links/buttons over in the right corner of your header section. I used the same font as before (Myriad Pro) with the color #969696.

You’ll also need to space each of the texts apart a little bit, you can easily do this by just pressing the space bar key more than the usual once After making your links, you can make things more interesting by adding in a rollover effect. Start by making a selection (all of the height of the bar, from the top of the container to where the gradient stops) and half of the space between the links.

Now fill your selection with a color – I used the bright orange that I did before for the text logo (#f1360b), after filling your selection, you may want to apply this Gradient Overlay to give more of an interesting effect! Finish off by changing the ‘Home’ text to white (#ffffff)

Alright, not bad! I think we’re done for this section aswell.

5. Website Banner

This is a pretty easy step, all you have to do is add in a banner graphic underneath our header. Firstly, you’ll need a stock photo of some sort, willing to pay? Then I recommend iStockPhoto or DreamsTime. Not able to pay? Not a problem, try stock.xchng, or YotoPhoto! After you’ve got the photo you want to use in your banner, copy/paste the image to your template document. Create a selection underneath your header then crop your image to the selection (image > crop)

I added the lame ‘learn. inspire. create.’ part, although I didn’t come up with that slogan. The size of my banner when I finished with it was 601 x 140 pixels, and I also lowered the opacity for the stock photo layer to 50% to give it a little bit of extra effect … sort of. Click here to view the full design so far.

Alright… well, we’re pretty much done for this part, did you do alright? It’s pretty easy, just get a photo you like and turn it into a little banner! Preferably something related to your website, by the way.

7. Navigation/Sidebar Section

So, let’s make a sidebar. Start by making a selection down the left side of your design, using the Rectangular Marquee Tool. My selection ended up being 200 x 809 pixels in size, leaving one pixel spaces where necessary (near footer, and near header, you should leave one pixel spaces)

After making your selection, fill it with a nice, soft-blue color, the hex code for the color I used was #3e72a4. After filling your sidebar container with the suitable color, start adding some text! I started by adding the text ‘Website Menu’ in Myriad Pro near the top of the sidebar, then I added in a nice ornament underneath.

You can find the above shape in the ‘Ornaments’ set that comes with Photoshop. I also added in this Drop Shadow to both of the layers.

Now add in some navigation links! I used the font Arial, with a size of 14 pt/px, also using the color white (#ffffff)

Repeat this step for and ‘Our Partners’ section in the sidebar, cut a one pixel line after the our partners section, then make a ‘What’s New?’ section. See what I’ve done here:

Alright, not bad so far, there’s not much more we can do for the sidebar though. If you’re a little bit lost, you can click the above image for a larger preview.

8. Content/News Updates Area

Alright, the most important part now, the content/news area. Start by writing out a headline in your large blank area, similar to mine:

Now some random text underneath, a good place to get filler text is the official Lorem Ipsum website.

View our website design so far.

Now you can add whatever you want to the content area, you can add another heading like ‘Who are we, what are we about?’, whatever. It all depends on what website the design is for really, what theme you’re going for. Add in a Google Ad maybe? That probably won’t look very professional actually.

(click for larger)

Anyway, I hope that you enjoyed this Photoshop tutorial! Thanks very much for reading, and I hope you were able to follow this tutorial through easily. If you need to, you can of course download the PSD file from this tutorial from here: Simple but Professional Website Design PSD (1.16mb)

1. Introduction

Before doing this tutorial, you should have finished the previous tutorial first. If you have, open up the PSD file.

2. Latest Work Sidebar

Now after you’ve got the last PSD file open, duplicate one of the button layers and move it downwards, change the text and all to correspond to what we want.

2. Recent Work Sidebar

Next thing to do is create a new layer then make a rectangle selection beneath our button.

My selection was 140 x 100 pixels. Fill this selection with a light yellowish color, #efebdb. Now use a grunge brush to erase away some of the edges of this box.

Make the same sized selection again then contract the selection by 2 pixels (Select > Modify > Contract), fill the selection with a darkish brown color. (#5b5234)

Next, change the layer mode for this darker rectangle layer to Linear Burn and lower the opacity to around 20-35%.

Select the darker rectangle again, then again contract the selection by 2 pixels. Add a picture inside of this selection.

Looks pretty cool huh? Now add in a smaller box underneath this first one, in this add in some text relating to the above image.

I used exactly the same method as above to make that smaller box. Duplicate all of the layers you just made, move them down then change the latest work image and text.

3. Updates Area

Make another one of those navigation buttons to the right of the sidebar, call the number: ‘06′ and the text: ‘Recent Updates.’

Now basically just repeat the last steps. Create a new layer, fill a large selection with the light yellowy color (#efebdb), apply grunge brushes, add a darker box over the top.

See how we’re going.

Lastly for the updates box, add in some text and maybe a filler or two.

Blending image:

4. Footer Bar

Once again, repeat the step where you make a light grungy box near the bottom of the template..

Make a selection around your footer bar then contract the selection by about 2 pixels (Select > Modify > Contract) after contracting the selection, make a new layer then fill the selection with a gradient of the same colors from your header.

Gradient colors: #a32c1e and #f5d57c.

Now on a new layer do some grunge brushing inside of the gradient bar selection.

For the above brushing I used similar colors to the gradient, then I lowered the opacity to about 30%. A little more grunge brushing:

I used the layer mode Overlay for the above brushing. Lastly for the footer, add in your text. I used Tahoma, 12pt, Bold, White.

After writing out your text, to give it a cool effect apply this Outer Glow.

That’s all for this tutorial, thanks for reading. If you need to, you can download the PSD file from this tutorial from here.

Tutorial result:

Click above image for full view.

Resources Used

Stock photos:

• Cool Speaker Stock (download cutout render)
• Green Abstract Lights

Patterns:

• 16 x 16 Scan Line
• Background Pattern
• Background Texture
• Bubbles Pattern

Brushes:

• Grunge Brush Set #1
• Grunge Brush Set #2

1. The Background

Start by creating a new document in Photoshop. We’ll be making our website design in this document. I used a size of 760 x 760 pixels.

Now fill the background with a light yellow-brown color. I used #d7ceaf. Next, create a new layer then fill the canvas with the 16×16 Scan Line.

Note: When you filled your canvas with the pattern, you’ll notice they came out black, so press ctrl+I to invert them. After filling your canvas with the scanlines, change the layer mode to Overlay and lower the opacity to around 40-50%.

Merge your two background layers together so you’ve only got one layer. Now apply Filter > Noise > Add Noise with the following settings:

Now, lastly for the background, grab the Background Texture and apply it over the background.

Change the layer mode for this layer to Overlay and lower the opacity to around 25-40%, depending on what looks best.

Looking alright now.

2. Header Design

Onto the header. Create a new layer then make a large selection near the top of the document (this is the selection for your header). Note that my selection was around 700 x 200 pixels in size. Fill the selection with solid white.

Click above image for full view.

Apply this Outer Glow to your banner layer. Select the main banner layer again (ctrl+click layer thumb) then contract the selection by about 4 pixels (Select > Modify > Contract).

On a new layer, fill this selection with a nice, vibrant Radial Gradient. The colors that I used for my gradient were #f5d57c and #a32c1e.

Go back to the white border layer of the banner. If you know about layer masks, add a layer mask to your border layer then add some grunge brushing with some of the brushes I’ve provided with this tutorial.

If you don’t know about layer masks, just get the eraser tool, select a grunge brush then erase some of the corners of the white banner.

Next, apply the following layer styles to the gradient banner layer:

1. Inner Glow
2. Stroke

Click above image for full view.

Get the Green Abstract Lights stock photo, drag it over the banner, resize it then crop it to the banner’s size.

With a large, soft eraser erase away some of the corners, then blend it in by changing the layer mode to either Overlay or Soft Light, then lower the opacity if you think it needs it.

With some of the grunge brushes I’ve given you to download, in the corners of the gradient banner do some grunge brushing. If the grunge brushing looks a bit dull you can change the layer mode to Soft Light or Overlay.

(left)

(right)

Get out the cool speaker stock photo and drag it onto the canvas. Resize it so it just fits over the headers border.

Use the Polygonal Lasso Tool to make a selection around the entire speaker then delete the outsides. You don’t have to keep the shadow, I edited mine later on anyway.

I added in a little bit of a different shadow with a brush, then I resized the speaker slightly.

Lastly for the header graphic I added in the text. I used the font Standard 07_53, sizes 24pt and 32pt, No Anti-Aliasing.

Lastly I applied the following layer styles to the text layer:

1. Drop Shadow
2. Inner Shadow
3. Gradient Overlay

And at last, we’re finished for this step!

3. Navigation Buttons

Start by creating a group underneath the header group/layers, then make a new layer inside of the group. Now make a selection partially underneath the header for your first button. My selection was 36 x 60 pixels in size.

Fill this selection with a dark brownish gradient. My gradient colors were #6d5e39 and #51462a.

After drawing your gradient apply the following layer styles:

1. Inner Glow
2. Pattern Overlay (Bubbles Pattern)

Now you’ve done all that, either add a layer mask and do some grunge brushing on the bottom of this button, or just use the eraser tool to erase away some of the bottom. This is how mine turned out:

Next thing to do is add in some text. First I added in the text ‘01′ in the middle of this button. Font details:

• Tahoma
• 12pt
• Bold
• Anti-Aliasing: None
• Color: #ffffff

Lower the fill opacity for this text layer to about 40-55%, then apply the following layer styles:

1. Inner Shadow
2. Outer Glow
3. Gradient Overlay

And now my text looks like this:

Now the button is finished, let’s add in the actual link text. First, add in some more text to the right of the button. I used all the same details as the last text except the color #ba5e38.

I applied the following layer styles to this text layer:

1. Inner Shadow
2. Outer Glow
3. Gradient Overlay

And your text should look like this:

Duplicate all the button layers, move them along to the right, edit the text, repeat.

We’re finished for this part of the tutorial. Thanks for reading, I hope you enjoyed it! For learning purposes only you can download the PSD file from here.

Grungy Web Layout Part 2

(click for larger preview)

1. New Document

First of all, let’s start by creating a new document for the template we’re designing. I’ll be using a rather small document size of 780 x 880 pixels for this tutorial. So, now you’ve created the new document, fill the background with a nice color. I used a dark-reddish color, #4f0100.

2. Designing the Sidebars

Now we’ll create the candy-themed sidebar thingies

First, start by making a selection with the Rectangular Marquee Tool, about 10 x 80 pixels. Be sure you’re on a new layer then fill the selection with white.

Next, after you’ve created your base bar, create another layer then get out the Polygonal Lasso Tool.

Holding shift, click around and make a diagonal selection like the one shown below:

Now, be sure you’re on a new layer, fill your newly-made selection with a bright-red color. Now delete the edges so that your newly-made shape is constrained to your base bar.

Duplicate your new line layer and move it up about 10 pixels (shift+up arrow key)

Duplicate again and move it up 10 pixels again. Repeat this 2-3 times.

Merge your all of your ‘candy stripe’ layers together and apply this Gradient Overlay, you should now have a result pretty much like this one shown:

Next, apply this Gradient Overlay to the main white rectangle layer, it just gives it a little bit of detail:

Now we need to cut our bar up and make it into a pattern that tiles seamlessly. Make a selection the whole width of your bar, but only of about as much as mine in height:

Do you see how mine words? I’ve left two pixels of the top line off, and got 2 pixels of the top of the bottom line in my selection. You could also do it whatever way you want really, but just make sure it tiles! Cut this selection out, duplicate it, move it downwards, merge, repeat. You should now have a sidebar similar to mine:

Duplicate your sidebar, flip it horizontally (Edit > Transform > Flip Horizontal), then move it to the right side of the template. I also applied an Outer Glow to both of my sidebar layers.

3. Designing Your Header Bar

Moving along, start by creating another new layer, then make a rectangular selection completely in-between both the sidebars, fill it with a slightly lighter-red color than what you used in the background. (#690806)

Now, to make the header bar. Create a new layer then make a selection approximately 738 x 60 pixels in the middle of the document at the top. (note: you might want to keep your layers in layer sets/groups so you can keep things in order)

Fill the selection with a yet lighter-red. (#7e0a07)

Next, apply the following layer styles and settings to your header bar:

1. Inner Shadow
2. Gradient Overlay
3. Pattern Overlay (download .pat file)

And now your header bar should be looking like this nice thing:

Create another new layer then a selection half the height of the header bar, fill this selection with a white to transparent gradient, this is for a nice shiny highlight.

Change the layer mode for this gradient layer to Soft Light and lower the opacity to around 15-30%, it really depends on how it looks and how you want it to look.

Again, create a new layer, then make a 1px white line across the top of the header bar, this is really optional though, I don’t think anyone’s going to notice it!

Change the layer mode for this layer to Soft Light and lower the opacity to about 30-50%.

Lastly for the header bar, we need to add in some text. Get out the Horizontal Type Tool (regular text tool) and write out something like “Christmas Site” with a cursive/script-style font (in this example I’ve used a font called Cornet, but it’s a commercial font, not a free one, sorry.)

In the above image I’ve used #edb27a for my font color, and if you don’t have any decent script/calligraphy fonts, you can of course download some from DaFont: DaFont Calligraphy Section.

Right-click your text layer, go into the Blending Options, and apply the following layer styles/settings:

1. Drop Shadow
2. Gradient Overlay

And now your text should look like this:

Looking pretty nice so far, but now we need to add some navigation buttons/links. Get out the Text Tool again and write them out, using a small-sized, web-based font. Remember to set the Anti-Aliasing to None when making regular text/links.

In the above image I’ve used: Tahoma, 11pt, Bold, #ebbe97, and Anti-Aliasing set to None.

4. Navigation Area

Let’s make the navigation box/buttons. Firstly, start by creating a new layer, then make a large, rectangular selection underneath the header bar (with only about 1 pixel between them).

Now, fill this selection with a relatively bright-orange color, I’ve used #d53900 here. You can in fact fill the selection with any color you want, but for this tutorial you can use what I used!

After filling your selection, apply the following layer styles to your navigation box layer:

1. Inner Shadow
2. Gradient Overlay

And now your box should look like this:

Looking good! Now I’ve added in a little bit of grunge brushing on the left side of the box, for the sake of nice little details. For some nice grunge brushes you can go to PhotoshopBrushes.com and download some of their free brushes (they have paid ones aswell, just don’t get sucked in!)

A few other good brush resources are:

1. Brusheezy
2. Misprinted Type
3. DeviantART

I love ‘em!

So, after you’ve done a little bit of black and white grunge brushing inside of your navigation box, change the layer modes to either Overlay or Soft Light and lower the opacity to around 40-60%, this will make your brushing blend in a little bit nicer.

Can you see it? Well, I can at least.

Next thing to do is add in the actual buttons. So, all on the same layer, make some button-sized rectangles 1px apart, just like mine shown here:

My selections were 180 x 26 pixels in size. Again, go into the Blending Options for your buttons layer and use the following settings:

1. Blending Options: Main
2. Inner Glow
3. Bevel and Emboss
4. Gradient Overlay
5. Stroke

And now, your buttons should look like this!

Very nice so far. Lastly for these buttons you need to add in the navigation text.

In the above preview I”ve used Tahoma, 12pt, Bold, #ffffff. Not bad so far, huh?

5. Designing the Header Graphic

So let’s make that header graphic for the template now. Firstly, create a new layer then make a selection the same height as the navigation box, and all of the width left in the template (other than 1px at each edge, that is).

Fill this selection with a nice sea-blue color (I’ve used #1d78c4).

More layer styles. Apply the following layer styles and settings:

1. Inner Shadow
2. Gradient Overlay

Should be resulting in something nice like this:

Again with the grunge, I added a little bit in the top left corner of the banner graphic. I then changed the layer mode to Overlay and left the opacity intact.

Now I’ve added in some snowflake shapes for a nice detail. For these, get the Custom Shape Tool out and use the snowflake shapes on a new layer.

And here are the shapes:

If the shapes aren’t there for you, click the little arrow on the right of the box and select All, or Nature, then you should have the snowflakes shapes.

The snowflakes look quite cool just like that, but I went ahead and applied these layer styles anyway:

1. Blending Options: Main
2. Inner Shadow
3. Outer Glow
4. Inner Glow

My snowflakes now look like this:

Next thing I did for the header was add in some trees. Please note that I did not make these, they’re some clipart I found on the internet somewhere. You can download them from here though: Carton Christmas Trees Clipart.

For the sake of tiny details, I then added a dark gradient 1px from the top of the banner and navigation box.

Now I’m going to add in a little bit of snow to the bottom of the banner. To do this, you’ll first need to create a smooth, hill-like path with the Pen Tool, make your path into a selection then fill with white (finish off by deleting excess white).

Finish this off by doing a little bit of brushing inside of the snow layer.

Lastly for the header, you need to add in some text, preferably your website name or some descriptive text. I’ve used the same font as before, so I recommend you do aswell.

To this text layer I applied a Drop Shadow and a Gradient Overlay.

6. Recent Entries Sidebar Box

Now we’re going to create a recent entries (posts, articles, etc.) side box for the template. First, start by creating a new layer, then make a selection of about 200 x 30 pixels (same width as the navigation box).

Fill your selection with a nice, moderate-green (#307017). And now apply the following layer styles to this layer:

1. Inner Shadow
2. Gradient Overlay
3. Pattern Overlay (download .pat file)

Looking good so far. Create a new layer then make a selection half the size of the main bar at the top. Fill this selection with a White to Transparent gradient.

Change the layer mode for this layer to Soft Light then lower the opacity to around 15-30%.

And then a 1px line at the top of the bar. For this layer change the layer mode to Soft Light and lower the opacity to about 50%.

I then added in text, similar to what I’ve used on the rest of the template.

Create another new layer, now make a selection a bit smaller than the first selection underneath it (my selection was 200 x 60 pixels)

Fill the selection with the same color as you used for the original, larger bar. Apply the following layer styles:

1. Bevel and Emboss
2. Gradient Overlay
3. Pattern Overlay (Download .pat file)

Duplicate this layer and move it down 16 pixels (if that’s how tall your rectangle is).

Repeat this until you have about 8-10 bars. Now add in your text.

7. Designing the Content Area (Recent Updates)

Basically you just have to do the same as with the last bar. You could even duplicate the first bar and move it along, stretch it then change the color, that’s what I did, and it was easy!

The color I used for the recent updates bar was #1f7bc5. Next thing create a large selection all of the width of the updates bar, not completely to the bottom though:

If you’re on a new layer, fill this selection with white then apply the following layer styles:

1. Blending Options: Main
2. Bevel and Emboss

Your box should now look like this:

Add in some dummy text from Lipsum.com:

Lastly for this section, I added a smaller version of the content box at the bottom underneath the first one with a higher opacity, I made it 80px in height so it would fit an ad banner in it nicely.

8. Sidebar & Footer

Remember the last step where you added in those low opacity boxes? Duplicate the main box, move it over to the left under the recent entries then crop it so it fits properly.

I then added in a nice little ad banner to fill it up nicely.

Ok, lastly we’re going to add in the footer. First make a selection at the bottom of your template where you want the footer to be. My selection was 738 x 40 pixels.

Fill this selection with a red color, I used #7e0a07. Next thing to do is apply the following layer styles:

1. Inner Shadow
2. Gradient Overlay
3. Pattern Overlay (Download .pat file)

If you want an easier way out of applying these layer styles, you can just as easily go to the header bar, copy the layer styles, come back to the footer layer and paste them.

Now you can add in the shiny highlight like with the header bar. To remind you of that:

1. Make a selection half the size of the footer bar.
2. Fill the selection with a white to transparent gradient.
3. Change the layer mode to Soft Light and lower the opacity to 15-30%.
4. Make a 1px line at the top of the footer bar, change layer mode to Soft Light then lower the opacity to 40-70%.

Now lastly for the footer bar we’ll add in the text. On the left I wrote in the word “Copyright” in the same style as the text in the header bar. Then on the right I added in the actual copyright notice.

For the smaller text I used Tahoma, 11pt, #ebbe97.

And that’s pretty much it for this tutorial! I hope you enjoyed the tutorial, and I hope you were able to follow it through to the end easily. For learning purposes only you can of course download the PSD file from this template tutorial from here: Christmas-Themed Web Layout PSD file (567kb)

1. Creating the First Bar

Firstly open the clan template file you were working with before, then make a selection underneath the header for the Recent Matches bar. My selection is 280×24 pixels in size (a little wide, but I had to use up all of the space).

Smooth this selection by 5 or so pixels by going to Select > Modify > Smooth and inputting the number. Now we’re basically repeating what we did with the navigation bar in the last tutorial, so you can look back at the navigation bar to see what you did to it.

1. Apply Gradient Overlay.
2. Add shine.
3. Add highlights, top and bottom.

Lastly for this bar, using the pencil tool draw a small pixel arrow at the bottom in the middle, then add your text.

2. Creating Smaller Sub Bars

Next thing is to create a new layer then make a selection underneath the main bar, make your selection the same in width but a bit smaller in height (mine was 280×14 pixels). Now smooth the new selection by about 2-3 pixels, lastly fill the selection with white (#ffffff)

Lower the fill opacity for this layer to about 5-10% then apply the following layer styles:

1. Inner Shadow
2. Gradient Overlay

Now you can duplicate this layer and move it down 1 px underneath the first one. Repeat this until you have 6 or so bars, your choice.

Last thing to do here is add in your match details, like what I’ve done below:

What do you think? Not bad in my opinion.

3. Footer Bar, Etc

Group all of the Recent Matches layers together then duplicate the group, move it over so there’s about 10 pixels space in between. Repeat again once.

(click image for full size)

Using the same steps, make a content/updates area for the template. In the end I also added a bar underneath the Recent Matches, etc. boxes that shows you where abouts on the website you are

Finally I added the footer with the copyright.

For learning purposes only, you can freely download the PSD file for the finished clan template from here: Finished Clan Template Design (2.3mb) And you can view my final result here.

Designing a Clan Template Part 1
Designing a Clan Template Part 2
Designing a Clan Template Part 3

Thanks for reading everyone, I hope you enjoyed it.

1. Open your Document

Let’s get started! First of all open up the PSD you created from the last tutorial. Now create a selection on your canvas the same width as the header graphic, but only about 40 px in height.

Now you’ve made your selection, smooth it by about 5 pixels by going to Select > Modify > Smooth.

On a new layer fill this selection with the same color as the background, in my case it’s #262626. Now apply this Gradient Overlay to add more detail to the navigation bar.

2. Adding Details to Navigation

Hold ctrl and click the main layer, this will make a selection around the whole layer. Create a new layer and draw a White/Transparent gradient from above the top of the selection to the middle or bottom, or you could just fill the selection with white, not much difference.

Now, since the navigation bar is 40 px in height, make a selection at the bottom containg 20 pixels of the gradient, press delete to delete the bottom part of the gradient.

Next, lower the opacity for this layer to about 20% and change the layer mode to either Soft Light or Overlay.
Again select the main layer and create a new layer. Fill your new selection with white (#ffffff) and move the selection up one pixel, press delete.

Lower the opacity for this layer to about 20-35% and change the layer mode to, again, Soft Light or Overlay.
Repeat that for the top line, except when you’re done, move the line down one pixel. This is just for the sake of small details.

3. Creating Buttons

Now it’s time to start making the buttons! Firstly, make a selection inside of the bar, make it a healthy-sized button -the selection of my button was 100×26 pixels. You should/can also smooth your button selection by 2-4 pixels (Select > Modify > Smooth)

Now, fill the selection with a yellowish gradient – the colors I used for my gradient were #d3bd3e and #76551e.

Right-click your layer, go into the Blending Options apply the following layer styles to your button layer:

1. Inner Shadow
2. Inner Glow
3. Color Overlay
4. Gradient Overlay
5. Pattern Overlay (Download pattern from here: Warning Tape.)
6. Stroke

You should be left with a nice, industrial-styled button pretty much like this:

Not bad for just a few layer styles, huh?

4. Button Detailing

If you want to give your button a few extra details, follow this step. On a new layer draw a red (#ff0000) line from one end of the button to the other.

Using the eraser tool, using a large, soft brush erase the left and right sides away.

Now apply the following Drop Shadow and Outer Glow to this red line layer.

To finish off the button add your text. I used Tahoma, 11pt, Bold, No Anti Aliasing, #ffffff, also with this Outer Glow applied.

Merge your button layers together (not including the text layer) then duplicate the two remaining layers and move them along the line. Repeat this as many times as you want, depending on how many buttons you want. I ended up with 7 buttons, after finishing off, you should also center all of the buttons in the navigation bar.

Thanks for reading this part of the tutorial! If you want to continue, click one of the links below.

Designing a Clan Template Part 1
Designing a Clan Template Part 2
Designing a Clan Template Part 3

Again, you can freely download the PSD file for the navigation part of this tutorial from here: Designing a Clan Template Part 2

1. Document/Canvas

Firstly, you should create a new document for your clan template design, this really depends on if you want the desing suitable for 800×600 resolution users or not, I just used a document size of 880×1000. (not quite suitable for 800×600 resolution users)

Now fill your background with a suitable color, I used a very dark grey – #262626.

2. Creating the Header

Now, you’ll need some game renders/wallpapers, again this depends on your preference, it depends on what game your clan is for! I got my wallpapers from GameWallpapers, but you need a paid subscription to download nearly all wallpapers. You can get some nice, free game cutout renders from ClanTemplates.

I first First added in a wallpaper of Battlefield 2142, then made a few simple touchups to the banner.

(touching up as in: Blurring background, brightening, adding contrast, sharpening.)

Next I added in a wallpaper of a game called Kane & Lynch: Dead Men. I re-sized it down to fit nicer and erased a fair bit of the corners using a large, soft brush.

Lastly for the images I added in a wallpaper of Crysis in the top right, I erased the left corners of this image to blend with the other wallpaper.

Looks pretty good with those game pictures in it, doesn’t it? View my header so far.

3. Creating your Logo

Now it’s time to create a logo-type container that you can put your clan name inside of. First, start by making a rounded rectangle. You can do this by using the Rounded Rectangle Tool with a radius of about 10 px.

Use settings similar to the following:

So, create a new layer and make your rounded rectangle. You can use any color for this, after you apply the layer styles it won’t really matter.

To add layer styles to this box, right-click the layer in the layer’s palette and go into the Blending Options, now click and apply the following layer styles:

1. Inner Shadow
2. Gradient Overlay

You should now have something like this:

Not looking the best so far.. but we’re getting to it. Create another new layer then merge your previous layer with the new one, this is to merge the layer styles with the layer. Now you can add some more layer styles!

1. Inner Shadow
2. Outer Glow
3. Inner Glow
4. Gradient Overlay
5. Pattern Overlay (download pattern from here: Warning Tape)

You should be left with the following result:

(Note: to turn an image into a pattern, open it into Photoshop, select all, go to Edit > Define Pattern.)

Lastly for this text container I added a 1 px line near the bottom of the rectangle, the color which I used was red (#ff0000) and I also applied this Outer Glow to it.

4. Clan Name Text

Now it’s time to add your clan name to the container. First, find and get out the Horizontal Type Tool (the normal type tool) then write out your text inside of the box.

I used pure white (#ffffff) as my text color, I then applied the following layer styles to the text layer:

1. Drop Shadow
2. Outer Glow
3. Color Overlay
4. Gradient Overlay

Lastly for the text I added a bright ‘highlight/shine’ effect halfway through the text.

All you have to do to get that effect is create a new layer, select the text pixels (Hold ctrl and click the layer thumbnail), fill the selection with white, delete the lower half of your white layer then lower the opacity. Well, this part of the tutorial is complete, you can view my the result below.

• Designing a Clan Template Part 1
• Designing a Clan Template Part 2
• Designing a Clan Template Part 3

Thanks very much for reading this first part of the tutorial, I hope you enjoyed it! Also, if you need the PSD file for any learning purposes you can of course download it from here: Designing a Clan Template Part 1 PSD (1.5mb)