How to make fog?

[Shaz]

I have made a couple of fogs for my game in the XP all-over-blurry-cloud style, but really not happy with how they're looking.


I want something like this, with wispy, streaky line type fog:

Could someone please walk me through the steps to create something like this in Photoshop, GIMP or Paint.net? I am imagining it's only a few clicks, but I can't seem to find a filter/blur that gives me these lines.

 

[nio kasgami]

I can try to make some try ;3 this is not hell hard to do this wich size the file?

 

[Shaz]

The XP fogs are all 256x256. This needs to tile seamlessly which might make it a bit harder. It's for my commercial game Nio, which is why I wanted someone to just explain it (thinking with the steps in front of me, it would be easy enough for someone as artistically-challenged as me to do it myself now, and down the track if I need more)

 

[nio kasgami]

for a photoshop process it is rathivelly easy 

you have first to do a mask (for selection) 

after you input a basic color as you want  the fog 

after you use duplicate the layer

after you take a heavy Blur brush with big size and blur everythwere on the first layer

you reduce the opacity of the first layer (for make a really opaque effect)

and now the second layer

you do a light blur method with small size for just blur the ''corner '' of the layer fog

and finally you reduce the second layer opacity to the  intensity you want but be sure the second layer opacity is bigger then the first layer 

after you can add some little details like make the first layer a litte more big of the first

for better fog effect make the fog file a little more bigger of the xp file resolution or it risk to have a cut off effect 

Hope I help you ;3

 

[Shaz]

Sorry Nio - I know so little about photoshop that even "you first have to do a mask" is not an instruction I can follow. I know what a mask is, but I have no idea how to do one. I need "go to this menu" "select this option in that window" "put this value in this field" beginner-level instructions (screenshots are awesome).


Would your instructions create a seamless fog? Could I tile the images side by side and above/below and not see where they are joined? The fog will be scrolling, so I need it to be seamless.

 

[nio kasgami]

Sorry Nio - I know so little about photoshop that even "you first have to do a mask" is not an instruction I can follow. I know what a mask is, but I have no idea how to do one. I need "go to this menu" "select this option in that window" "put this value in this field" beginner-level instructions (screenshots are awesome).

Would your instructions create a seamless fog? Could I tile the images side by side and above/below and not see where they are joined? The fog will be scrolling, so I need it to be seamless.

i am sorry shaz I done a lot of time the error of assume people know what I say 

hoo sorry I never thinked it was a scrolling fog D: 

but first for the mask  option wich photoshop did you use first because the method change between photoshop version

 

[boldpaste2]

This is how I do it.

In gimp, set up your fog dimensions and use Filters > Render > Clouds > Fog

Play with the features to get it to you liking.

Then, go to Filters > Blur > Motion blur and again, edit the settings to you liking,

And wallah, you should get what you got in that pic, but your not done yet.

So far, the fog is not seamless which is bad so you would want to expand you cavas, make a duplicate, and layer the sides you do want it to be seamless. Once you got that, take an eraser to clean it up, and get it back down to your single layer again.

I'm not good at giving instructions but I hoped this helped ^^

EDIT: for that multi color effect, take the end result, flip it, and then use the hue saturation tool. You may have to adjust it's opacity a bit :3

 

[Venka]

maybe you could steam a video of how to do it nio (just a suggestion since I know you steam your drawings sometimes). I'm no good with photoshop either =P I use fireworks cause it's easier for me and less intimidating

 

[Shaz]

Thanks guys. I gave it a go but I'm not coming up with anything I like.


I'm just going to put it in Classifieds and get someone to do it for me.

 

[Setheim]

Ok, I've been doing tests, I got something similar, using photoshop.

Create a new file, I suggest it to be larger than your minimum screen size for VX ACE (at least).

Press "D" to reset the colours (black front / white back)

-Go > Filters > Render > Clouds.

-Filters > Render > Differentiate Clouds.

-Ctrl + i (To invert colours)

-Filters > Blur > Motion Blur (adjust as you wish - I used horizontal at 50.)

-Ctrl + T and the image will select itself to be transformed. Shring it vertically only, at will..

-Ctrl + A (select all) > Ctrl + C (copy) > Ctrl  V (paste) (Multiple times if needed) and put the pasted below the original one to cover the whole screen.

-Select all layers that you created and merge them together (select them using Shift and then right click on any of them > Merge selected).

-Filters > Distort > Wave (and move as you wish).

-Press W to select Magic Wand Tool. On the options above put Tolerance to 10, check Anti-alias only and click on any part that is white, it will select all white parts on the image, then delete it (use Supr). 

And that's it... of course it will not be perfect, the rest will have to be done manually, using the eraser and the smudge tool, work the edges so nothing ends abruptly. Once you are happy with the end result you can use it as a regular fog. I used Woratana's fogs, using blend type 1. Fog Opacity at 40ish and it looked quite similar to what you wanted.

I know it doesn't sound really easy, but trust me, it's not that hard, it may just require a bit of practice and a few tries but not too many.

Let me know if you have any question.

Cheers.

 

[Venka]

I like the key commands I don't use photoshop much so this takes out a lot of the hunting for the tool and I find myself using key strokes for tools a lot in fireworks as well

 

[Adellie]

Hey Shaz,
 
On filters and wispy shapes:
As far as I know, there isn't a way to get wispy fog, as shown in your image, just by using filters. If you only use filters, you might get a wavy texture, but it will either have obvious horizontal lines or obvious "s" shapes. For the effect you want, drawing/smudging by hand is the way to go.
 
That being said, I don't think wispy fog would look as good as you think... I probably shouldn't make assumptions but i have a gut feeling that obvious wispy shapes panning over the map would be awkward unless you have animation frames. This is the main thing that stops me from trying to fill your request.
 
My attempt:

I know you've posted in the classifieds section but i wanted to reply here since I don't exactly have what you want. @-@;; I tried creating fogs for the first time just last night. I used your multilayer fog script. 

 

The shapes are certainly not wispy, but thinner than the usual "Render-> Clouds" fogs. It's also a seamless texture.

• Image 1 moves at speeds: 6, 0
• Image 2 moves at speeds: -2, 1 (just a lower contrast version)

 

(I don't know why tinypic changed the .pngs to .jpgs, but if they don't work try renaming them to .png)

Hopefully this can serve you until you find someone for the job.

If it's a far cry, or you already have something, maybe it will be useful to someone else.

 

[Shaz]

That is PERFECT!!! Well, not exactly like the image I had, but the effect is better than anything I've come up with, and should work very nicely in those areas. Thank you so much! Please PM me your paypal address and I'll send you some money

 

[Gui]

[...]

The shapes are certainly not wispy, but thinner than the usual "Render-> Clouds" fogs. It's also a seamless texture.

For anyone who doesn't know but may be interested into knowing that, you can get a seamless tex with Photoshop's Clouds filter if you use a pic with hexadecimal format; for example: 128*128*, 256*256, 512*512, 1024*1024, etc.

Adding the Motion Blur effect may ruin this though, but you can solve this issue in using your Cloud render as a pattern in a new image twice as big as the original: once the Motion Blur is applied, just crop this new, bigger file to the size of the original Cloud render with Canvas Size.

'Hop it may help someone: all of you take care!

 

[GrandmaDeb]

Piling on with Celianna's graphic aid tut.

http://www.rpgmakervx.net/index.php?showtopic=40071


Theadellie, great tut and graphic!

 

[Shaz]

I put these in my game. They look great!


Thanks GrandmaDeb - I took a quick look at that, but it was slow to load at work (and quite a bit of reading). I'll go through it in detail at home tonight.

 

[JoanaN]

I also use the Clouds filter to create fog but to make the effect more realistic I use fog brushes too

 

[slimmmeiske2]

JoanaN, please refrain from necro-posting in a thread. Necro-posting is posting in a thread that has not had posting activity in over 30 days. You can review our forum rules here. Thank you.

This thread is nearly five years old...