If you're looking for a clean custom web design, then visit the incredible team over at Captain Marketing Thanks for visiting!

CSS Vault

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

Step 1

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…

Step 1

Create a new document and using the Elliptical Marquee Tool make a circle in the middle of the document. The size I have used here is 150 by 150 pixels.

Step 2

Now select the gradient tool and set it to reflected gradient (this will obviously reflect the two colours that you use instead of just a straight gradient). Set your foreground colour to #1d1e1e and your background colour to #605e62 and make sure that you are on a new layer. Left click in the center of your selection and drag to the top of it and release. This makes a gradient from the lighter grey at the top to the darker grey back to the lighter grey at the bottom.

Step 3

Our next task is to add some effects to this boring circle so apply the following layer styles.

Layer > Layer Styles > Outer Glow

Layer > Layer Styles > Inner Glow. The colour is #023f78.

Now your orb should be looking like this.

Step 4

Now to use the pen tool, select the “Pen Tool”.

And add some points like so…

Select the Convert Point Tool – this is another form of the pen tool.

Zoom in a bit with the (short cut is z and left clicking). Now click on the little boxes that you have made and drag them out a bit so that you make a curved shape.

Right click the area and select make selection (with a feather of 0 pixels). Make sure that you are on a new layer (if not, create one). Fill this selection with the colour #007eee, you can do this by going Edit > Fill.

Step 5

Add an inner glow to this new layer by going Layer > Layer Style > Inner Glow. The colour there is #023f78.

Step 6

Duplicate that recent layer and rotate it around by going Edit > Transform > Rotate and rotating it around. Move it to the bottom of the base of the orb.

Step 7

Now lets add some text to our logo, firstly just move the orb over to the left a bit so it’s out of the way.

Grab the text tool and add some text. The colour of my text is #007dee.

Step 8

Add some layer styles to the text layer so that it doesn’t look so boring

Layer > Layer Style > Inner Glow. The colour is the same as before, #023f78.

Layer > Layer Styles > Gradient Overlay

Now your logo should be looking like this.

Step 9

Lastly we are going to be adding a sort of shadow to the text so create a new layer and make a selection like below with the rectangular marquee tool.

Fill that selection with a linear gradient from #d3d3d3 to #ffffff with the gradient tool.

Select the eraser tool and using a large soft brush erase around the sides and bottom of the gradient until you have something you like and you have finished your orb logo

Step 1

First of all add some normal text into your document (works best on a white background), I have used a font called Delicious Heavy. Choose a font that is bold and clear.

Step 2

Now because we want to adjust the text using the transform option we need to rasterize the text layer so go to the layers window and right click on the text layer and select Rasterize Type. Now we can go Edit > Transform > Perspective. Drag one of the bottom corner boxes outwards while holding the shift key (this does the other side too to keep the sides even).

Hit enter to set the transformation.

Step 3

Duplicate the text layer and move it up by one pixel. The short cut for duplicating a layer is Ctrl + J and the short cut for moving it up a pixel is Ctrl + Up arrow key (while keeping the text tool selected). Repeat this process 15-20 times until you have something like…

Step 4

Now we are going to be doing the top of the text – the colour. Select the top layer (the most recent duplication of the text layer) and add a gradient overlay (Layer > Layer Style > Gradient Overlay).

Step 5

On the bottom text layer (the original one) add an outer glow (Layer > Layer Style > Outer Glow).

Step 6

Now merge all of the text layers left (the ones without layer styles) and add a gradient overlay to the merged layer (Layer > Layer Style > Gradient Overlay).

Step 7

To finish with we are going to give it a shine, so using Elliptical Marquee Tool make a selection above the text on a new layer and fill it with white. Select the area of the top text layer (the coloured one) and invert the selection and hit delete. Lower the opacity of the shine layer to 33% and you are finished!

Step 1

First of all we have to make a new file, so go File > New and set the height to 100 pixels and the width to 100 pixels with a transparent background (or white, it doesn’t really matter because we’ll be adding another background shortly).

Step 2

Now we are going to be adding a gradient for the background. Select the gradient tool from the tools window and set the foreground colour to #007dee and the background colour to #023f78. Select the radial gradient type of gradient and left click in the middle of the document, and drag to a corner and release. This has made a radial gradient in our document.

Step 3

Next up we are going to be adding a little strip along the bottom. We are going to do this by selecting the Rectangular Marquee Tool and setting the style to “Fixed Size”, the width to 100 px and the height to 5 px. Now click at the bottom of the document and this will create a box with “marching ants” around it.

Step 4

We are now going to be filling this selection with a dark grey. There are a number of ways we can do this, but the simplest is to go Edit > Fill, select colour and use the colour #252525.

Step 5

Now we are going to use the text tool to add some text in the middle of the document. Select the text tool and use the settings I have below (or a similiar font) and type in your initial.

Your avatar should now be looking something like:

Step 6

Last of all we are going to be exploring the layer styles, so go Layer> Layer Styles > Outer Glow.

Now your avatar is finished and should look like:

Step 1

Open a new document; apply a Radial Gradient on the first layer. I have used two dark red colours for this tutorial. Create a new layer. Select the Rounded Rectangle Tool and make a selection in the center of the document. Fill it with #FFFFFF (white).

Step 2

Now we will apply blending options to the second layer, i.e. the layer with the white box. Apply Satin and a Stroke with the values shown in the following figures. Experiment with other blending options if you like to make your design stand out.

Satin:

Stroke:

This is what the navigation box looks like at this point.

Step 3

Add some text links. I have used Futura Md for the “Navigation” text and Futura Lt for all the other links.

Step 4

Now we will create the rollover effect. On a new layer, make a selection around one of the links. Fill this selection with a dark red colour of your choice.

Add a Layer Mask. (The layer mask/vector mask button can be found at the bottom of the Layers window to the right of the blending options button). Select the Soft Mechanical 100px brush. Set the foreground colour to black, and brush the outsides of the box, so that this layer appears to merge with the main box. If you think you have brushed it too far, simply set the foreground colour to white and rebrush the areas. This will restore the original layer. Set the Layer Opacity to 14%.

Step 5

Now we will add a shadow at the top of the box. Create a new layer- call it “shadow”. Select the original layer with the white box, (the layer created in Step 1). Now select the “shadow layer” and apply a gradient from black to colourless. Reduce opacity to 45%. You can delete the majority of the bottom half it you like. The gradient should look something like this:

Apply a layer mask (as in step 4) so that the bottom of the “shadow” layer merges with the rest of the navigation box.

Step 6

Finally, we will make a glassy effect on top, again using simple techniques. Create a new layer called “glass”. Select the Pen tool and make a selection that resembles the one in the figure:

Now select the Convert Point tool and modify the figure to get this:

Right click > Make selection. Fill the selection with #FFFFFF. Change the layer mode to Soft Light with 60% opacity. Delete the part of the selection that is outside the box borders. (Select the layer from Step 1, use the Magic Wand tool to pick the area outside the navigation box, reselect the “glass” layer and hit delete)

1. artViper Design Studio

2. Colorcharge

3. Drew Wilson

4. Infinise Design

5. Extendio

6. Famster

7. iWeb Square

8. Wake Interactive

9. Maxasia.net

10. Merix Internet Technologies

11. Moourl

12. Xyberneticos

13. Rullkotter AGD

14. Daring Fireball

15. Josh Lockhart

16. Puerto Baires

17. Elixir Graphics

18. Macrabbit

19. The Skinny

20. ZooAdventurer

1. Snowflakes

2. Vector-Grunge

3. Rise

4. Mystcart IV

5. Inner Universe

6. Winter Breeze

7. Abstract X

8. Tasty Tattoo

9. Fractals

10. Defective Photo Films

11. Skylines

12. Choice Spring

13. Swirly Ornaments

14. Lotus

15. Creepy Trees

16. Vintage Hands

17. Psionic Storm

18. Vectors

19. Antique Music

20. Trance