How to: Create Opaque Fade Filters

[1337Elite]

Creating Opaque Fade Filters
The Basics of Alpha Masking
----------------------------​

Introduction
I've noticed that many has posted question-threads about transparent fade filters. That's the reason that I wrote this.

So, welcome to my (short) tutorial! This will show how to use the following things:

• Create Transparent textures. Such as: Skins and Fade Filters
• Basics of Photoshop
• Wc3 Image Extractor II. How to save textures as *.blp's

And, with tutorials, there are almost always some tools of the trade. So you need to following programs:

• Photoshop, or other photo editing tool.
• Wc3 Image Extractor II, or other MPQ import/export application.
  Download here
• Warcraft 3: The Frozen Throne

There's what's needed for some basic, maybe advanced, texture editing.
I will go through everything, as throughly as possible. If I missed anything, or just made something wrong, that you want to have changed, just post a complain.

Shall we get started?

I. Creating the Texture
Open up Photoshop, then create a new texture, preferably with the dimensions 1024 x 768 px. If you want real high quality, and a huge space-waster, you could go with 1600 x 1200 px. Select the Magic Wand tool[W], then select the background, then press delete. Now you should have a transparent background. But! This will not be transparent in-game! We will have to make an alpha map!

Now you should have a blank and transparent image. Think the image as the screen in-game. If you want something that will be shown in the upper-right corner of the screen, you could do something like this:

A sample Fade Filter

Now we have our base-texture, but how will we make it transparent? If you would convert this to a *.blp texture now, you would get the: "Now approaching[...]"-thing, and a black background. Read the next chapter, or step, to read about Alpha Masks.

II. Alpha Masks

Alpha Masks are very useful, when it comes to texturing. They handle the transparencies, by checking the darkness/brightness of the pixel. They can only be made in Grayscale/Black & White. The brighter the pixel is, the less transparency it has, and vice versa.
So, black is fully transparent; white is not transparent, at all.

Let's make a simple alpha mask. So we'll go back to our editing program.

Go to the Channels tab. There you'll find three Channels: RGB, Red, Blue, and Green. Create the Alpha mask, by pressing the second button from the right, at the bottom, to create a new channel. This will have the name "Alpha 1", and it will be fully black; fully transparent. This is the stuff we want!

This shows the Channel Tab,
and where the 'New channel" button, is located

III. Editing The Alpha Channel

The editing of the Alpha Channel is pretty simple. As I said before: White is not transparent, and black is transparent.
So we'll check my example's Alpha Channel, that I showed before:

Shows the Alpha Map and the Base texture, respectively.

Here, I have made an alpha mask, by selecting everything that's on my main layer, by Ctrl-clicking on the Display Image. (Keep the selection)
Then, I navigated to the Channels tab again, to select the Alpha 1(You maybe renamed it). The selection is still there, so I just inverted the selection(Ctrl - Shift - I), then I pressed delete.

If you did like me, you should have a simple Alpha Map! (Optional: Before you save it, resize the image to the dimensions: 512 x 512 px. Just to save some space)
Now, save the texture as a Targa(*.tga) image. Pick 32 Bit/pixel compression, it saves the Alpha Map correctly.

IV. Saving to a Blizzard Image Map(*.blp)

This is the final step! This should be the easiest step in this tutorial, except the importing step.

Open up Wc3 Image Extractor II, or your Image Extractor of choice.
Now open your texture, that you recently saved. (In the menu: Open -> Open Image.) The application should look something like below:


Don't worry, if you can't see the whole texture of your's, just press the "More..."-button, to see the whole texture. To be able to import the Fade Filter to the map, and use it, you need to save it as a *.blp. Press the "Save" button in the menu, and press the one and only button that's there. Click the
"Save as type" roll down bar. From there, select BLizzard image Map. Then save. ^^
Choose the wanted quality level; now you're done!

V. Importing it in your map

If you know how to import it, and use it in the game, you could skip this step.

Now that you have your nice Fade Filter, with an Alpha Map and all, it would be nice to see it in action, wouldn't it?
Open up your World Editor, and open up the Import Editor. Click the Import button, then choose to open your custom Fade Filter. Rename it, if you like. ^^

Create a simple testing trigger, that shows your Fade Filter. A simple example:

Test Trigger
    Events
        Player - Player 1 (Red) Presses the Up Arrow key
    Conditions
    Actions
        Cinematic - Fade out and back in over 2.00 seconds using texture war3mapImported\fade_filter.blp and color (100.00%, 100.00%, 100.00%) with 0.00% transparency

Remember: You need to have 100%, as the RGB(Red, Green, Blue) values, or it'll be black!

VI. Examples


The quality of the sample to the left, wasn't that good, because I didn't save it in quality.
Now you have something to play around with! And I hope people use this in their maps, as it's very decorative.

VII. Possible Uses
If you use your creativity, you could end up with some nice results. You could use this for, as I showed with my example fade filter, entering Region pop-up. You could use this for help menus, command windows.. Whatever that's static, and is not animated.

Hope that all of you have fun, playing around with this!

~1337Elite

 

[1337Elite]

Changes:

21/02 - Minor Edits.
25/02 - Changed name.

 

[Andrewgosu]

Haven't seen a reasonable and easy-to-follow tutorial in awhile. This is rather
good and useful. Good job!

Only thing that bothers me, is that the images are formatted to the right. They
would be better on left or in extreme cases, in the middle.

 

[n[u]ll]

I've noticed that many has posted question-threads about transparent fade filters.

yup thats me! xD
well great tutorial 5/5
it will be useful in the future when i forget how to do it =)

 

[1337Elite]

Haven't seen a reasonable and easy-to-follow tutorial in awhile. This is rather
good and useful. Good job!

Only thing that bothers me, is that the images are formatted to the right. They
would be better on left or in extreme cases, in the middle.

Thanks for the kind words.

Yeah, it bothers me too, kinda. I think I clicked the "Align Right" button. Fixing that right now.

yup thats me! xD
well great tutorial 5/5
it will be useful in the future when i forget how to do it =)

Thanks for the nice rating. ^^
It's great for people to know these things.

 

[Doom-Angel]

Nice one (+Rep ) thats kinda good even though i don't believe i will use it in my map but it's always good to learn something new

 

[1337Elite]

Knowledge is power.

Being creative with this, you could make all sorts of things. Like a static menu, or a window of sorts.

 

[Cilla]

Do you have control even if a filter is active?
If yes, this is AWESOME!

 

[Doom-Angel]

now when i think of it it might be useful

Edit: would u be able to pass the Topic Lines with Fade filter?

 

[1337Elite]

You have control. That's the awesome thing about them. ^^,

Edit: I'll add some possible uses for this, in the main post.

 

[elmstfreddie]

I just realized something, you could use an ever lasting filter like this of a crosshair to make an FPS game.. *ponders*

 

[Chocobo]

For the moment (yet), it's not really a total Transparent Fade Filter tutorial, since we can not see over the filter.

"Tutorial - Creating Fade Filters and using them" should be a more right title. (because there is only one part about it there, and you didn't wrote we can change the whole transparency with the trigger (the with 0.00% transparency on the trigger))
Only the Alpha Channel (black) is transparent.

 

[1337Elite]

For the moment (yet), it's not really a total Transparent Fade Filter tutorial, since we can not see over the filter.

"Tutorial - Creating Fade Filters and using them" should be a more right title. (because there is only one part about it there, and you didn't wrote we can change the whole transparency with the trigger (the with 0.00% transparency on the trigger))
Only the Alpha Channel (black) is transparent.

Now that I think about it, "Creating Transparent Fade filters", isn't that great of a title. It's partially transparent, not fully. I'll come up with a better name.

And, the whole gray scale is transparent. If you make a light gray pixel, that certain pixel, will get partially transparent. You can see that in action in the "BOOM!" fade filter, at the bottom. You can see partially through the edges.

nice tut

Why do you keep bumping this?

Because it gets on the fifth page, and I think this is great stuff to know.

 

[Chocobo]

Because it gets on the fifth page, and I think this is great stuff to know.

Some of mines are in page +100.

You changed Title Name of the post, but not the thread name. You should ask a moderator of WE Help Zone to do that.

 

[Ur-Quan]

This should get approved because it's usefull and unique tutorial on site.
I will use it as commercials in my map .

 

[Tom Jones]

Moved To Submissions. Please Rate the Tutorial.

 

[The Helper]

5 Star Bump

5 Star Bump!