To view a large version of what you will be creating, click here (will open in new window).

Step 1 – Setting up the document

Create a new document with the size 1000px by 1000px and fill the background with the color #ccdbe4 using the Paint Bucket Tool (G).

Step 2

Create a new group (Layer > New > Group) and name it “body.” Create a new layer inside this group, select the Rectangle Tool (U) and create a big white rectangle like I did.

Step 3

Select the Line Tool (U), set the weight to 1px and the color to #90a3ae and create two vertical lines – one in the left side of the white rectangle and one in the right side.

Step 4 – Creating the header bar

Create a new group and name it “Header Bar.” Create a new layer inside this group, select the Rectangle Tool (U), set the foreground color to #111111 and create a rectangle at the top of your canvas.

Step 5

Create a new layer, select the Rectangular Marquee Tool (M) and create a selection like I did. Then select the Gradient Tool (G), hold down the Shift key and drag a gradient #c4ced4 to transparent from the top to the bottom of your rectangular selection. Leave a distance of 1px between the dark gray rectangle and this gradient.

Step 6

Create a new layer, Ctrl-click on the thumbnail of the dark gray rectangle layer to select it and use the Gradient Tool (G) to create a subtle black to transparent gradient at the bottom of the dark gray rectangle.

Step 7

Create a new layer, Ctrl-click on the thumbnail of the dark gray rectangle to select it, and drag a gradient #dadada to #e1e1e1 from the top to the bottom of your selection. Then use the Line Tool (U) with the weight of 1px to create some vertical white lines on your light gray rectangle. Set the blend mode of this layer to Soft Light.

Step 8

Create a new layer and use the Pen Tool (P) to create a selection like I did. Then select a white soft brush (B) with an opacity around 50% and paint with this brush over the edges of your selection. You can also invert the selection (Ctrl+Shift+I) and use the Brush Tool (B) again, and then erase some parts of this layer using the Eraser Tool (E). Set the blend mode of this layer to Overlay.

Step 9

Now add a logo and a tagline in the header bar.

Step 10 – Creating the navigation bar

Create a new group and name it “Navbar.” Then create a new layer inside this group, select the Line Tool (U) and create a white horizontal line with the weight of 1px beneath the header bar.

Step 11

Create a selection like I did above the big white rectangle and draw a gradient #c4d6e0 to transparent from the top to the bottom of your selection.

Step 12

Create a new layer, select the Rectangle Tool (U), set the foreground color to #e77502 and create a rectangle between the white line and the blue gradient.

Step 13

Create a new layer, select the Line Tool (U) and create a horizontal line with the weight of 1px and the color #5e350c at the bottom of your orange rectangle. Set the blend mode of this layer to Overlay.

Step 14

Create a new layer and use the Line Tool (U) again to create a horizontal line over the one which you have created at the previous step using the color #f2b6a3. Then set the blend mode of this layer to Overlay and the opacity to 80%.

Step 15

Create a new layer, select the Line Tool (U) and create a horizontal line with the weight of 1px and the color #bc6105 at the top of your orange rectangle. Then create a new line in the same layer, leaving a distance of 1px between these two lines.

Create another horizontal line beneath the last one using the color #f2b97e.

Step 16

Use the Rectangular Marquee Tool (M) to create a selection like I did. Then select the Gradient Tool (G) and drag a #efa457 to transparent gradient from the top to the bottom of your selection in the same layer that you have created at the previous step. Then set the blend mode of this layer to Overlay.

Step 17

Create a new layer, select the Line Tool (U), set the color to black and the opacity to 17% and then create a horizontal line at the bottom of your orange rectangle.

Then create a rectangular selection using the Rectangular Marquee Tool (M), select the Gradient Tool (G) and create a #8f5112 to transparent gradient from the bottom to the top of your selection, leaving a distance of 2px between the line and this gradient.

Set the blend mode of this layer to Overlay.

Step 18

Use the Rectangular Marquee Tool (M) to create a rectangular selection in the middle of your navigation bar. Then select the Gradient Tool (G) and drag a #725625 to transparent gradient from the top to the bottom of your selection. Set the blend mode of this layer to Overlay.

Step 19

Create a rectangular selection with the height of 3px at the top of the gradient which you have created at the previous step, using the Rectangular Marquee Tool (M). Then select the Gradient Tool (G), set the opacity to 25% and drag a white to transparent gradient from the top to the bottom of this selection.

Step 20

Now we are going to create some separators. Create a new group inside the “navbar” group and name it “separators.” Then create a new layer, select the Line Tool (U) and create a vertical line with the weight of 1px using the color #754b23. Set the blend mode of this layer to Overlay and the opacity to 60%.

Then create a new vertical line next to the one which you have just created using the color #f7d1a4. Set the blend mode of this layer to Overlay and the opacity to 40%.

Step 21

Duplicate the lines which you have created at the previous step to create more separators.

Step 22

Create a new group and name it “Rollovers.” Create a new layer inside this group, select one of your buttons using the Rectangular Marquee Tool (M) and drag a #efa25b to transparent gradient from the top to the middle of your selection. Set the blend mode of this layer to Overlay.

Step 23

Create a new layer and use the Pen Tool (P) to create a small white arrow at the top of your button. Then double-click on this layer to open the Layer Style window and use the settings from the following image for Drop Shadow.

Step 24

Create a new group and name it “Link names.” Then select the Type Tool (T), set the color to white and write the names for your menu items. Then double-click on this layer to open the Layer Style window and use the settings from the following image. Set the blend mode of this layer to Overlay.

Step 25 – Creating the sidebar

Create a new group and name it “Member Login.” Create a new layer inside this group, select the Rounded Rectangle Tool (U), make sure that the “Fill Pixels” button is selected from the option bar, set the radius to 10px and create a black rounded rectangle.

Step 26

Set the foreground color to white and use the Rounded Rectangle Tool (U) with the same settings to create a white rounded rectangle in the middle of the black one.

Step 27

Set the foreground color to black and use the Rounded Rectangle Tool (U) to create a bar at the top of your rounded rectangle. Then select the Magic Wand Tool (W), click on the white area inside this rectangle to select it and then hit the Delete key.

Step 28

Create a new layer and put it beneath the black rounded rectangle layer. Then select the Rounded Rectangle Tool (U) and create a blue rectangle under the black one using the color #d3e3ef.

Step 29

Create a new layer above black rounded rectangle layer, select the Line Tool (U), set the weight to 3px and the color to #b8d2e5 and create a line like I did.

Step 30

Use the Type Tool (T) to add some text inside this rounded rectangle.

Step 31

Select the Pencil Tool (B) and create a dotted line at the bottom of the rounded rectangle using the color #8099a8.

Step 32

Create a new layer, select the Rounded Rectangle Tool (U), click on the “Paths” button from the option bar and create a path like I did. Then hit Ctrl+Enter to convert this path into a selection and use the Gradient Tool (G) to drag some white to transparent gradients at the top and the bottom of your selection.

Step 33

Select Brush Tool (B) and select a hard brush with the diameter of 1px. Then select the Pen Tool (P) and create a path at the top of your black rounded rectangle like I did. Right-click on your image, select Stroke Path, select “Brush” from that list, check the Simulate Pressure option and click OK. To delete the path hit Esc twice. Set the blend mode of this layer to Overlay and the opacity to 40%.

Step 34

Create two more rounded rectangles in your sidebar for “Forum Information” and “Partner Links.”

Step 35 – Creating the forums area

Create a new group and name it “forums.” Then create a black rounded rectangle like the ones from the sidebar.

To create the separators, create a new layer, select the Line Tool (U) and create two lines – a dark one (#000000) and a light one (#f1ad81). Then set the opacity of this layer to 20% and the blend mode to Overlay. Use the Type Tool (T) to add some text inside this area.

Step 36

Repeat the last step to create more forums. You can also add some icons and an area for ads.

Step 37 – Creating the footer

Create a new group and name it “footer.” Create a new layer inside this group, select the Rectangle Tool (U) and create a rectangle at the bottom of your layout using the color #e77502. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Step 38

Create a new layer and use the Rectangle Tool (U) to create a rectangle at the bottom of the orange one using the color #424546. Set the blend mode of this layer to Overlay. Then select the Type Tool (T) and add some text in your footer.

Final Result

I hope that you enjoyed this tutorial. You can see the final image preview bellow or view a larger version here.

Step 1:

Start by making a new document for your buttons, or you can open up a website template you might have been making earlier.
The document size I used was 304 x 120 pixels. Now fill the background with a moderately dark color/gradient, I used a gradient of #373a41 and #26282f.

Step 2:

Now let’s move onto making the buttons. First, start by making a new empty layer. Now find and get out the Rounded Rectangle Tool.

Be sure you’re using these or similar settings for the rounded rectangle tool:

Change your foreground color to a nice red color (#ae0d0e) then draw a rounded rectangle on the canvas.

Good job!

Step 3:

Now we need to add some nice effects to the button. Start by right-clicking the layer in the layer’s pallette, and going into the Blending Options.

After you’re in the blending options, apply the following layer styles and click the links for settings:

After applying those layer style settings you should have a nice result like this:

Step 4:

Create another new layer, name make a selection around your original button, you can do this by holding ctrl then clicking the layer’s thumbnail.

Using the Gradient Tool draw a white gradient from the bottom of the button to the top.

Using the Rectangular Marquee Tool, select and delete the bottom half of the gradient you just made, you might need to measure the height of your button before deleting the bottom half.

Now you’ll want to change the layer mode for this layer to either Overlay or Soft Light, you’ll also need to the lower the opacity to about 40-55%.

Step 5:

Now lastly, you need to add the text, of course!
Start by getting the type tool and making your text selection inside of the button. I wrote out my text with the following settings:
Tahoma, Bold, 14 pt, No Anti-Aliasing, #ffffff.

And that’s all, a very simple and stylish website button! Thanks for reading, we hope you enjoyed the tutorial.

Need more help or guidence with any of the tutorials then please register and visit the forum.

Step 1:

Start this tutorial off by making a new document in photoshop sized about 380 x 100 pixels, a nice forum signature size.
Reset your colors to black and white by pressing D on your keyboard. Now apply Filter > Render > Clouds on the background layer.

Step 2:

After applying Clouds apply Filter > Sketch > Chrome, then Filter > Distort > Wave using the default settings with both.

Change the layer mode for this layer to Lighten to get a cool effect.

Merge your layers together (ctrl+e) then apply Filter > Sharpen > Sharpen once.

Step 3:

After you merged your layers together you should be left with just one, so duplicate that layer then apply Filter > Blur > Gaussian Blur with a radius of about 2.0.
After applying Gaussian Blur, change the layer mode for your blurred layer to Overlay and leave the opacity at 100%.

That will have given it a nice bright glow.

Step 4:

Create a new Gradient Map Adjustment Layer (Layer > New Adjustment Layer > Gradient Map) and use the following settings:

Your image will now look something like this:

Now change the layer mode for the Gradient Map layer to Color.

Duplicate your Gradient Map layer then change the layer mode to Overlay and lower the opacity to 40-50%.

Step 5:

Again with the adjustment layers, add in a Color Balance layer by going to Layer > New Adjustment Layer > Color Balance, use the following settings:

Now you should have some nice colors like this:

Step 6:

Now you might want to repeat the part where you merge the layers, then duplicate, blur, layer mode change etc, so you get more of a vibrant picture.

Lastly you might want to add a soft border, and of course text.

Thanks for reading.

These icons are ideal for various things such as a forum icon, a chat client of some sort. At the moment I have a smaller version set as my MSN display picture!

Step 1:

Firstly start by making a new document in Photoshop, use a document size of 300 x 200 pixels. Leave the background as white.
Next thing to do is find the Ellipse Tool, you can see where to find it in the below image.

Be sure you have the following settings for your Ellipse tool set, then draw a lob-sided ellipse on your canvas.

Create a new layer then brush some black over your path.

Find and get out the Pen Tool, right-click your path and click Create Vector Mask.

In your layers pallate go back into the path and add in a little triangular shape to make it look like one of those chat bubbles.

I lastly add this Drop Shadow to my black layer.

Step 2:

Duplicate your main black layer and brush a bright orange in the layer area.

Using the Add Anchor Point Tool select your path/points, press Ctrl+T to go into the Free Transform area.
Change the Width and Height to about 84.0% each. You might need to move the whole thing over to the left slightly.

Step 3:

Apply the following layer styles to your inner orange layer:

And now you should have something that looks like this:

Step 4:

On a new layer create another ellipse at the top, fill the selection with black. Now apply the following layer styles/settings:

And that should leave you with a nice glossy highlight like this:

Step 5:

Duplicate your layers then flip them horizontally (Edit > Transform > Flip Horizontal).
Now you just have to resize slightly and change the color layer with a different color. The color I used was #3381d7.

Thanks for reading the tutorial, we hope you enjoyed it. If you want, you can download the PSD file for this tutorial from here.

Step 1. Background

Start by creating a new document, I’ll be using a size of 540 x 540 pixels. Now fill the background with #a48034.

Now go and apply Filter > Noise > Add Noise, use similar settings to these:

Duplicate the Background layer then apply Filter > Artistic > Underpainting, you can use the default settings.

Lower the opacity for this layer to 25% and change the layer mode to Overlay.

Step 2. Base

First of all, get the Rectangular Marquee Tool then make a set-sized selection of 366 x 220 pixels in the middle of the document.

After making the selection, make a new layer then fill the selection with a dark brown color, I used #56220c.

Right-click the layer you just created and go into the Blending Options, apply the following settings:

• Inner Shadow
• Outer Glow
• Gradient Overlay
• Pattern OverlayTo use this pattern, first download it from here, open it in Photoshop then define it as a pattern (Edit > Define Pattern)
• Stroke

Be sure you paid attention to all the settings, and you should have gotten a result like this:

Step 3. Making the chalk board

Create another new layer then with the Rectangular Marquee Tool make a selection of about 360 x 190 pixels inside of the other layer.

Fill this selection with a dark grey, I used #232323. After filling your selection, apply the following layer styles:

• Drop Shadow
• Inner Glow
• Gradient Overlay

You should now have a chalk board like this:

Create a new layer then do a little bit of soft brushing on the inside of the chalk board. You can either leave the brushing, or erase away a bit with a grunge brush like I did.

After finishing off, change the layer mode to Soft Light and lower the opacity if you think it needs it.

Lastly you should add in your text. You can download the font that I used from here.

After writing out my text in white I lowered the fill to 70% and apply the following layer styles:

• Drop Shadow
• Inner Shadow

Step 4. Logo

Get the Horizontal Type Tool out and write your text in white.

The font I used above is called Helvetica Neue, but you’ll have to make use of what you have, be creative.

After writing your text, apply the following layer styles:

• Drop Shadow
• Inner Shadow

Lastly for the logo I added in a ‘fresh’ stamp, I’ve written a similar tutorial on this effect before, you can view it here.

Step 5. Navigation text

Lastly for this tutorial you’ll want to add in some navigation text, I added mine at the bottom of the blackboard in the brown area. First get the text tool and write out your links, then change the font and such.

In the above image I used the font Tahoma, size: 11 pt, color #ffffff.

Lower the fill for your text layer to 70% then apply the following layer styles:

• Drop Shadow
• Gradient Overlay

That’s pretty much it for this tutorial, you can download the PSD file from here if you need any help.