Designing a Cartoon Cloud Splash-Image

23. Jun, 2006 29 Comments

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)

Twitter Digg Delicious Stumbleupon Technorati Facebook
Graphic Design
Tattered Ancient Banner Effect
Stylish Glossy Clan-Themed Navigation Bar

29 Responses to “Designing a Cartoon Cloud Splash-Image”

  1. Timski 05. Jan, 2007 at 4:27 pm

    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.

  2. Kaleen 17. Jan, 2007 at 9:35 pm

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

  3. seri 25. Apr, 2007 at 2:23 pm

    ı 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
    ********************************************

  4. sssssssss 17. Jun, 2007 at 5:31 pm

    cool.

  5. kannan, mdu 03. Jul, 2007 at 12:29 am

    very super… yaaaaaaaaa !!!!

  6. Paul 22. Nov, 2007 at 4:59 pm

    WOW!! Amazing… :)

  7. chuliy 24. Feb, 2008 at 4:06 am

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

  8. Nizam 15. May, 2008 at 8:06 am

    Very very nice, thank you very much

  9. Chidara 19. Feb, 2010 at 9:41 pm

    wew

« Older Comments