Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.

[Photoshop] Simple Tutorial for Better Clouds

Hey there. I don't know about you, but the fogs included within the RTP are rather limited. Small, inefficient, not to mention the ridiculous aspect of the fluffy 002-Clouds01.png

Well today I propose a simple way of creating a quick and efficient fog, original, using photoshop. Perhaps some of you already use this, but if you don't, great! If you do not have this all-around software, well...you can always use the one I give here.

So let's start by making a document. File > New... Note, however, two points :
  • It must be a perfect square document whose size if a power of two (256, 512, 1024, 2048, etc). Why is that? Unless you have such sizes, the clouds filter will not tile. Sure, you can use the patch tool or whatever other method to remove the seams, but it will not be as nice as if it was totally flawless to begin with. Not to mention saving time.
  • Make it as big as possible. The bigger it is, the less often the same clouds appear and the better. It will, in any case, be a JPG grayscale image, and will not weight much. Naturally, no need to overdo that either.

I choose a 2048x2048 document. A 1024x1024 will do just fine, too.

-Go ahead and hit the "D" key. It sets the background and foreground to white and black, respectively.
Clouds_1.jpg
Got this? Great.

-Go to Filter > Render > Clouds. Like that.

Clouds_2.jpg


-You shouldn't need to, but I'd advise you to go to Filters > Others > Offset... . Play around with the sliders. Do any seams appear? No? Perfect, you can hit cancel. (Make sure you have "Preview" checked!)

-Hit Render > Difference Clouds either once or thrice. It depends on your personnal preferences. With three times, the clouds will appear a little sharper. I used three. If you feel there are too many white "strings" or "loops", you can always undo (Ctrl-Alt-Z) to render difference clouds again. If you have no idea of what I mean by that, just follow on and ignore.

Clouds_3.jpg


-Doesn't look to good eh? Don't worry, we shall fix this. Go to Image > Adjustements > Levels... . That function puts more emphasis on the either the black, grey, or white part of the image. Just play with the sliders, you'll understand in a second if you didn't already do. Now, move the black arrow rightwards and same for the grey one, but a little less.

Clouds_4.jpg


-Those are my configuration. It's really up to you to get what you like though. In short, the black arrow determines the amount of clouds and the grey one, the sharpness of them. You do not need to touch the white one. Here's another possible configuration.

Clouds_5.jpg


-So then, press OK (obviously). There you go, you have it! Or not, one last thing. Go to Image > Image Size... And shrink your image by half on both width and length (50%). Why you may ask? Cause it's just clouds, you don't need it to be very high resolution. Some blurry shadow overtop of your head (or character) is enough. But then, why not have a smaller size to begin with? Remember, the higher the size, the more clouds are rendered, and you want diversity as much as possible (at least, I do).

-Now just save your file in JPG format, and there you have it!

-Now once on RMXP, have the following settings. You may adjust opacity depending on how dark you want the cloud shadows to be. You may have movement or not at all. Zoom it since real clouds are kinda big.

Clouds_6.jpg


-So there you go! Adjust screen tones if needed.

Clouds_7.jpg


And if you don't have photoshop, don't be sad, I have made those two for you ^^.

This and this

And remember, you don't need to follow this tutorial exactly as it is, try experimenting with your own settings!
 
Wow!
That was pretty helpful. I always wondered how I could make my own fogs. The RTP ones do get rather tiring after a while.

Thanks for the tutorial.  :thumb:
 
Eh, fogs tend to look weird on most maps, but if you really insist on using them, I suppose this works. The Photoshop origin isn't that noticeable if it's overlayed on a map as a fog, but if you use the PS cloud filter to make panoramas or something, I strongly suggest editing them beyond the scope of this tutorial so people don't roll their eyes at the obvious filter-generation. Using levels does make them look much better, though.
 
Even if fogs in general do look out of place, I believe the point is that this is a damn lot better than the horrible RTP clouds.
 
Commander Wyatt":zvd0t9n4 said:
Even if fogs in general do look out of place, I believe the point is that this is a damn lot better than the horrible RTP clouds.

Yeah, that's the point :smile:. Besides, it's just a little something I felt like doing because I had time to waste. Real fogs are rather uniform anyway and would be more realistic as a picture (follows you, like a lantern).
 

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

Content

  • Our Games
  • Games in Development
  • Emoji by Twemoji.
    Top