Difference between revisions of "Loading Screen Images"
Reverted to last good version. Sure, the loading screens are a bit scaled, but they have little else to do with stretch marks...
imported>GhanBuriGhan (added to misc. tutorials cat.) |
imported>Roxahris (Reverted to last good version. Sure, the loading screens are a bit scaled, but they have little else to do with stretch marks...) |
||
| (46 intermediate revisions by 15 users not shown) | |||
| Line 1: | Line 1: | ||
{{Update}} | |||
[[Image:besteffort.jpg|thumb|right|Best effort to create an Oblivion-style loading screen at this time.]]Loading screen images have a resolution of 1024x512. The odd aspect ratio | == Important Information about Loading Screens == | ||
[[Image:besteffort.jpg|thumb|right|Best effort to create an Oblivion-style loading screen at this time.]]Loading screen images have a resolution of 1024x512. The odd aspect ratio is probably to allow for wide-screen computers. The sides of your image will be clipped in the game, but for some reason in the CS preview window stretches it to the right size. Don't worry about this. | |||
Alpha channels are not used for the final image. | |||
Loading screens are compressed using the DDS DXT5 format with no MIP-maps. | |||
An image editor with good support for layers (PhotoShop or Paint Shop Pro) is a must for creating loading screens. | |||
Loading screens will only work if placed in ''Oblivion\Data\Textures\Menus\Loading''. This is case-sensitive! | |||
Curiously, the reason that the "Menus" part of this is case-sensitive is that there are "Menus80" and "Menus50" folders for lower-resolution displays, and the game substitutes the folder names with a case-sensitive scan. However, it appears that loading screens do not need to provided at multiple resolutions. The one under Menus will be used for all display sizes. | |||
===Normal values=== | |||
These are the normal values that are found in the files that came with Oblivion. | |||
{|border="1" cellpadding="5" cellspacing="0" | |||
|- | |||
! style="background:#efefef;" colspan=1 | Specifications | |||
! style="background:#efefef;" | Values | |||
|- | |||
|Image Resolution | |||
|1024 x 512 pixels | |||
|- | |||
|Resolution | |||
|72 pixels/inch | |||
|} | |||
== Modding and DDS Conversion == | |||
[[Image:loading_screen_editor.jpg|thumb|right|A custom loading screen in the CS.]]This part isn't too hard, but you must follow the directions closely as it's easy to mess up. Once you have your image the way you want it to look in the game, you'll need to save it as a DDS file using one of the [[DDS Tools]]. When you go to save as a DDS format file, you are presented with a plethora of options, but there are only a couple you will need to change. One is to set the format to DXT5 as that is what the original loading screens use. The other is to set MIP-maps to No; they won't be needed for a non-3D texture and just add to the file size. Save the file to your Oblivion directory in ''Data\Textures\Menus\Loading''. If you have to create the directories, make sure that you do it correctly, remembering that the directories are CaSe-SeNsItIvE. | |||
Now you only need to make the game recognize the new loading screen image. You'll need the Construction Set, of course. So, open that up. In the [[Object Window]], go to Miscellaneous>LoadScreen. If you see a list of all the loading screens already in the game, you're in the right place. To add a new one, right-click and then select New. Give your new loading screen a unique ID first. It's usually your name, initials, or alias; the name of the mod; and the name of the object. This ensures that your ID is unique. Then add the image; this is rather straight-forward. The loading screen text is not required, but you can fill it in if you like. It's perfect for adding tips about a mod if you're not just modding the loading screens. | |||
If you want the loading screen to only show for a particular cell, add the cell to the form list by dragging it from the Cell edit dialog which is found under [[:Category:World|World]]->[[:Category:Cells|Cells]]. You can also add a bigger area from menu [[:Category:World|World]]->[[:Category:World Spaces|World Spaces]]. When you're done hit OK and save. | |||
[[Image:loading_screen_ingame.jpg|thumb|right|A custom loading screen in-game.]]To test your loading screens, it's best to add a particular cell to the form list when you're editing. That way, you can just go to that cell and not have to wait for the loading screen to come up randomly. If the tip you entered shows but the image is the default Elven Armor one, you missed a step earlier and you'll need to go back over them. | |||
If you would rather replace the loading screens, you have two options. One preserves other replacement textures, thus allowing a user to easily disable/enable your replacement mod. The other preserves the original textures while not working well with other mods and making disabling/enabling difficult. | |||
The first way uses the CS to make a plugin in much the same way as adding new loading screens. However, instead of adding, you'll be editing the existing loading screens. Just change the textures to your own ones with unique filenames. Now your mod can be managed like other mods in the Data Files section of the launcher. The only downside is that many of the textures are repeated in several different types of loading screens. This method would be more time-consuming for the modder. | |||
A quicker way is to just overwrite (essentially) the original textures by placing your new ones in the ''Data\Textures\Menus\Loading'' directory. You'll still need to convert to DDS, of course, but that's just about all there is to it. No ArchiveInvalidation editing is necessary. You don't even need to worry about case-sensitive paths. The problem is that any other mod that also replaces loading screens is going to conflict. | |||
=== Exporting Files in DDS from GIMP === | |||
This requires that you have installed the GIMP DDS exporter plug-in correctly. A link can be found on the DDS resources page. | |||
The DDS export screen is highly complicated in GIMP, with 9 separate options for compression, and 13 for format. You shouldn't have to worry about format though. | |||
At this time, it appears that the ''BC3/DXT5'' option does in fact work for load-screens, but unless you have only one layer in the image there can be some funny results. The other compressions, particularly ''BC3n/DXT5n'' create truly bizzare effects, washing out certain colors, strengthening others and merging areas of color into a black or white static. | |||
When exporting make sure the ''Generate Mipmaps'' box is unchecked. Don't even bother with the advanced options. | |||
== Replicating the Existing Image Format == | |||
The outer area of the loading screen has no colors; it is only composed of an outline of the starting image. The outlines are created with a find edges filter. | The outer area of the loading screen has no colors; it is only composed of an outline of the starting image. The outlines are created with a find edges filter. | ||
| Line 13: | Line 69: | ||
The inner border and paper textures can be gotten from a PhotoShop image included with Oblivion at ''\textures\menus\loading\load_troll.psd''. Use an unpacker (see [[BSA_Unpacker_Tutorial]]) to extract this file from ''Oblivion - Textures - Compressed.bsa''. | The inner border and paper textures can be gotten from a PhotoShop image included with Oblivion at ''\textures\menus\loading\load_troll.psd''. Use an unpacker (see [[BSA_Unpacker_Tutorial]]) to extract this file from ''Oblivion - Textures - Compressed.bsa''. | ||
Loading | === Near-Perfect Loading Screens using Photoshop CS3 === | ||
Done using Photoshop CS3, but it will work with lower versions as well. | |||
1. Import screenshot into Photoshop. | |||
2. Position screenshot on a seperate layer, above the layer containing the Bethesda-provided loading screen background. | |||
3. Hit Shift+Ctrl+U to desaturate image. | |||
4. Filter >> Stylize >> Find Edges | |||
5. Hit Shift+Ctrl+F to access the fade filter menu. | |||
6. In the fade filter menu, change mode to Color Dodge. | |||
7. Image >> Adjustments >> Gradient Map, and hit OK. | |||
8. Change the screenshot layer's blending mode to Linear Burn. | |||
9. Change the screenshot layer's opacity to 50%. | |||
10. Now for the last trick: Filter >> Sharpen >> Sharpen (and repeat that a second time). | |||
Voila! You've got the Bethesda loading screen background. | |||
Now, to generate the colored part of the loading screen (the part that's in the frame), position a second copy of the original screenshot over the layer we've just been working on, and delete all parts of it that are outside the frame. Now set this layer's blending mode to Hard Light, and set the opacity to 69%, and you're done. | |||
Try playing around with the numbers if you don't like what you're getting. The source screenshot will affect outcome, as will the resolution at which you capture the source screenshot. Bethesda seemed to use a higher resolution which resulted in higher detail. | |||
===Alternative Photoshop Method=== | |||
'''Note:''' Following these directions exactly is required since some of the functions operate differently depending on whether the Background Layer is visible. | |||
[[Image:Paintshop.JPG|thumb]] | |||
Reset Colors to Black and White (Black being current color)<br> | |||
Open Screenshot taken at 1024x768<br> | |||
Image >> Canvas Size – Change Height to 7.111, Use arrows on Anchor to center picture (area retained is the part covered by arrows and the white box), Click OK then Click Proceed in the popup<br> | |||
Select >> All<br> | |||
Edit >> Copy (or Ctrl+C)<br> | |||
Minimize Screenshot (we need it again later)<br> | |||
Open load_troll.psd<br> | |||
Hide Layer 24<br> | |||
Hide Layer 22<br> | |||
Hide Background<br> | |||
Select Layer 23<br> | |||
Use Eye Dropper to select dark brown from Layer 23 (96 R, 57 G, 19 B)<br> | |||
Hide Layer 23<br> | |||
Show Background<br> | |||
Select Layer 16<br> | |||
Edit >> Paste<br> | |||
Hide Layer 16<br> | |||
Select >> All<br> | |||
Ctrl+Shift+U<br> | |||
Filter >> Sketch >> Photocopy (Set: Detail 3, Darkness 50) Click on OK<br> | |||
Edit >> Copy<br> | |||
Right Click Layer 25, and click on Blending Options<br> | |||
Change Blend Mode to Color Burn<br> | |||
Select Quick Mask<br> | |||
Edit Paste<br> | |||
Exit Quick Mask<br> | |||
Press Delete<br> | |||
Select >> All<br> | |||
Hide Layer 25<br> | |||
Select Layer 23<br> | |||
Use Eye Dropper to select Light Brown color from Layer 23 (219 R, 173 G, 101 B)<br> | |||
Hide Layer 23<br> | |||
Select Layer 25<br> | |||
Image >> Adjustments >> Gradient Map – Click OK<br> | |||
Ctrl+Click Layer 16<br> | |||
Press Delete<br> | |||
Restore Screenshot<br> | |||
Edit >> Copy<br> | |||
Minimize Screenshot again<br> | |||
Select Layer 16<br> | |||
Edit >> Paste<br> | |||
Ctrl+Click Layer 16<br> | |||
Press Delete<br> | |||
Hide Layer 16<br> | |||
Right Click Layer 26 – Change Opacity to 70, Click OK<br> | |||
Restore ScreenShot<br> | |||
Edit >> Copy<br> | |||
Minimize Screenshot (Or close it, we don’t need it any more)<br> | |||
Select Layer 21<br> | |||
Edit >> Paste<br> | |||
Hide Layer 21<br> | |||
Ctrl+Shift+U<br> | |||
Filter >> Stylize >> Find Edges<br> | |||
Ctrl+Shift+F – Change Mode to Color Dodge<br> | |||
Filter >> Sharpen >> Sharpen<br> | |||
Filter >> Sharpen >> Sharpen again<br> | |||
Hide Layers 25, 26, 27, and Background<br> | |||
Select Layer 23<br> | |||
Use Eye Dropper to select dark brown from Layer 23 (96 R, 57 G, 19 B)<br> | |||
Hide Layer 23<br> | |||
Show Background<br> | |||
Select Layer 27<br> | |||
Image >> Adjustments >> Gradient Map – Click OK<br> | |||
Select >> All<br> | |||
Edit >> Copy<br> | |||
Right Click Layer 27, and click on Blending Options<br> | |||
Change Blend Mode to Linear Burn<br> | |||
Select Quick Mask<br> | |||
Edit >> Paste<br> | |||
Exit Quick Mask<br> | |||
Press Delete<br> | |||
Select >> All<br> | |||
Select Layer 11<br> | |||
Click on the Magic Wand then click in the center black box<br> | |||
Select >> Inverse<br> | |||
Hide Layer 11<br> | |||
Press Delete<br> | |||
Select Layer 27<br> | |||
Ctrl+Click Layer 21<br> | |||
Select >> Inverse<br> | |||
Press Delete<br> | |||
Make sure that Layers 4, 14, 10, 25, 26, 27, and Background are the only Layers showing (delete other layers if you want)<br> | |||
Save file as PSD in case you want to alter it later<br> | |||
Save file as DDS DXT 5 ARGB with No MIP Maps | |||
===Automated Process=== | |||
'''Note:''' Automated process was made on Photoshop Version 8 (Photoshop CS) and should work on that version and up. | |||
[[Image:Photoshop2.jpg|thumb]] | |||
You can download an action file that will automate most of this process from [http://www.tesnexus.com/downloads/file.php?id=23083 here].('''NOTE:''' Re-uploaded file via TESNexus) Download the file to the '''\Photoshop CS\Presets\Photoshop Actions\''' folder and it should be in '''Actions''' tab under Oblivion Load Screen. If it isn't, click the arrow in the circle on the top right corner of that section, click on '''Load Actions''' and select the '''OblivionLoadScreen.atn''' file. | |||
Open screenshot taken at 1024x768<br> | |||
Image >> Canvas Size – Change Height to 7.111, Use arrows on Anchor to center picture (area retained is the part covered by arrows and the white box), Click OK then Click Proceed in the popup<br> | |||
Select the '''Burn Load Screen''' and click the '''Play''' button (triangle down on the bottom of that section)<br> | |||
It will pop up to ask for the directory for the '''load_troll.psd''' file. Locate it, select it, and click '''Open''' | |||
Once it finishes, just save the file under a new name and as '''DDS DXT5''' with '''No MIP maps''' under the '''\Data\Textures\Menus\Loading''' folder. | |||
=== Replicating the Existing Format in Gimp === | |||
You will first of all need an image to begin with. A good starting point is to take a screenshot of one in-game. An easy and highly predictable way to do this is to open up the Construction Set, find a nice view with the camera, and take a screen-shot. Screen-shots don't always seem to work, so if you have it available use the Snipping Tool that comes built in with Vista. In the CS you will need to disable markers, enable sky and try to keep any water out of the picture. You will also need to scale the size of the render box to a size that looks roughly accurate to the ''1024x512'' scale. Once you have this picture, you can begin editing. | |||
[[Image:LoadTemplate.png|thumb| The Template]]First of all, you will need the image on the right that I have created and uploaded. It contains that weird frame that is always in the middle of the screen. | |||
Once you have your screenshot, scale it so it is at exactly ''1024x512''. Then, copy the Template to it as a new layer. It should fit perfectly. We're not worrying about colorizing just yet. Now, you should have a box in the middle of your screen. Deselect it, and go to the background layer through the layers dialogue. Draw a selection box that has its corners about half-way through the frame's border. Because they're on different layers, anything you do will not affect the frame. Once you have it selected, go to ''Select->Invert''. Now go to ''Colors->Colorize''. Set the ''Hue'' to about 46, and adjust the lightness however much you want. You should end up with a Sepia toned image around the frame. This what will appear in the game, as this is the best you can do with the limited resources available on GIMP. If you don't like it, buy Photoshop! | |||
Now, with the same selection, go to ''Select->Invert''. Now go to ''Colors->Posterize'' Depending on the variation of colour in your image, slide the bar towards the left until you get a suitably uncoloured looking image. If you feel it would make the image better, adjust the brightness and the contrast with the ''Colors->Brightness-Contrast'' tool. You can do this step with the other part of the image as well, before you lower the colours down to Sepia. However, its by no means necessary. | |||
[[Image:Vivec bg.jpg|thumb|My Result.]]Now, change your selection so it has only captured about the lower half of the frame. Open up the ''Blend'' tool. In your colour palette, choose a light sepia tone (or white) and a tone that will smooth in with the rest of the colours in your center image. Create a Blend that makes the bottom of the image light, and then merges up into the rest of the image. Then, choose the ''Clone'' tool and read down the list of options. Under ''Source'', select ''Pattern'', and click on the image. Then look for the Crinkled Paper pattern (it comes built-in with GIMP) and select it. Reduce the Opacity to about 20%. Starting just below the top of the blend, cover the whole thing from there down. Then Increase the opacity to 40% and do the same again, this time starting just below where you started the last time. Continue doing this until 60%, at which point you amp it up to 100%. I know this looks terrible now, but just continue until the bottom area is completely covered. Then, select the ''Smudge'' tool and run it across the whole area, paying special attention to the points where it meets the image. Once you have covered the whole thing, you should end up with a half-way decent looking background. Export as a DDS with BC3/DXT5 compression and no mip-maps, and insert it into the game! | |||
== | === Getting Screenshots === | ||
You should start at this section unless you don't want to use Oblivion-style loading screens. In which case, you can skip to [[Loading_Screens#Modding_and_DDS_Conversion]]. | You should start at this section unless you don't want to use Oblivion-style loading screens. In which case, you can skip to [[Loading_Screens#Modding_and_DDS_Conversion]]. | ||
| Line 29: | Line 223: | ||
Whatever image you use, make sure it's a bitmap or another loseless format before you begin. Using lossy formats like JPEG will give you blocky areas with the Find Edges filter. | Whatever image you use, make sure it's a bitmap or another loseless format before you begin. Using lossy formats like JPEG will give you blocky areas with the Find Edges filter. | ||
=== Scripts === | |||
== Scripts == | |||
Scripts (or macros) can be used to automate the process of creating a load screen. Preferrably, they allow one to start with a screenshot from the game and turn that directly into an image in the same style as Oblivion's load screens. | Scripts (or macros) can be used to automate the process of creating a load screen. Preferrably, they allow one to start with a screenshot from the game and turn that directly into an image in the same style as Oblivion's load screens. | ||
'''Paint Shop Pro 10''' | |||
Download the script [http://www.snakebytestudios.com/download.php?id=48 here] | |||
[[Image:loading_screen_script.jpg|thumb|right|Output from the script.]] | [[Image:loading_screen_script.jpg|thumb|right|Output from the script.]] | ||
Before you can run the script, you must open the load_troll.psd mentioned in the notes. Then load the image you want to convert to a load screen. You cannot have any other images open, or this probably won't work. Finally, run the script provided (File>Script>Run), and after a few seconds, you should have a pretty loading screen ready for conversion to DDS. | Before you can run the script, you must open the load_troll.psd mentioned in the notes. Then load the image you want to convert to a load screen. You cannot have any other images open, or this probably won't work. Finally, run the script provided (File>Script>Run), and after a few seconds, you should have a pretty loading screen ready for conversion to DDS. | ||
| Line 44: | Line 237: | ||
''' | '''Photoshop''' | ||
[ | Greybird made a [http://www.tesnexus.com/downloads/file.php?id=4263 Loading Screen Design Kit] for Photoshop. | ||
== Update: How to properly add brand new loadscreens == | |||
by Lancillotto | |||
Ok, I wanted to add a series of brand new loading screens to one of my mods so I came here to learn about the proper way to do it, but I noticed that even here the problem of the "default elf" had not been solved yet. I think I have the solution so I decided to share it. | |||
After scratching my head for a while I noticed that you have to do as follows: | |||
FIRST be sure to have all folder names starting with capital letters in your Oblivion Data directory: Data\Textures\Menus\Loading | |||
Insert your brand new loading screen (let’s say Pete_Load.dds) into your Loading folder | |||
ONLY AFTER THE FIRST STEP give that path to your newly created loading screen in the Construction Set, so that the folders with capital letters appear in the CS path. | |||
If you rename with caps the folders only after creating the path in the CS it will not work, so be sure to see those caps in the path you create in the CS. | |||
After doing this and saving your .esp it does not matter any longer if you rename the folders in your Oblivion Data directory back to lower case letters, apparently the .esp will still find them. | |||
[[Category: Tutorials]] | [[Category: Tutorials]] | ||
[[Category:Miscellaneous_Tutorials]] | [[Category: Miscellaneous_Tutorials]] | ||
[[Category: | [[Category: Textures]] | ||