Edit: Upload your Static Overlays here!

This tutorial is an improved version of my last, it digs through many of the useful comments made in the thread and plants them on one page, someone complained about digging through the thread so i will try to do my best to get all the best info on a single page, in a great tutorial but it will be quite similar to the last, just alot of new info added where it is appropriate or better explinations on parts peope said did not make sense. This may be long, but please try to skim for what you're looking for and this can be a helpful reasource.

Things Added: Part II Better Animations [P-II] Part III, IV. and V
Transparent Overlays Viewpoints 'Superhero Fly' effect
Overlays with Paint featured as the new Part IV

Overlays are the future and present of special effects that will hit TMO like a BOMBSHELL as they have in films like OI3, and i thought i'd give a very simple walkthrough step by step with screenshots and everything for those who really don't understand modding but really wanna learn a way to take 100 backdrops that would be used for special effects, and condense them to a single easy to create scene that is real timed animation. This only words for people with The Movies Stunts and Effects I'd first like to give credit to TMWS , msaeluk, KRC , and Lizard3209 for teaching me but since their versions were a bit complicated i decided to make it very simple with screenshots

Getting Started

First, you need to get the right accesories. You will need a DDS Converter and to really understand and fully use the tutorial try downloading Adobe Photoshop Free Trial which will let you use photoshop for a bit, and you can either buy it or use it from a friend and a DDS Plug-In for photoshop is nifty as well.

Part I

Step 1

Okay. First, i'll teach you STATIC OVERLAYS so you can understand how the overlay system works before you go making complicated animation sequences. Okay open up your photoshop program and create a new picture sized 800 x 450 and that will be the base size we begin at. For new users, below are the toolbar commands get to know them well.
 


If you want your sequence to appear like a backdrop static shot would then make it a background color that is anything and we're ready to roll Next, drop your logo or make your text wherever on the document you want. For the purposes of this tutorial we will make the text say "TigerEyes Is Awesome" and i'll write it in white font on an orange backdrop.

Okay, so click the little bubble in the upper right of your little image to make the image appear full screen, it shouldn't take up the full screen but viewing it like this takes away annoying side windows. Okay, so far we look like the image below, if you dont' skim up and find what you did wrong


 
Okay, we're using a stationary image so lets stay simple. Hit "ALT-CNTRL-I" command and on the menu, set the image size to 1024x512 then take your image, and use the save command to save it in somewhere simple like My Pictures and name it overlay_animo_v00 literally just copy that exact thing into the name of the file and save it in photoshop as a PNG file type [you have to pull the menu bar down] but once the file is saved go ahead and close photoshop for now.

Now if you have the DDS Plug-In for photoshop, just save it as a dds in the file path Programfiles/LionheadLTD/themovies/data/textures/overlays

This ends step 1 if you dont' get what is going on, scroll up and re-read some stuff, but you should have an image saved as overlay_animo_v00 in My Pictures or a finish static, if the latter is the case skip this next step, your overlay is complete, otherwise move to the next step to use your DDS Converter.

Step 2

Okay Step 2 is very short and very simple. You rimage should be 1024 x 512 and in My Pictures folder. Now, you should've downloaded the DDS Converter from above but there it is for those of you who missed it. Anyway, it should have a desktop icon click the desktop icon and the window should pop up:



Go to where the file is located, in this case My Pictures and pull it up, it should appear exactly like this screenshot. Make sure the output file type [circled] is .DDS [as shown] and set the output file for C:\Program Files\Lionhead Studios Ltd\The Movies\Data\textures\overlays [note: if OVERLAYS file does not exist create it by yourself] okay, now that your output folder is correct, your file type, and you've selected your favorite image click the OPTIONS button and another pop up menu will pop up like shown:



Make sure the settings show are set exactly as shown which includes turning OFF the Build Minimap feature and setting it to DXT3 or DXT5 [both circled on image] once those are set, and your output folder is correct as well as the file format of its export click CONVERT and when it is done close out the DDS Converter and you will have completed Step 2.

If you have the correctly named overlay_animo_v00 in the correct filepath C:\Program Files\Lionhead Studios Ltd\The Movies\Data\textures\overlays and in .dds format then your ready to move on to the next step, if not then scroll up and re-read some parts Files\Lionhead Studios Ltd\The Movies\Data\textures\overlays and in .dds format then your ready to move on to the next step, if not then scroll up and re-read some parts

Step 3

Okay, this step involves running your copy of The Movies Stunts and Effects by clicking the icon and waiting while it loads. After it loads, go into your studio and go into Advanced Movie Maker [if you don't have this yet, play a bit of the game out to get it or start a sandbox mode] Now in Advanced Movie Maker select any set, personally i selected the blue screen because its awesome. Okay, now that your inside it will ask you to select the scenes for the purposes select the CRITICAL TALK scene and when the scene it open, go the the Sliders on the side menu and make the scene last for AGES and then go back to viewing the scene, it should be ridiculously long, thats the point. Okay go to your side menu and click the correct icon for changing Overlays [looks like a circle] and then, on that menu click the overlay button show below





from that bottom menu look for a white menu, it will be name overlay_animo that is the overlay you need, click it [nothing will happen when u click it] but just click it and then notice the eye icon on the side bar menu [shown below] click that little button and your overlay should appear on the screen in bring orange reading "TigerEyes is Awesome!"



That is the overlay, to make it as an intro or something just have that scene as the begining of your film. If your interested in ANIMATING your overlay or adding OVERLAY VIEWS like a different spaceship view or something then stay tuned but, if you just want to know how to do still shots than thats how its done, not to tough and explained through alotta screenshots. This ends PART I


Part II

for the beginings of this tutorial see "Getting Started" above, and download the Image Resizer used in the tutorial

Okay, making simple little overlays like that are great and look cool. But they are absolutley no improvement on the simple static shot of a stage. Now, before this discovery to animate something involved hundreds of backdrops [ask DD about Sleepy Hollow] it is a paintstaking process that is very consfusing and very hard to do with perfect timing, actually its just about impossible to get it realistically time. Some movies have had special effects with this technique but they are poorly unrealistic and most aren't timed right. But the answer to this is a new kind of Movies animation sequencing using the more advanced feature of image types called OVERLAYS this technique takes alot of practice to time right but is very similar to a gif animation in some ways. Lets get this tutorial started.

Step 1

Okay, i'm going to figure that anyone reading this read above so we'll just take that simple text "TigerEyes Is Awesome!" and expand on it, we'll create a small amount of animaton. Now we'll only do a very small part but the potential of this are about 10 times more than anyone every hoped with backdrops and its all steadily paced around 10-12 fps [as estimated by KRC] so it will move fast. Now, take the image [sized at 800x450] we created and just under it add "Yeah Right" in smaller text.

Now, the key to saving overlays in animations lies in what I am about to say. You must save your overlay by increasing the v00 option to v01 always moving up by one in a sequential order. DO NOT CHANGE THE ROOT OF THE OVERLAY FILENAME do it as shown below Now because images move so fast, i recomend that every 3-5 frames is the same and for a holding static image, i would allow up to 10 frames the same.

As always, Post Production is the best place to edit timing once your working with in game overlays. So our new image sized at 800x415 will be saved as overlay_animo_v01 [notice only v01 has changed]. Now make a folder in My Pictures and call it OVERLAYS this will help sort your images. Now save your image overlay_animo_v01 in Mypictures/overlays [with overlays as a created folder] and you've added the animation, almost. Now just for fun, change the font color of "Yeah Right" to a few different colors, from red to orange to white, it does not matter. Just make three new frames with different colors and use this same process to save them as the file names shown below.

               overlay_animo_v02
               overlay_animo_v03
               overlay_animo_v04

 Again, notice that only the v0_ changed at all in the file names. Now you should have a total of 4 new 800x415 images saved in mypictures/overlays. If you do not, skim back up and re-read things until you understand.

Step 2

Now, this varies from the previous step, as cruelworld came up with the idea of using an image re-sizer. Now, open up the image re-sizer and find your files. Select the four new overlay frames we created, and open them up. And after you've selected OPEN on the four files, set the next menu exactly as shown in the below screenshot.



Then hit OK and your images will be re-sized to 512x512. Now this may seem like an uneeded roadstop, but when you work with animations that range in the hundreds, it is a valuable tool. Now then we move into the next step, at this point you should have 4 new overlay frames, and all re-sized at 512x512 saved in Mypictures/overlays, if not then skim back up and find your error.

Step 3

Okay, step 3 is very shot and very quick. Just open up the DDS Converter just like above and select your new images overlay_animo_v01-04 [or, just drag the mouse over every single file that you created for this animation] once you've selected what you want to convert it is the same as above. Click options and make sure the correct settings are set as shown below:



once they're all set, make sure that the image output file type is .dds and that the output folder is C:\Program Files\Lionhead Studios Ltd\The Movies\Data\textures\overlays and your ready to click CONVERT! when it is done close out the DDS Converter and you will have completed Step 3.

If you have the correctly named overlay_animo_v01-04 [or the correctly labled series] in the correct filepath C:\Program Files\Lionhead Studios Ltd\The Movies\Data\textures\overlays and in .dds format [for each image] then your ready to move on to the next step, if not then scroll up and re-read some parts

Step 4

Okay, step 4 is the ingame part. Your animation files will appear exactly as your still did. If you followed this tutorial and have the 4 image frames then your animation is short but as long as you get the concept your ok. If you created alot more slides then the animation will be a bit longer. Dont' be surprised if you can hardly read the text because it moves so fast, you have to learn how to pace.

As i said above i'd suggest making at least 3 seperate frames [thats three seperate versions] for your image so it stays up long enough to be read and if you want something to appear for a long time you i'd advise leaving it up for about 10. To make your animations the most fluid its just a game of experimenting with how it works and timing and using PP.

But, as shown above, to view your simple animaton go into The Movies Stunts And Effects and open up a game [sandbox or story doesn't matter] and go into Advanced Movie Maker [if you dont' have that play a bit and you'll earn it or just play a demo or sandbox] and then choose the CRITICAL TALK scene and go to your sliders and make it last for AGES and then click the Eviorment icon as show below: That will bring a small menu at the bottom up, click the button shown again:



And it will bring up a nice menu. Scroll through just like above and select the overlay that should appear white and is named overlay_animo and click it [nothing will happen when you click it so don't worry]:




After that look for the small eye icon and click it to view your very short animation



This will show your animation, if you followed my tutorial its only 5 frames and not much to look at. But this is the magic of overlays, they can evolve into anything. A note though, that if you go over v99 you'll have to make a different overlay root name, you cannot have v100 or over. Just like backdrops opened up a new world to moviemakers with special effecs overlays offer the same potentials of hundreds of frames to be shot in just a few simple scenes.

You can make complicated animated openings for your films very easily and paced the correct way to run smoothly [with experimenting] Overlays are the future of all Special Effects in The Movies and its a valuable way to save yourself time and effort to get an effect that will make people marvel. As i have said, the length and style of presentation can differ however you'd like. Whatever you can dream and slatter on a canvas can be transformed into an overlay sequence this is where your imagination runs wild. And, this is where Part II ends. For Advanced Features, Please read below

---

Lineage II | Civilization 4: Beyond the Sword | Halo 3

Part III

WARNING THIS IS FOR ADVANCED USERS UNLESS YOU'RE LOOKING FOR THE PAINT TUTORIAL

Before attempting this tutorial, please fully master the two above techniques or at least the terms. This tutorial will explore advanced features of Photoshop. But if you're looking for the paint tutorial, its also found on this page

Getting Started

This tutorial will jump into transparent overlays, a way to create the best effects that Stunts and Effects has to offer. This will be broken down into how you can create transparencies, what you can do with that feature will be explored in PART IV. Make sure you have the DDS Photoshop Plug-In Okay, begin by creation an image sized at 800x450, but to create it click 'NEW' and make the menu that pops up how it appears below, however you can set the width and height to 800x450 or 512x512.



Now, the whole image should appear like a checkerboard, thats what you want. Now go to the text creation button and create text saying anything, for our purposes it will say "Tiger Is Awesome". It should appear in photoshop just like it does below.



Now save you image as a dds with file name overlay_trans_v00[must have DDS Plug-In] and it should be saved in programfiles/lionheadLTD/themovies/data/textures/overlays.

However before you save, make sure the save options are right especially make sure that the upper left is set to DXT 5 or it won't be transparent.



After you hit save, feel free to go into your game and see it, the principles of animation apply the same. Just use that same way of saving, and the dds plug in, and you will be able to animate with a transparent background. Now, transparencies can be used for incredible special effects as you will see below.

Part IV

Finally, PAINT to make overlays, a simple guide to walk you hand and hand through creating a static overlays with your paint program. This guide is made for beginers.

Getting Started

First, you need to get the right accesories. You will need a DDS Converter to use this tutorial, and will need Paint, which comes with your computer most likley, to use this tutorial. Also, overlays only work with The Movies Stunts and Effects

Step 1

Lets begin by opening paint. When you open paint, you'll see a fresh piece of blank white. Next, hit the "Cnrtl-E" button, this will bring the up the ATRIBUTES menu, here you can set the size of your static overlay, your window should look like the window shown below.



With your image, sized at 512x512 you are ready to create your overlay. Paint, unlike Photoshop doesn't give you alot of image editing options or options to create transparent. But if your blank pallet is sized correctly then you're ready for step 2, if not then scroll up and try to figure out what you did wrong.

Step 2

You can still create overlays that will appear, and this is very useful for creating title sequences. Paint does allow you to animate your overlays, but that will be explained later. For now, we're going to create a Static Overlay. Now, for this tutorial we're just going to place basic text onto a blank image, but there are alot of things that you can do to customize your overlay. You can change font types, color, background color, and even paint with the paint brush tool to make your title your own. Now, click the "A" icon and choose the lower of the two settings on the left toolbar, place the text box on the screen and type in the text box "TigerEyes is Awesome". Your screen should look like the screen shown below:



The lower of the two left hand text box items should be selected, your image should be 512x512 and there should be a simple line of text running across your image reading "TigerEyes is Awesome". If this is the case, save your image in my pictures, the image name should be overlay_animo_v00. What you've done is told your game that this image is an overlay, the "_" then seperates that description from animo, which is the title, then the "_" divides the name and the number. The small v stands for version, and the numbers, two digits, cannot exceed 99. Your image, for static overlay purposes, should always be "v00" at the end. Refer to the screen below to see what you're save menu should look like, including file type and name



If your image, sized 512x512 is saved with the filename overlay_animo_v00 then you're ready for step 3. Step 3 Now, open up your DDS Converter. You should see the my pictures window opened already, if it is not then use the small arrow and find the window where you saved your overlay file.

When you click your overlay, you will get a small preview on the right hand side. Make sure that the OUTPUT FOLDER is set to export your file to C:\Program Files\Lionhead Studios Ltd\The Movies\Data\textures\overlays [note: if OVERLAYS or TEXTURES files do not exist create them yourself]. Make sure that the image is exporting in DDS Format.

If your image sized 512x512 is exporting in DDS Format, into the C:\Program Files\Lionhead Studios Ltd\The Movies\Data\textures\overlays [note: if OVERLAYS file does not exist create it by yourself] folder path, then your screen should look like the one shown below:



If your options appear like that, click the OPTIONS button and another pop up menu will pop up like shown:



Make sure the settings show are set exactly as shown which includes turning OFF the Build Minimap feature and setting it to DXT3 or DXT5 [both circled on image] once those are set, and your output folder is correct as well as the file format of its export click CONVERT and when it is done close out the DDS Converter and you will have completed Step 2. If you have the correctly named overlay_animo_v00 in the correct filepath C:\Program Files\Lionhead Studios Ltd\The Movies\Data\textures\overlays and in .dds format then your ready to move on to the next step, if not then scroll up and re-read some parts

Step 4

Okay, this step involves running your copy of The Movies Stunts and Effects by clicking the icon and waiting while it loads. After it loads, go into your studio and go into Advanced Movie Maker [if you don't have this yet, play a bit of the game out to get it or start a sandbox mode] Now in Advanced Movie Maker select any set, personally i selected the blue screen because its awesome.

Okay, now that your inside it will ask you to select the scenes for the purposes select the CRITICAL TALK scene and when the scene it open, go the the Sliders on the side menu and make the scene last for AGES and then go back to viewing the scene, it should be ridiculously long, thats the point. Okay go to your side menu and click the correct icon for changing Overlays [looks like a circle] and then, on that menu click the overlay button show below





from that bottom menu look for a white menu, it will be name overlay_animo that is the overlay you need, click it [nothing will happen when u click it] but just click it and then notice the eye icon on the side bar menu [shown below] click that little button and your overlay should appear on the screen in bring orange reading "TigerEyes is Awesome!"



That is the overlay, to make it as an intro or something just have that scene as the begining of your film. If your interested in ANIMATING your overlay or adding OVERLAY VIEWS like a different spaceship view or something then stay tuned but, if you just want to know how to do still shots than thats how its done, not to tough and explained through alotta screenshots.

This ends PART IV

Part V

Again, this section is for more experienced users who "speak overlay" like a second language, and understand how transparent overlays work. We will explore advanced photoshop features and some fun special effects. To really get the most from this section, i would suggest you download Fraps for the in game screenshots. It is a great program.

Superhero Flying Effect

Every wonder how your hero can soar in the clouds above the rooftop like the characters in OIO3? Well, this tutorial will teach you how to go from zero to hero.

First, go in game to the ROOFTOP set and select the "WEREWOLF JUMP" scene. Now, get a angle with your camera and take a shot of your character mid air, so he looks like he could be flying. An example is shown below



Now, i would advise you take the shot with FRAPS, see fraps guides to learn how to take screenshots with it, as you set the button to what you'd like. With your screenshot open it up in photoshop. Use the Rectangular Marquee Tool to select a general area, and take your character out of the whole shot to give you a simpler shot at him.

Now, this part takes practice so i would advise saving the character somewhere so you can have a few runs just in case you mess the image up. Use the Magnetic Lasso Tool and drag it around you hero, now sometimes it guides gently and perfectly around you hero, other times it makes movements you dont' want or like.

So you'll have to learn the best way to guide the thing around you character, but once you have connected the begining and end of the line, dotted lines will surround your character. Remember that this doesn't have to be perfect and can have a bit of background in it [notice the head of my character] because you can touch up small parts, or add small parts [notice fingers] but once the dotted lines appear like below then your ready for the next step



Now, hit the copy button or "CNTRL-C" and open a new image, make it sized 512x512 with a transparent background. Paste on your character so he appears on a transparent background like shown below.



Now, save this image as something like overlay_flying_v00 or something, make sure its going to save as a DDS in DXT5 output, and in programfiles/lionheadLTD/themovies/data/textures/overlays. Now, go to the Traveling Vehicle Set [not green screen unless hero is facing the other way] and choose any scene that makes the backdrop move, place you overlay in and it will appear like you hero is flying, as shown below.



Also, this general technique of extracting an image using the Magnetic Lasso can be applied to any area of effects. You can take more than a character, but an object like a spaceship out of a shot and do anything you want to it in photoshop, then put it back in game through overlays. The lasso tool, when used correct, can help create a first person shooter style overlay like shown below:



Making See-Through Overlays

Now, make sure that you understand how to make transparent overlays because that is very important to this. Make an overlay, transparent background, size it at 512x512. This section is easy and short, so pay attention.



Now, with your transparent checkerboard background, take the paintbrush tool and set the OPACITY and change it to 20%. Then just move the brush over the background with whatever color you want, for our purposes i'll make it blue so it will look like underwater. Your image, after a few laps with the paintbrush, should look something like the image below



Now, you can do it with any color or blend of colors, but this technique can be used to make interesting title sequences [like having half screen red, etc] and interesting fade in and fade out sequences. It is defintly something to fiddle with. I hope these new sections help, and much like the other thread i would like this to be the open forum for overlay questions, and chatting about future overlay techniques

---

Lineage II | Civilization 4: Beyond the Sword | Halo 3

That's pretty cool, i will soon make my first overlay i think.

---

Seeing I already know, I just skimmed through it, but this one is better than the last Now I can direct people to this updated one REP UP MY FRIEND

---

I made this overlay earlier....Used the transparant overlay... But the spaceman flyer is strictly cut and paste until I got all his arms and legs pointed in the right direction....A lot more work than the stretch method. GREAT IDEA with the first person Shooter!..... You got it down Tigereyes Rep to you, man.

---

"Monk....you Idiot!"

Looking good Monk

---

how do you take screenshots

Press the Print Screen button (its above the group of buttons that include "Home", "End", "Instert", ect . . . EDIT: And then go into, say MS Paint, and "Paste"

---

Or use the program Fraps, as listed in the tutorial

---

Lineage II | Civilization 4: Beyond the Sword | Halo 3

You rule tigereyes!

I use Fraps...print screen takes soooooooo long to come out of the Movies program, save your image, get back into the game... Fraps saves an image each time you push the F10 key...much simpler....as Tigereyes mentioned in this tutorial... Like I said....Tigereyes has it Down!

---

"Monk....you Idiot!"

anyway, if anyone else donates tutorials written out about techniques feel free to just post them here, that should make a nice addition Thanks monk, i'd say that its really thanks to others and not myself, i just took mark's original tutorial and made it simpler, and then explored a bit just brainstorming with people like Ximplsoionx and stvdysn to make things happen. But anyone is welcome to post their own overlay techniques here

---

Lineage II | Civilization 4: Beyond the Sword | Halo 3

if it will help with transparent overlays.....HERE IS a photoshop action that will change any solid white to transparent then save as dds. i recorded it for making the process of doing animated transparent overlays a bit faster. you can always alter it if you dont use solid white as your trasparent color

---

And all the harm I've done - alas has only been to myself.

You must spread some Reputation around before giving it to tigereyes again.

Damn. You did a good job with this tutorial, too bad I can't rep you for it.

Another useful item

---

 Quoting: z007gg

too bad I can't rep you for it.

break out the butter and spread er' around

if it will help with transparent overlays.....HERE IS a photoshop action that will change any solid white to transparent then save as dds. i recorded it for making the process of doing animated transparent overlays a bit faster.

i dont' understand what it does

---

Lineage II | Civilization 4: Beyond the Sword | Halo 3