To start off with we need to create a new document (File > New). The size I have chosen is 540 by 440 pixels (you can leave the other settings to their defaults).

To fill in the background with a radial gradient we are going to be setting our foreground to a dark brown (#2b201b) and our background colour to a darker brown (#1f1511). Select the gradient tool from the toolbox and set it to radial. Left click somewhere in the top left quarter, drag to the bottom right and release.

Step 2

Secondly, we are going to be making the shape of the logo we are going to be building from. So create a new layer (Layer > New > Layer) and select the elliptical marquee tool. Make a circle in the middle of the document 300 by 300 pixels.

We are now going to be filling the selection with a green gradient. Use the same method as we did in step 1 for the background to add a radial gradient from a light green (#bad43d) to a darker green (#8ca926).

Step 3

Now we are going to be taking a slice out of the circle by making a selection on top of the circle (taking up about three quarters but leaving the left and bottom parts). Hit delete on your keyboard and you should be left with something like this.

Step 4

Duplicate the moon shaped layer (Ctrl + J). Rotate it anti-clockwise a couple of notches (Ctrl + T and then drag around the outside of the box).

Step 5

Repeat step 4 and you should have something like this as your shape, easy huh?

Step 6

Now we are going to be shrinking it. I made the shape large at first for two reasons: so that it will have more detail if we want to expand the logo for some reason, and because it is easier to work with when it’s larger with some of the previous steps.

Select the three moon shaped layers and merge them together (Ctrl + E). Scale it down to about a quarter of the size (Ctrl + T and drag one of the corner boxes inwards).

Move the logo across to the so that you have room to add in some text shortly.

Step 7

We are now going to be applying an outer glow to our logo.

Layer > Layer Styles > Outer Glow

Step 8

The last task is to add the text for the logo. Select the text tool and add in some text. The font I used is Delicious and font size 60 pt.

Step 9

Lastly we are going to be adding a couple of layer styles to the text layer.

Layer > Layer Style > Outer Glow

Layer > Layer Style > Gradient Overlay

And here’s the finished logo.

Create a new document (I’ve chosen 540 by 440 pixels). Set your foreground colour to #134c72 and your background colour to #0a3567. Select the gradient tool and set it to radial (you can do this at the top left of your window). Left click in the middle of your document and drag to a corner and release. This will give us a background to work from.

Step 2

Create a new layer and select the Rounded Rectangle Tool. Set the radius to 10 pixels and the size to 300 by 300 pixels. Make a selection in the middle of the document like so.

We are now going to be filling the selection with another gradient. Set your foreground colour to #252524 and your background colour to #151515. Using the gradient tool again left click somewhere near the top left and drag down towards the right and release. You can deselect your selection now (Ctrl + D).

Step 3

Now we are going to be adding an Outer Glow to our box. We will do this by going Layer > Layer Style > Outer Glow and entering the below settings.

Now your box should be looking something like this.

Step 4

Using the text tool add a title to your box.

Step 5

Next up we are going to be adding a little divider under our poll’s title - sort of like an advanced underline. So create a rectangle 280 by 8 pixels using the Rectangular Marquee Tool.

We are now going to be filling this selection with a gradient. Set your foreground colour to #181618. This time select the gradient tool and bring up the Gradient Editor window (click on the gradient rectangle in the top left of photoshop). Select Foreground to Transparent. Now left click at the top of the selection and drag to the bottom and release.

Select the Eraser tool and with a soft brush (about 100 pixels in size), erase a bit of the left of the divider.

Step 6

Add in some poll options using the text tool.

Step 7

Next up we are going to be adding the poll result bars (the percentages of votes etc). Make a selection of 150 by 20 pixels to the right of the first poll option using the Rectangular Marquee Tool.

This time we are going to be using a reflected gradient to fill our selection. Set your foreground colour to #18527a and your background colour to #0b3667. Select the gradient tool and set it to reflected gradient. Left click in the middle of the selection and drag to a side then release. Deselect (Ctrl + D).

Step 8

Now we are going to be adding a couple of layer styles to our bar.

Layer > Layer Style > Gradient Overlay

Layer > Layer Style > Stroke

Step 9

Duplicate the bar (Ctrl + J). Move it down 40 pixels (Ctrl + Shift + Down Arrow Key x4). Go Edit > Transform > Scale and bring in the right side a bit so it is shorter.

Repeat two more times.

Step 10

Lastly we are going to be adding a vote button so make a rounded selection of 100 by 30 pixels with a radius of 10 pixels using the Rounded Rectangle Tool.

Fill the selection with the same gradient as we did for the bars and apply the same layer styles too.

Add some text for the button.

Now you’re finished!

To get us started create a new document and then we need to have a background so select the gradient tool. Set the style to radial gradient, set the foreground colour to #b3a773 and the background colour to #877948. Fill the background with a gradient from the center outwards (left click in the middle and drag to a corner and release).

Step 2

Our second task is to make a header for the navigation box. Using the rounded rectangle tool make a rounded selection (radius set at 10 pixels) 220 by 50 pixels.

Select the gradient tool again (set it to linear) and set your foreground colour to #202020 and your background colour to #2f2f2f. Left click on the left side of the selection, drag to the right side and release.

Step 3

We are now going to be adding a shine effect to this layer. So go Layer > Layer Styles > Gradient Overlay and use the following settings (click the gradient icon to go to the second window).

Now your header should have a shine effect to it.

Step 4

Now we are going to be adding a stroke to our header. Go Layer > Layer Styles > Stroke.

Step 5

Next up is some added diagonal lines. We are going to do this by creating a new layer (Layer > New > Layer) and making a selection of 15 by 100 pixels using the rectangular marquee tool.

Fill (Edit > Fill) the selection with white (#ffffff).

Step 6

Duplicate your line and move it 20 pixels to the right (Ctrl + Shift + Right Arrow x2).

Do this again so you have three lines in total.

Merge the three line layers.

Step 7

Now we are going to tilt the lines so go Edit > Transform and rotate it a bit.

Hit enter to set the transformation.

Step 8

Select the area of your header background (Ctrl + Click layer icon).

Invert the selection (Ctrl + Shift + I).

Hit delete and deselect (Ctrl + D).

Step 9

Lower the opacity of the layer to 5%.

Step 10

Add some text in your header.

I’ve also added a little icon that I’ve made a tutorial on (addFreak Logo).

Step 11

Now that we’ve finished the header, we can begin on the main section where the links will go. Start with making a rounded selection like we did for the header except it’s going to be 250 pixels high.

Fill this area with the colour #2f2f2f and deselect (Ctrl + D).

Move this layer below the header so we can see the header

Remove the overlapping bits of the lines on the header border to tidy it up a bit.

Step 12

Now we are going to be applying some layer styles to this new layer.

Layer > Layer Styles > Outer Glow

Layer > Layer Styles > Inner Glow

Layer > Layer Styles > Stroke

Now your box should be looking more like a navigation box now

Step 13

Next up we are going to be adding the text.

Step 14

We are now going to be doing the dividers - the bits between each link. On a new line make a selection of 200 by 1 pixel using the rectangular marquee tool between the first two links.

Fill (Edit > Fill) the selection with the colour #292929.

Step 15

Now using the pencil tool (with the foreground colour set to white) make a little rectangle 8 by 3 pixels in the middle of the divider. Zoom in to do this accurately

Step 16

Apply an outer glow to this bit by going Layer > Layer Styles > Outer Glow

Step 17

Duplicate the two layers so you have one between each link and you are finished at last!

First up create a new document - I’ve made sure that I have lots of room to work with so I chose 540 by 440 as my size.

Fill the background with a dark gradient or just a solid colour (Edit > Fill and use a colour like #262626) if you don’t know how.

Step 2

Create a new layer (Layer > New > Layer). Select the rounded rectangle tool and use the settings below.

Left click somewhere in the middle of your document.

Right click and left click “make selection”.

Now you should have a selection like this:

Step 3

Next up we are going to be filling our selection with a gradient. Select the gradient tool anduse these settings. You can get the green gradient by clicking that area and changing the left colour to #7ebe3e and the right to #a8da77 or by setting your foreground colour to #7ebe3e and your background colour to #a8da77 whatever suits you

Left click in the middle of the selection and drag to the bottom while holding the shift key (which keeps it straight) and release. Now you can deselect your selection (Ctrl + D).

Step 4

Now we are going to be adding an outside stroke to our button. The easiest way to do this is to go Layer > Layer Style > Stroke.

Step 5

On a new layer (Layer > New > Layer) make a selection of 3 by 40 pixels in the position shown below. The easiest way to do this is to select the rectangular marquee tool and use the fixed size setting with width set to 3 pixels and the height set to 40 pixels.

Fill (Edit > Fill) with white (#ffffff). And deselect (Ctrl + D if you’ve forgotten already). And with any luck your button should now be looking like this…

Step 6

Add a double arrow “»” (copy and paste it if you want) on a new text layer.

Step 7

Go Layer > Layer Style > Drop Shadow.

This should make it a little easier to read and stand out from the background a little bit - some depth.

Step 8

Add some text for your button like your website’s name or something like “Home” if it is going to be a link to the home page and you are complete.

Here is an orange version of the button. You can change the colour of the button by adding a different coloured gradient to the base layer (the first layer we created).

Like usual we are going to start off with filling the background with a radial gradient from a light grey to a darker grey. Light grey: #3e3d3d. Dark grey: #151515.

Step 2

Create a new layer (Layer > New > Layer) and using the rounded rectangle tool make a fixed shape of 300 by 50 pixels in the middle of the document.

Right click the shape and click make selection.

Select the gradient tool and set the style to reflected gradient. Set the foreground colour to #1c3f47 and the background colour to #2a6976. Left click in the middle of the selection and drag to the bottom of the selection and release. This will provide us with the base of the button.

Step 3

Now we are going to be adding some layer styles to our button to make it vista styled.

Layer > Layer Styles > Outer Glow

Layer > Layer Styles > Inner Glow

Layer > Layer Styles > Gradient Overlay

Now your button should be looking like this.

Step 4

Now we are going to be adding a reflection to our button. On a new layer select the area of your base layer (ctrl + click layer) and fill the selection with white (#ffffff).

With the rectangular marquee tool selected move it down below the button.

Go Edit > Transform > Perspective and drag the bottom right box towards the right while holding down the shift key (this pulls the other side out too so it keeps it even).

Add a layer mask and add a gradient from white to black within the reflection - this will fade it out.

Set the blend mode of the layer to Soft Light and lower the opacity to 15%.

Step 5

Last of all we are going to be adding some text. Choose a nice crisp and clean font for this.

First of all we want to create a new document (File > New) and make it something like 540 by 440 pixels in size. Fill the background with a radial gradient from a lightish grey (I’ve used #343435) at the top left to a darker grey (and #222222) in the bottom right.

Step 2

Create a new layer (Layer > New > Layer). Select the rounded rectangle tool and make a selection of 300 by 300 pixels with a radius of 10 pixels.

Step 3

Fill the selection with another radial gradient from #007ccb at the top left to #004877 at the bottom right of the selection. Deselect (Ctrl + D).

Step 4

Now we are going to be adding a drop shadow to our navigation box by going Layer > Layer Style > Drop Shadow and applying the below settings.

Now your box should be looking like this.

Step 5

And we are going to be adding a gradient overlay to the box as well now. So go Layer > Layer Style > Gradient Overlay and apply these settings - click on the image on the right of “Gradient:” to get the top window.

Your navigation box should be looking pretty good now

Step 6

Add a title for the navigation box.

The font details I’ve used are…

Step 7

Now we are going to be adding some dividers etc to go between the text links that we will be adding. Using the rectangular marquee tool make a fixed sized selection of 260 by 1 pixel below the box title. Fill with #ffffff (white).

Step 8

Set the blend mode of that divider to Overlay and decrease the opacity of the layer to 20%.

Step 9

Duplicate the divider (Ctrl + J) and then move it down 30 pixels (Ctrl + Shift + Down Arrow three times). The Ctrl + Arrow moves the layer in the direction of the arrow by one pixel, and adding the shift key moves it 10 pixels. Repeat this process until you have enough dividers for your links.

Step 10

Now we are going to be adding the text links.

Pay close attention to the line height setting - this will set the line height (of course) to 30 pixels which is the distance between our dividers

Step 11

And we need a hover effect because otherwise it’d be boring when we hover our mouse over it (this is only when you have coded it! Please don’t ask why it doesnt work while in Photoshop or how to code it - this is a design blog ).

On a new layer make a selection of 260 by 30 pixels over one of the text links - so it sits nicely between the dividers.

Fill (Edit > Fill) the selection with #ffffff (white). Deselect - we don’t need it selected now.

Set the blend mode to Soft Light and the opacity to 20%. Or play around with the settings until you get a nice effect you like.

First up we are going to be creating a new document (the size that I have chosen is 500 by 200 pixels).

Select the gradient tool and select the radial gradient style. Now fill the document with a gradient from the left to the right (start about 100 pixels or so inwards from the left and half way down from the top). The lighter colour on the left is #1c1c1c and the darker colour on the right is #080808.

Step 2

Using the rectangular marquee tool make a fixed sized selection of 100 by 100 pixels on the left like so.

Step 3

On a new layer (Layer > New > Layer) fill the selection with a radial gradient from the top left (colour is #69a01e) to the bottom right (colour is #93d43b).

Step 4

Select the rectangular marquee tool again and make a fixed size selection of 30 by 30 pixels and make the selection in the top left corner of the green box.

Hit delete and this will delete whatever was in the selection.

Step 5

Repeat step four for the remaining 3 corners.

Step 6

Now we are going to be adding a stroke to the shape by going Layer > Layer Style > Stroke. The colour I have used there is #5b8e19.

Now your logo should be looking like this.

Step 7

Next up we are going to be adding a shine to our shape. Select the area of your shape (ctrl + click layer in the layers window).

Go Select > Modify > Contract by 2 pixels. This will achieve a double border effect. One with the stroke and one with having a space between the shine and the border.

Step 8

Using the radial gradient tool again make a gradient from top left (white) to bottom right (transparent).

Lower the opacity of the shine layer to 50%.

Step 9

Now we just need to add some text and we are complete. Here I have chosen a … different … font called Aubrey. The colours that I have used are #adadad and #ffffff.

I have also added a drop shadow to this text (Layer > Layer Style > Drop Shadow) - there colour is #2b2b2b.

Here is what it should be looking like now.

Step 10

Add some small text (the colour that I have used is #4c4c4c)…

…and you are complete!

Create a new document (File > New) 100 by 100 pixels and fill the background (Edit > Fill) with white.

Step 2

Make a new layer (Layer > New > Layer) and select the Elliptical Marquee Tool. Make a fixed sized selection of 75 by 75 pixels in the middle of the document and fill it with a linear gradient from #68ac00 to #036800.

Step 3

Now we are going to be applying some layer styles to the icon.

Layer > Layer Style > Outer Glow

Layer > Layer Style > Gradient Overlay

Layer > Layer Style > Stroke

Your icon should now be looking something like

Step 4

Next up we are going to be adding a shine layer so create a new layer and select the area of your icon. You can do this by going Ctrl + Click on the icon layer.

Go Select > Modify > Contract by 2 pixels.

Now select the Elliptical Marquee Tool (set the style to normal) and while holding down the Alt key subtract the bottom half of the selection like so…

…and release.

Step 5

Create a new layer if you have not already and select the gradient tool. Set your foreground colour to white and apply a gradient from white to transparent in your selection (go into the gradient editor by clicking on the gradient bar at the top left of the photoshop window and select foreground to transparent).

Now left click at the top just above the selection and drag down to just under the bottom of the selection like below. What this will do is not make it 100% white at the top of the selection to 0% at the bottom, it will be more gradual which is what we want.

With any luck your icon should be looking pretty shiny now

Step 6

Now we are just going to be putting whatever we want on the top for the button’s purpose.. it could be an arrow or whatever so I have just chucked one of the default photoshop arrows in using the custom shape tool

Fill (remember from the start? Edit > Fill ) the selection with white.

Step 7

Add an outer glow to your arrow by going Layer > Layer Style > Outer Glow.

And you’re finished!

CSS Reboot

CSS Beauty

Best Web Gallery

screenfluent

CSS Heaven

Style Crunch

CSSclip

Screenalicio.us

CSS Elite

csstux

CSS Remix

CSS Mania

CSS Bloom

Stylegala

W3C Sites

CSS Drive

unmatchedstyle

StyleTheWeb

Standards Reboot

CSS Princess

CSS Hazard

CeeSeS

CSS Collection

CSS Website

DarkEye

Design Shack

CSS Container

Web Creme

Designer Source

First of all create a new document 540 by 220 pixels and fill the background with a gradient from #d3ecff at the top to #ffffff at the bottom.

Step 2

Create a new layer (Layer > New > Layer) and select the elliptical marquee tool. Make a small circle and then add to it by holding down the shift key and making more circles until you have something looking like a cloud:

Step 3

Fill the selection with white (#ffffff) by going Edit > Fill with colour.

Step 4

Now we are going to give the cloud a little drop shadow so it is more visable at the bottom and looks a little 3D-ish.

Layer > Layer Styles > Drop Shadow. The colour there is #d3ecff.

Step 5

Duplicate that layer a few times so that we have a few clouds. Move them around the document leaving a space near the bottom for the text. To change the size of them go Edit > Transform > Scale.

Step 6

Next up we are going to be doing the text for the logo, the colour that I have used here is #78b5e3.

Step 7

We are going to be adding a reflection to our text to go along with our dreamy sort of theme, so duplicate the layer and move it below the original text layer.

Step 8

Then go Edit > Transform > Flip Vertical.

Step 9

Now go Filter > Blur > Motion Blur, with an angle of 0 degrees and a distance of 10 pixels. This should hopefully make the reflection more realistic

Step 10

Lower the opacity of the reflection to 30%.

Step 11

Add a vector mask to your reflected text and make a gradient from white to black within the text area so that it fades out (ie looks even more like a proper reflection :)).

Step 12

Now lets go back to our original text layer and make it look better by giving it a gradient overlay.

Layer > Layer Styles > Gradient Overlay.

Now you’re done and it should be looking something like this…