Guest Workshop: Oblivion Loading Screens via GIMP

[Johnn123]

This tutorial aims to teach readers how to create Oblivion Style Loading Screens via the GIMP

I have attached a Microsoft Word Document, so if you don't have Microsoft Word, download Microsoft Word Viewer so you can see

And for those don't like downloads here it is, in the form of a post.

Loading Screens Tutorial

Introduction

Awhile back i was cruising the Bethesda Game Studio's Oblivion mod forums and found a thread showing how to make Oblivion Style Loading Screens in GIMP by Elric Wulf. With a little help from him, he showed me how to make them and get them in game so you can view them. Now armed with his permission, and a few edits to his procedure, I will show how to make Oblivion style loading screens in GIMP. This process is quite simple and should take you only 20-30 minutes to complete, if followed properly. With a little practice you'll be doing it on your own in only a few minutes per screen! So lets begin!

Requirements:

TES Construction Set V.1.2 - http://tesnexus.com/downloads/file.php?id=11367

The GIMP - http://www.gimp.org/downloads/

Loading Screens Development Kit - http://tesnexus.com/downloads/file.php?id=4263

Making the Screen:

Alright lets begin. Be sure you have the GIMP installed now. First make a new folder in your Oblivion Texture Folder called “My Loading Screenâ€. This is where we will store our load screens until we are ready to put them game. Now download the Loading Screens Development Kit by GreyBird. Open up the archive and go into the sub folder named “Templatesâ€. Extract the the 2 files called “load_frame_template_default.psd†and “load_blank.psd†to that new folder we just made.

This is where we will start making our screen so start up the GIMP. Make sure your layers panel is open. If it isn't go to Windows/Layers, Channels, Paths, Undo – Brushes, Patterns, Gradients. Now open up load_blank.psd. We now have the background template in hands. Notice in the layers panel we now have a new layer named “Backgroundâ€. Lets make another. Right click “Background†and choose from the menu “New Layerâ€. A menu will appear now. Where it says new layer change the name to “Frameâ€. Click OK. We now have a blank layer to work with. Lets get our frame in place shall we? Open up “load_frame_template_default.psdâ€. In the tools menu select the rectangle select tool. Click the image. Now press control A. We've just selected the entire layer now. Press control C now to copy this new layer. Go back to “Load_Blank.psd†and make sure you have the frame layer selected. Hit control V to see the frame appear on the template. Now hit control H to anchor the layer down. Congrats we now have the template to make a screen! Lets make a new layer, right click “Background†again, this time changing the name to “Background Imageâ€.

Now we need an image. Open up one of your screen-shots. To make the whole image fit the template we need to resize it. Click Image/Scale Image. A window will pop up and ask for the new size. We need to do something important before we adjust the images size first. Beside the numbers under the Image Size panel, notice a little chain image. This is your image constraints option. It keeps the images size the same scale when you resize an image. Uncheck it by clicking it. Now change width to 1024 pixels and your height to 512 pixels. Click OK to make the image the same size as the template. Now click the image and hit control A to select it and control C to copy it. Go back over to your Template now and make sure you have selected the “Background Image†Layer is selected. Press control V to paste your image and hit control H to anchor it. You shouldn't be able to see either the frame or background anymore. To compare to my progress at this point, check HERE.

Once your contempt, lets carry on. As noted above, notice that you cant see either the frame or background. This is because the Background Image Layer is on top. Lets change that. Click and hold the Frame Layer and move it above the Background Image Layer. Your Frame should now appear on top of your image.

We now need to make the back ground image look like it does on the Bethesda loading screens. Select your Background Image layer and desaturate it by going Colours/Desaturate. A window should pop up asking what kind of desaturation you want to do. I find average looks best, but you can experiment bye choosing which one you like best. Now we need to make it drawing like. Go Filters/Edge Detect/Edge and on the pop up choose Gradient for Algorithm and 100 for amount. Click OK and watch your image become a black and white sketch. We now want to invert the colours, as it will make the load screen match Bethesda's better. Do this by going Colours/Invert. Compare to mine at this stage in the LINK.

Now we need to do the gradient map. Choose Colours/Map/Gradient Map. GIMP will now process this but won't show it for whatever reason. We're in the home stretch now. Still with the Background Image Layer selected, change the drop down to Burn and set opacity to 35% or whatever feels right to you. Most of the time 35% looks good but sometimes it needs to be higher depending on your image. I wouldn't go higher than 50% at the max. So now you're Loading Screen should look like mine at this STAGE.

Alright now we have to take care of the centre image. Right click your background layer again and click new layer, naming this one “Centre Imageâ€. Go back to your screen shots window, which should still be open. Hit control C again and paste the image onto your new layer, anchoring with Control H. This part is easy, set the drop down of the image to Hard Light and Opacity to 69%. Move the frame's layer on top again. We now need to get rid of the coloured image outside the frame so choose the rectangle select and start cutting out the coloured image to the INSIDE wall of the frame. Make sure you have the Centre Image layer selected. Your image should look similar to mine now at this POINT.

Now lets make the area where the text goes. With the Centre Image layer selected make a rectangle inside the frame that’s about a quarter the size of the image inside the frame. Hit Delete to get rid of the colour image now. DON'T click on the screen anywhere now, instead change the layer to Background Image layer and hit delete again. Now using the rectangle selection tool, with the background image layer active,select one of the walls of the frame and hit delete. Do this for each wall of the frame. Now we just have the blank background where the text goes.

In the Bethesda Loading Screens, notice the feathered effect along the border of the image and the text box. I haven't yet figured out a way to do this GIMP, so we will use a much more crude, but equally effective method. Choose the smudge tool from the tool box and Centre Image Layer in the layers panel. Now smudge across the border between the coloured image and text box. No it wont create the feathered effect but it will remove the straight edge and make the Loading Screen look better. Congratulations we have finished! Save your work as MyLoadingScreen.xcf. This is a GIMP image format and will make it so you can edit your screen later on if ya wanna change something. Now flatten your image by going Image/Flatten Image. Save as MyLoadingScreen.dds and export with DXT1 Compression and no Mip Maps. Your Finished Image should look like MINE.

Getting your Loading Screen into the Construction Set:

Alrighty how about we get this thing in game? Fire up the Construction Set and load Oblivion.esm.

Once it's loaded, in the objects window expand the Miscellaneous Bar and click Loading Screens. Right click an existing screen and choose new. Before we continue with the Loading Screen Form we have to do something important to make it show in-game. Go to your Data folder and make sure the path appears like this: Textures/Menus/Loading. If the names of these folders start with a lower case, replace it with a capital or it won't show-up in game. Copy your MyLoadingScreen.dds into the loading screens folder. Now go back to the Construction set and find Loading Screen Form. For the FormID type MyLoadingScreen. Then click add image file and find your loading screen. Next in the text box type “My Loading Screen Works!â€. Now we have to assign a cell to the loading screen. Click World/Cells and scroll down in the Cell ID's until you find TestingHall. Click and drag it into the loading screen form in the Display when Form Loads box. Click OK. Congratulations your finished! Save your .esp as MyLoadingScreen.esp. Check MyLoadingScreen.esp in the data files Menu and fire up Oblivion. When it loads open the console and type “COC TestingHallâ€. Your screen should appear in-game now. It might take a few tries to work so go to hawkhaven if need be and COC back again until it appears. If your loading screen displays the default elf screen, then you haven't changed your file structure to say Textures/Menus/Loading. Do that then open the .esp again and select your loading screen to make the structure change to this. Now re-open GIMP and convert your Loading Screen to a JPEG image and post it here for me to see! I expect to hear back from you!

Replacers

Wanna make your screen appear in game minus the .esp work? Open your loading screens folder and rename your loading screens name to one of the ones in this folder. Then delete that file and move yours in and your done! Enjoy

Credits:

Elric Wulf for the process

GreyBird for the Loading Screen Design Kit

Me for writing this

[Tigersong]

Is there anything needed to open the .psd type in Paint.net, do you know?

[lilith]

By default Paint.net doesn’t support PSD files. You’ll need to download a plugin for loading/saving PSD files and the plugins probably won’t support all features of a PSD file.

[Tigersong]

set the drop down of the image to Hard Light and Opacity to 69%.

Which drop-down?