Wired Marketing Master Class: Week 1 How to create stylish clouds for an Email Template in Photoshop

How to create funky clouds in Photoshop

I recently created a cool design for an email template on the Wired Marketing site. Part of this design was to have some clouds in the header and footer. We have been getting a lot of people asking about the clouds on the design, so we thought it would be a good idea to share the knowledge and write this post to show you how to create this effect in Photoshop. Don’t forget to check out the screencast below that I made to go with this tutorial.



1. Create a nice background gradient

Having the gradient behind the cloud pulls it off the page. So starting with a new Photoshop document, create a new layer and open the blending options on that layer. Click on ‘gradient overlay’ and set the style to ‘Radial’.


Double click on the ‘Gradient’ option to open up the colour editor. Use white for the inner colour and #96ccee for the outer colour. Exit the colour picker and set the ’Scale’ option to 34%. This is a good background for the cloud.


2. Use circles to create a cloud shape

Select the ellipse tool. Hold down the shift key and draw a circle. It should be medium sized over the gradient. See below for a guide on the size. The colour of the circle is not important at the moment.


Create a new layer and add another circle overlapping the previous one. It should be further down, to the right and slightly smaller.

Add another circle on a new layer. Position this one in line with the first and about the same size as the first. So you have a Mickey Mouse shape…That could have saved me a few steps.

Another circle needs to be added on a new layer (we just need 5 circles, so nearly there!) This one needs to be over lapping the second and third ones but a lot smaller.

Final circle on another new layer. This one should be larger than the rest and fill in the gap between the first and latest circles. This should now resemble a cloud. You can adjust the sizes of the circles to get the shape that you want.


3. Add the circles to a group, duplicate and change the colour to white.

Select all of the circle layers so that they are highlighted in the layer panel. Then go to Layer > Group Layers. This will add the circles into a group folder.

Next right click on the group folder, in the layers panel and then ‘Duplicate Group’. You should have a copy of the group. On the group copy layer select all 5 circles and then right click them and select ‘Merge Layers’. It should now be on one layer in one group and multiple layers in the original group.

Leave the circles group for now. Right click on the merged layer and click ‘Blending Options’. Click colour overlay and set the colour as white. So now we have a white cloud.

4. Change the blending options to give the cloud some style

Stay in the blending options and click ‘bevel and emboss’. Change the options to match the options in the screen grab below:

Next, click on ‘inner glow’. Change the options to match the options in the screen grab below:

Another blending option, click on ‘inner shadow’ and copy the options below:

Finally click on ‘drop shadow’ and use the values below:

Hopefully you should have a pretty nice looking cloud. Now it’s time to beautify it even more.


5. Use the circles group to add “fluffiness” to your cloud.

Hide the circle group and drop the opacity of the original cloud layer to 70%.

Open your circle group and on the first circle layer hold ctrl and click on the layer mask box. This should select the circle.

With the circle still selected, right click on the cloud layer and duplicate the layer. Move this new layer below the original cloud layer. Next click on Layer > Layer Mask > Reveal Selection

On the new layer hold ctrl and click on the mask box. This should select the circle shape. Then go to filter > blur > guassian blur.

In the next box change the radius to 20 for the blur and click ok.

Repeat the actions in step 5 on all of the circles decrease the opacity on all of these new layers to less than 50% to make it more subtle. You should now have your fluffy white cloud.



Making background images work in all email clients (Even Outlook 2010!)
10 Tips for designing emails for Recruitment Email Marketing
What’s your working style?
There are currently no comments.