How to draw Pixel Art clouds quickly

Well, if you’re into pixel art like me, you will eventually want to draw some kind of landscape. Regardless of whether it’s for a game or a simple illustration, you will end up having to draw a sky, and if you’re like me, you’ll start by drawing some blue, and then…

And then nothing happens. Skies are blue, yes, but your precious and detailed piece of pixel art seems like it is now in front of a blue screen of death, and your blue looks horrid. That’s where you think you need some clouds to break the monotony, but you have no idea how to draw clouds in pixel art.

So you boot your browser and look for how to draw pixel art clouds, but at least, at the time I wrote this, there are no single comprehensive articles on how to draw pixel art clouds. I suppose this is some kind of secret each pixel artist keeps to himself, because many pieces of art have some nice clouds, yet nobody even mentions how to draw them. This is where you wish you would have done an indoors scene.

Well, fear not. I have come to tell you of one way you can use to draw credible pixel art clouds very quickly. This speed thing is quite important, because you simply can’t waste hours and hours of time just to draw a single cloud, and then when you try it on your game, it’s too big, or too fat, or simply too useless. With this method you can draw clouds in 1-3 minutes each. This is enough to make lots of clouds, some of which you will keep and some of which you will erase without a single bit of remorse.

This method is meant to draw altocumulus and stratocumulus clouds, which are, in my opinion, the most cloud-like type of clouds. This is quite important in art, remembering the old adage:

“It doesn’t matter how real it is. What matters is how real it looks”

Also, this method is meant to draw clouds illuminated from above (that would be between 10 AM and 2 PM).

You don’t have to draw your clouds like this, but you can use this as a starting point for drawing your own custom clouds with all kinds of effects for all kinds of needs. So let’s get started!

Step 1

The first thing you want to do is choose your color palette. Most likely you already have your blue for your background, and that is going to be your first and darker color. From there, start making lighter and less saturated colors (some hue shifting wouldn’t hurt as well), until you have 6 shades of blue. The darkest shade is your sky color, and the lightest one should be white, or really close to it.

Make some rectangles with each of these colors as I have done on the top-left corner of my picture, So you can easily access them whenever you need them.

Step 2

Once you choose your colors, start by picking the lightest color and draw some pixels resembling downward arcs, or the letter M if you like. These are going to be the topmost pixels in your cloud. Don’t put too much thought into these pixels, but try and make sure they’re somewhat evenly spaced, and not too thick (especially at the borders).

As you can see, I’ve drawn some two groups of pixels, one on the left and one on the right, each one roughly going up and then down again. I know, you need a lot of imagination to visualize this >_<;;; These are the highlights of your clouds.

Step 3

Now with the next shade of blue draw some pixels below and to the sides of the pixels you’ve already drawn. Think of this as building a base for the pixels you’ve already drawn. Once again, don’t put too much thought into what you’re drawing.

Step 4

Now with the darkest shade of blue that is not the background shade, draw the bottom of the cloud. This should be drawn a little bit more straight, but as with the first pixels, they should somewhat resemble an upside pointing arc. Once again, don’t stress the precision of the pixels you’re drawing, as clouds are all about randomness.

This is the bottom base of your cloud, and the rest of the cloud will go in between these two slices.

Step 5

Now, with the next lighter shade of blue, do the same as you did on step 3, only that above the pixels you’ve just drawn. On the next step we’re going to do a floodfill so also try and adjust the pixels in your image so the interior of the cloud will get properly filled without bleeding to the rest of the sky.

Step 6

Now with the only remaining shade of blue, floodfill the interior of the cloud. This is quite straightforward, but now you can see most of how the cloud will be like.

Step 7

Now it’s time for details. Fix any pixels that don’t look very good, and add some other pixels where they need to be added. You should polish your work, but once more, don’t dedicate too much time to this. Before you finish, don’t forget to remove your palette.

Finished!

There, now you have a bunch of pixels that look like a cloud. Now make lots of them and now you have your sky!

14 Comments

  1. Posted 2011-04-19 at 05:30 | Permalink

    Thank you so much Oscar.
    I have struggled with pixel art clouds for literally years.
    However this frustration has now ceased thanks to your excellent tutorial.
    I really cannot thank you enough.

    Sincerely,
    Stop That Pixel

  2. Posted 2011-10-17 at 13:50 | Permalink

    Thanks so much! I was struggling so much with drawing clouds, but this tutorial had me drawing some of the best pixel art I’ve drawn yet in no time at all. Once again, thanks a tonne!

  3. Rivet
    Posted 2011-11-24 at 10:59 | Permalink

    Great tutorial. I hope to see more tutorials like this up on the site ASAP.

  4. Posted 2012-03-13 at 07:00 | Permalink

    A great tutorial. I linked back to you in the piece I uploaded here: http://fav.me/d4snua9.
    Thanks again!

  5. Posted 2012-06-17 at 03:22 | Permalink

    Wonderfull! I have been having so much trouble with clouds, and have had way too many inconsistencies in trying to make them through trial and error, im glad i found such a great tutorial!

  6. Sander
    Posted 2012-06-29 at 22:13 | Permalink

    Thanks man! This really helped me out!

  7. P. Le Zotte
    Posted 2012-10-01 at 04:22 | Permalink

    thx so much, clouds are sooooooo hard to draw and this really helps, i used to spend hours on them and they didnt turn out half as good

  8. Ulisse
    Posted 2013-07-22 at 19:21 | Permalink

    Thank you so much for this work, it really helps!

  9. Arthis
    Posted 2014-08-11 at 05:19 | Permalink

    I was wondering Oscar, what picture size are you using? I am struggling to get a pixel alone. I want to do animated clouds and I have a 128×128 pixels project.
    I think you are using something like 40×25 pixels but I’m not sure.

    Thanks!

    • Posted 2014-08-12 at 01:42 | Permalink

      Well, this is pixel art, so the image should be pretty small. 128×128 is a good size if you’re drawing a landscape, but for a single cloud it may be a bit too big.

  10. Vlad
    Posted 2014-08-12 at 01:36 | Permalink

    Thank you man so much!
    That’s a really cool tutorial. It very helps me.

  11. Red
    Posted 2015-02-17 at 07:44 | Permalink

    Holy cow!

    This is genius.

    I love you for ever.

  12. Travis
    Posted 2015-08-17 at 05:23 | Permalink

    Great stuff, man. Very straightforward and effective. Appreciate it.

  13. Johannes Weitnauer
    Posted 2016-03-29 at 05:12 | Permalink

    Thanks so much! you helped me a lot! I am a german programmer/”pixeldraw-stuff-thingy-maker” and without this Tutorial I would not be able to draw such pretty clouds in my games as they are now.. thank you so much ;)
    great, well explained tutorial


Post a Comment

Required fields are marked *
*
*