Texturing: Loading Screens (PS)

[InsanitySorrow]

Loading Screen Tutorial

This tutorial will take you through the stages of developing your own loading screens, these have been designed to look like the vanilla screens in most ways but with some additional tweaks.

Required:

Tutorial Resources

Photoshop (Preferably a CS version)

Step 1: So the first step in our loading screens is to open up photoshop and load in the loading screen template.

The one you want is called Default Loading Screen, once opened you should see something like this (Depends on your PS version)

Step 2: The Next thing we need to do is pick a nice looking image we are going to use for our loading screen. The main importance here is to pick a screen that has most of the action etc happening in the middle of the screen.

This is becuase a frame will be placed in the center of the screen and inside it is the colourful image.

Okay pic your image and open it in Photoshop, now copy it and paste it into our template right under the Frame Layer.

Step 3: This is a simple step, rename our image layer to Colour Image

What we need to do next is position our screen so we see the best part in the center, remember that the image has to fill the template so this will need some gentle tweaking to get right.

Once we have done that we need to duplicate that layer, and then name it BG Image. Make sure our BG Image layer is positioned under our Colour Image Layer.

Step 4: This is where things get interesting, now we get to play with some filters and stuff to make a Background close to the Vanilla Loading Screens.

For this part we will be working on the BG Image layer, so make sure this is the one you are on, might be better to turn off the view of the others.

First we are going to Desaturate the image, press CTRL+SHIFT+U, you should see all the colour drain from the image.

Next we are going to use: Filter>Stylize>Find Edges, you should get a pencil effect on the image.

Now we are going to do a fade on the image,CTRL+SHIFT+F, this will bring up our fade menu and now from the drop down box select Colour Dodge and press OK.

Next is the Gradient Map, quick step here is to adjust your colors to a white background and a brown foreground,

To adjust your colours, first thing to do is locate your colour options in the toolbar:

Next thing to do is double click on your colour tab and bring up the colour chart menu, here you can adjust the RGB colours.

The brown colour we will use is this:

R: = 96

G: = 57

B: = 19

That will give you a dark brown. Now go Image>Adjustments>Gradient Map, Click Ok

Now we have a brown and white image, Ok so over in your Layers Tab select the layer style Linear Burn and set the opacity to 50%, here you can tweak the opacity to your liking and then move to the next bit which is to sharpen the image.

Filter>Sharpen>Sharpen

lets do that again

Filter>Sharpen>Sharpen

Here are the results of this step:

[InsanitySorrow]

Step 5: Now here is a simpler part of the tutorial , Ok so if you made the other 2 layers invisible make them visible now and click on the Frame Layer.

We are going to use our Magic Wand tool, change its settings to:

Tolerance = 0

Anti-Alias = On

Contiguous = On

Now click on the layer and all around the frame should be selected, now with this selected click your Colour Image layer and press the Delete button

You should see that all the colour image apart from inside the frame dissapears. Congradulations the tutorial is nearly complete , this is what you should have so far:

Final Step: This is our final step and it is mostly cleaning up with some final touches, one of the main things you will notice is that the colour image bleeds under the Frame. So to remedy this we will use the Rectangular Marquee Tool and select each side of the frame one at a time and delete the Colour image.

This requires us to be on the Colour Image Layer with the Frame Layer Visible, we highlight each section and then press the delete key to remove.

Selection will look like this:

Once we have cleaned up the image we can now apply our favourite image enhancements. Any will do and any can be applied, just remember they get done to our Colour Image Layer only.

One of the enhancements I make is the Exposure level, this all depends on the image itself but if applied correctly it can really enchance the lighting in the Loading Screen.

Here is my Finished Tutorial Loading Screen:

Thats it, the tutorial is complete and you have successfully made your first loading screen

Saving:

This is a part you will need to get right , Loading Screens are saved as .dds files with compression DXT5 and NO Mip-Maps

Usage:

You new loading screen files go in the following folder:

Textures\Menus\Loading\xxx.dds

Note: xxx.dds represents your DDS Files, you can also have sub-folders within this folder structure. All sub folders go in the loading folder.

[StarX]

Nice tut! Thanks for this and the template, will DL it later on!

[InsanitySorrow]

Nice tut! Thanks for this and the template, will DL it later on!

Thanks, I hope you fins it useful , there are 3 templates in the file:

• Standard Beth Load Screen Template
  
• DarkUI Load Screen Template
  
• My Custom Load Screen Template
  

[darkstone]

Thanks for this,really useful and easy to use guide.

[myrmaad]

Sweet! I can't wait to try it! Thank you,

[InsanitySorrow]

Let me know how you get on

[donnato]

Corel is much different in that finding the buttons and placements are often docked and the undock button is hard to see. How do I get rid of the blue frame around the templates and my images. I dont see them in your screens. Basicly I think this will work...hmm magic wand...gotta find that one. My first serious usage of my PS. Very interesting.

[InsanitySorrow]

Have you got a screenshot I can look at Don?

Not had any experience in Corel, but will try to help as much as I can

[donnato]

Have you got a screenshot I can look at Don?

Not had any experience in Corel, but will try to help as much as I can

Sure IS. Here ya go. Maybe I resized a little too much

[darkstone]

My first attempt just to get the steps clear in my head.

[InsanitySorrow]

Sure IS. Here ya go. Maybe I resized a little too much

Yeah I think the re-sizing is hiding the blue line, I cannot see one

My first attempt just to get the steps clear in my head.

Turned out very nice indeed

[donnato]

Not a line IS. It`s the blue frame containing the Minimize-Maximize-Close buttons in the upper right, and some info along the upper left.

[InsanitySorrow]

Not a line IS. It`s the blue frame containing the Minimize-Maximize-Close buttons in the upper right, and some info along the upper left.

I would not worry about that , thats just the current project window, thats how it was before tabs become more popular

[donnato]

I would not worry about that , thats just the current project window, thats how it was before tabs become more popular

Hehheh I was just gonna edit to tell ya not to worry about it. I`m getting the same results I see in the tut...so far. I`m not gonna bug ya too much on this IS `cause this is fun and all but there`s other - more important stuff I need atm. Thank you much, this`ll be here when I want it.

[InsanitySorrow]

Hehheh I was just gonna edit to tell ya not to worry about it. I`m getting the same results I see in the tut...so far. I`m not gonna bug ya too much on this IS `cause this is fun and all but there`s other - more important stuff I need atm. Thank you much, this`ll be here when I want it.

Thats good to know , Don't worry about bugging me, if it wasn't for Myrmaad mentioning she would like to make Load Screens then this tut would not have been made and I would not be jumping back and too from different tuts

I am all over the show today

No worries, just enjoy it and ask questions when needed.

[donnato]

Well so far so good. this is what I`ve got atm.

[InsanitySorrow]

Well so far so good. this is what I`ve got atm.

Did you merge the colour layer with the Background?, just cannot see it in your layers tab, its important to keep the brown background

Your making progress there Don

[The_Laughing_Man]

How much does photoshop cost? I would like to get it to touch up my pics.

[donnato]

Did you merge the colour layer with the Background?, just cannot see it in your layers tab, its important to keep the brown background

Your making progress there Don

Kinda gotta mess with it IS. I have to figure that one out. Messed it up good but not too far along to start over. Trying to figure out how it all works in this program. No worries mate. Thanks. BTW the more I see my new sig, the more I love it. Thank you for that one too.

[InsanitySorrow]

How much does photoshop cost? I would like to get it to touch up my pics.

$699

Pretty steep, here is a link

[The_Laughing_Man]

$699

Pretty steep, here is a link

I can in no way afford that right now. But thanks for answering. I guess Ill use gimp for now.

[InsanitySorrow]

Kinda gotta mess with it IS. I have to figure that one out. Messed it up good but not too far along to start over. Trying to figure out how it all works in this program. No worries mate. Thanks. BTW the more I see my new sig, the more I love it. Thank you for that one too.

Ahh new to the program, no worries. It took me a little while to figure out CS4, but its not that bad

Edit: @TLM - Yeah its expensive, I am looking into a GIMP tutorial for this, so if you find out how to make load screens in that, don't be afraid to start a tutorial or post the info

[DarkRider]

Hmmm...I seem to be hung up at this step:

Next is the Gradient Map, quick step here is to adjust your colors to a white background and a brown foreground, the brown we will use is this:

R: = 96

G: = 57

B: = 19

That will give you a dark brown. Now go Image>Adjustments>Gradient Map, Click Ok

Where do I adjust the colors?

[InsanitySorrow]

Hmmm...I seem to be hung up at this step:

Where do I adjust the colors?

Give me a few minutes to get pcis for you

Edit: Here is some info for you, also added it to the tutorial

First thing to do is locate your colour options in the toolbar:

Next thing to do is double click on your colour tab and bring up the colour chart menu, here you can adjust the RGB colours.