Cute Cloud Navigation Set

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.

Cloud Navigation Tutorial Result

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.

Linear Blue Gradient

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

Render Clouds Applied

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

Layer Mode Clouds

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.

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.

Fixed Aspect Ratio

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

Circles

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

Filled Selection

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:

After Layer Styles Applied

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.

More Clouds Added

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.

Text Written

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:

Text Layer Style

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

Text Changed Color Added

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.

Cloud Navigation Tutorial Result

Leave a comment