Designing a Cartoon Cloud Splash-Image

You can see what we’ll be designing in this tutorial below, I call it a ‘cartoony cloud splash’, because I think it could be used effectively as a website splash page. This tutorial is really really easy, in case you’re new to Photoshop!

Cartoony Cloud Splash Design Result

1. Create a New Document

First thing to do is start by making a new document in which you can make your clouds. For this tutorial I used a document size of around 400 x 400 pixels, with a Resolution of 72 (default)
Using the Gradient Tool, draw a nice, blue gradient on the background, it’s meant to resemble the sky! Colors used here: #6dbede to #2f82c0 and now you have a nice soft background.

Blue Sky Gradient Background

2. Creating the Cloud Shape

Firstly create a new layer, now find and get out the Elliptical Marquee Tool, using similar settings to the ones below.

Now make a bunch of random circles, attempting to make a cartoon-shaped cloud.

Cloud Elliptical Selections

Complete the cloud shape by filling up the selection in the middle of the cloud.

Cloud Elliptical Selections Finished

Make sure you’re on the new layer you created, then fill the layer with white – #ffffff.

Cloud Selection Layered filled White

Nice cloud shape, huh?!

3. Adding Effects to the Cloud

The cloud looked quite nice already, but to give it some more detail, you might want to apply the following layer styles to your cloud layer:

  1. Inner Shadow
  2. Outer Glow
  3. Inner Glow
  4. Gradient Overlay
  5. Stroke

Depending on what size you made your cloud, you may have to modify the layer styles just a little bit, feel free to do so. Your cloud should now look like this:

After Applying Layer Styles

Looks pretty nice, in my opinion! And now add some text if you want, you can use it for a navigation system at the start of your website (splash page)

Cartoony Cloud Splash Design Result

Fin

Thank you for reading the tutorial, everyone, I hope you enjoyed it! If you need to, you can of course download the PSD file for the end product from here: cartoon cloud splash PSD download (200kb)

Return home. Published Jun 23rd, 2006 under Graphic Design.
Previous Random Next
Digg Delicious Reddit Float Stumble

You must be logged in to post a comment.

28 responses

pratibhak said:June 26th, 2006

it was good to start with

Ekke said:June 26th, 2006

Nice tut.. but the text-color is a little unreadable :P

Kevin said:June 26th, 2006

Nice, very nice. Would be cool as wallpaper or even as graphics for a game. It looks so friendly, plus you can easly make more clouds on the same layer without setting those effects again :D

Cloud No9 said:June 26th, 2006

Brilliant! I think I am going to use this technique. I have been quite puzzled about my logo-perhaps this may be a good idea!!!

Thnx,

Cloud No9

Sheepo Designs said:June 26th, 2006

Wow, I’ve been looking for a tutorials on a cartoony style of PSing for a while now, you saved me a lot of trial and error!

Mexm said:June 26th, 2006

This one is soo nice, it looks very cool, thanks ;-)

web designer india said:June 27th, 2006

Good tutorial for beginners. keep going.

sndr said:June 27th, 2006

so simple so cute

Andy said:June 27th, 2006

Awesome tutorial this is, styles are brilliant!

zookini said:August 4th, 2006

This was a wonderful tutorial!! Thanks

indah said:August 10th, 2006

not bad………………….
i like that

dora said:August 10th, 2006

so goog, so cool………….
but
im confuse????????????
how to practice it in photoshop?

admin said:August 13th, 2006

Dora: I’m sorry but I don’t completely understand you..
Keep practising photoshop and then you’ll be much better :)

Thanks for the comments everyone.

dora said:August 18th, 2006

ok
i have practice it………
and………………
i can :)

empty said:August 28th, 2006

as always, good tutorial :)

hiba said:August 31st, 2006

I LOVE YOUUUU!!!!
i swear its awesssooomeee

Dearon said:September 5th, 2006

Really nice tutorial, giving it a 10 out of 10.
I’m using the effect for the new layout of my website (which is already up), and i’ll definitaly put a link to this tutorial just because of the sheer awesomeness =P
Anyway thanks for making my day =)

Julefar.dk said:October 3rd, 2006

COOOL !!

Suki said:October 13th, 2006

well… something went wrong and it was only the bockground who got the layerstyles, not the cloudes :S
I duplicated the layer…. what happend? :(

Kathryn said:November 13th, 2006

That’s really cute I like it. :)

Timski said:January 5th, 2007

Hey Mate, Excellent little tut and I used to make mine a little diff. Just letting you know on step 2 for beginners let them know they need to hold shift to make multiple selections.

Kaleen said:January 17th, 2007

awesome tutorial!
loved it and use it all the time now
thanks!

seri said:April 25th, 2007

ı use your tutorial in my web site.
my splash is more beautiful than yours.
::)
you can sea it from

********************************************
http://mathsforum.googlepages.com/splash.gif
********************************************

sssssssss said:June 17th, 2007

cool.

kannan, mdu said:July 3rd, 2007

very super… yaaaaaaaaa !!!!

Paul said:November 22nd, 2007

WOW!! Amazing… :)

chuliy said:February 24th, 2008

nice cloud….very like it…. n thanx for the tutorial :)

Nizam said:May 15th, 2008

Very very nice, thank you very much