| |
How to: Create Opaque Fade Filters
Tutorial By 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. :P
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. :P
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! :D
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? :rolleyes:
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. :D
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. :P
Hope that all of you have fun, playing around with this!
~1337Elite
Click here to comment on this tutorial.
|
|
