Free Photoshop Tutorials

If you're new here, you may want to subscribe to my RSS feed.

Welcome to PhotoshopPoint! In this Photoshop tutorial I will be showing you how to design a cute, cloud-based website navigation. This would come in handy if you were designing a website based on say, baby-related stuff, or a kids website.

1.

Start by making the background/setting for the clouds, a light-blue sky. Firstly make a #30a4d6 to #5bccec linear gradient in the Background layer.

Now create a new layer. Reset your colors to Black and White by pressing D on your keyboard. Now go to Filter > Render > Clouds.

Into the layer’s palette, change the layer mode for your clouds layer to Soft Light and lower the opacity to around 30-55%.

And now you have a nice suiting background.

2.

Create a new layer (Layer > New > Layer) then find and get out the Elliptical Marquee Tool.

Now you might want to set the “Style” to Fixed Aspect Ratio so you won’t have to hold down shift to make the circle perfectly rounded.

Now, create a bunch of circles on the canvas so that you make a sort of cloud shape.

If you’re on yuor new layer, fill the selection with white and deselect (CTRL+D)

3.

Right-click your layer in the layers palette and go into the Blending Options, now apply the following layer styles:

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

And now your cloud should look like this:

4.

Now, you need to repeat what you just did, using the Elliptical Marquee Tool make 3 or more clouds on new layers, then copy and paste the layer style.

I ended up with 5 clouds.

Not bad, but it’s missing something… ah yes! Text!

5.

To finish this off you need to of course add the text! Start by getting the Horizontal Type Tool and writing out your text.

The font I’ve used above is called VAG Round, you can download it from here. The size is 16 pt and the color is #a579ff.

Now that you’ve written out your text, to give it a nice touch you can apply the following layer styles:

1. Drop Shadow
2. Gradient Overlay

And now your text should look like this:

Now you need to repeat this with every other cloud, but simply change the text color so that it looks more unique.

6.

And that’s pretty much it for this tutorial, how to make a nice and unique navigation set. I hope you enjoyed this tutorial. If you want you can download the PSD file for the end result from here.

 Loading ...