Welcome, Guest! Login | Register

Creating Custom Splash Screens for Your mod in Steam [Print this Article]
Posted by: omega
Date posted: Sep 30 2003
User Rating: 5 out of 5.0
Number of views: 11372
Number of comments: 8
Description: Just as the title says, this tutorial will explain how to create a Splash Screen for your Mod.
There has been some confusion on how to create the new splash screens, and why that they are sliced into the sizes they are. This tutorial aims to better explain how to create them (the more adept photoshop users likely need not read beyond my step list to know what to do however.)

Question #1: Why is the 800x600 tga split into 6 pieces?
Answer: As far as I know it is to retain compatibility with software. Valve is still bound by box requirements to support it, even if most don't use it, and most can't even run software in HL at any decent speed anymore; it has to be there, and it has to at least work, barely.

With all that said, now I'll rundown the list of steps we need to do in order to save our splash screen! I will also cover the logo in the lower left hand corner of the screen.

  • Create The Splash Image (800x600)
  • Use the Slice Tool to create 6 slices (6x 256x256, 3x 256x88, 2x 32x256, 1x 32x88)
  • Use the Slice Selection tool to Rename our slices to the appropriate names
  • Save as Web to export our Images
  • COnvert our Exported Images to TGA
  • Create a replacement Logo for the menu
  • View it ingame!


The background splash goes in: C:\PATH\TO\MODDIRECTORY\resource\background.
The logo goes into: C:\PATH\TO\MODDIRECTORY\resource.
The naming convention for our slices (in left to right order) is as follows:
800_1_a_loading.tga, 800_1_b_loading.tga, 800_1_c_loading.tga, 800_1_d_loading.tga
800_2_a_loading.tga, 800_2_b_loading.tga, 800_2_c_loading.tga, 800_2_d_loading.tga
800_3_a_loading.tga, 800_3_b_loading.tga, 800_3_c_loading.tga, 800_3_d_loading.tga

Now we go onto the fun stuff, creating the slices! If you already know how to use the slice tool, you probably already have figured out what to do, but for the rest of you that do not, here we go!

Step #1
Select the Slice Tool from the tool palette. In the tool options on the toolbar you should see the following (ignore the values for now, they will likely be different for you):
user posted image

Change the two values to 256 px (it is important that you have the px, or else it will change to centimetres or possibly inches, depending on your other settings!)
Now inside your image, click and hold the left button somewhere, drag and you will see a 256x256 box, drag this box to the top left corner and release; you should now have one 256x256 slice! Repeat this step for the other 5 256x256 slices.
With 6 slices created, it should look like this:

user posted image

Step #2
change the slice size to Width: 32 px and Height: 256 px and create slices 4 and 8 (on the right hand side.)

Step #3
Next change the size to Width: 256 px and Height: 88 px and create slices 9, 10 and 11 (bottom left-middle.)
You now need to create one more slice! this one is 32 px by 88 px, so create it now!
Your splash should look like this now:

user posted image

Step #4
Now that all of your slices are created, select the Slice Selection Tool (Left click and hold for a moment on the slice tool and choose the Selection Tool from the box that pops up)
With the selection tool, double click your first slice. Change its name to 800_1_a_loading, click OK. Repeat this step for each slice using the naming convention I mentioned near the beginning of this tutorial!

user posted image

Step #5
Since that you've named all of your slices, Save your PSD so you don't lose it, and then do File -> Save As Web. A new screen should pop-up showing you your image selected, with a toolbar on the right where you can select the image quality. In the Settings: dropdown box, select PNG-24. This ensures that we export proper, high-quality 24bit images. Double check to make sure all slices are set to PNG-24 by clicking on them. Once you've verified that they are, click save. Browse to an appropriate output directory (not your mod folder, yet!) and down in the bottom change Save As Type: to Images Only and then click save.
Click here to View image in another window

Step #6
Each slice should now be in a sub-folder called images under the path you chose. Load these images into PS now.
And re-save them all as Targa's. Use these Settings:

user posted image

Step #7
Once you've saved all of your images, copy the tga's to C:\PATH\TO\MODDIRECTORY\resource\background, launch your mod, and check it out ingame!

You'll notice that it still says "Half-Life" at the bottom of the menu, you'll likely want to change this image.
There is actually TWO images for this; game_menu.tga and game_menu_mouseover.tga I will not explain how to create your images, as that goes beyond the scope of this tutorial; However, the settings you need to use for these is as follows:
Size: 240x32
With Alpha Channel: 32bit, Without RLE Compression.
Without Alpha Channel: 24bit, Without RLE Compression.

And thats about it!
Here is a screenshot of my finished Splash Screen!

Click here to Open Image in a New Window

Good Luck!

Rate This Article
This article is currently rated: 5 out of 5.0 (5 Votes)

You have to register to rate this article.
Related Files
Zip FileFilename: slice_toolbar.jpg
File Size: 7.4 KB
Zip FileFilename: 6slices_done.jpg
File Size: 63.5 KB
Zip FileFilename: tga_options.jpg
File Size: 10.6 KB
Zip FileFilename: slice_options.jpg
File Size: 31.5 KB
Zip FileFilename: save_optimized.jpg
File Size: 108.2 KB
Zip FileFilename: all_slices.jpg
File Size: 74.4 KB
Zip FileFilename: finished_splash.jpg
File Size: 118.8 KB

User Comments Showing comments 1-8

Posted By: illOgic on Sep 30 2003 at 18:55:30
thanks great. looking forward to the add your icon to your third party game tutorial. :)

Posted By: Sinistar on Nov 03 2003 at 05:27:54
Hey how do you add custom text on the Steam menus? Like how you have yours say "Create a game of Omega Wing"

Posted By: cct on Jan 13 2004 at 21:20:43
how do i get the logo transparent?

i tried everything i thought of but nothing worked

Posted By: omega on Jan 14 2004 at 03:48:55
alpha channel.

Posted By: cct on Jan 14 2004 at 20:42:01
thx got it working
looking forward for the next tutorials

Posted By: Blaster on Jun 09 2004 at 09:03:43
This works great!!! I have to try this with all the MODs i play with.Edited by Blaster on Jun 09 2004, 09:16:32

Posted By: Unknown on Aug 08 2004 at 04:21:39
I got the image to work but, whenever i start up my mod now, i see the splash screen flash in the middle of the screen, not full size, and then the screen goes black. Suddenely im back to browsing my Steam games. It worked before i edited the splash screen. HELP!

Posted By: beezm on Sep 08 2004 at 03:23:54
On step #6 it should be 256px for width, not 32 ^_^


You must register to post a comment. If you have already registered, you must login.

Latest Articles
3rd person View in Multiplayer
Half-Life 2 | Coding | Client Side Tutorials
How to enable it in HL2DM

By: cct | Nov 13 2006

Making a Camera
Half-Life 2 | Level Design
This camera is good for when you join a map, it gives you a view of the map before you join a team

By: slackiller | Mar 05 2006

Making a camera , Part 2
Half-Life 2 | Level Design
these cameras are working monitors that turn on when a button is pushed.

By: slackiller | Mar 04 2006

Storing weapons on ladder
Half-Life 2 | Coding | Snippets
like Raven Sheild or BF2

By: British_Bomber | Dec 24 2005

Implementation of a string lookup table
Half-Life 2 | Coding | Snippets
A string lookup table is a set of functions that is used to convert strings to pre-defined values

By: deathz0rz | Nov 13 2005


Latest Comments
knock knock
General | News
By: MIFUNE | Dec 31 2017
 
knock knock
General | News
By: omega | Dec 22 2016
 
knock knock
General | News
By: MIFUNE | Oct 10 2015
 
New HL HUD Message System
Half-Life | Coding | Shared Tutorials
By: chbrules | Dec 31 2011
 
knock knock
General | News
By: Whistler | Nov 05 2011
 
Particle Engine tutorial part 4
Half-Life | Coding | Client Side Tutorials
By: darkPhoenix | Feb 18 2010
 
Particle Engine tutorial part 2
Half-Life | Coding | Client Side Tutorials
By: darkPhoenix | Feb 11 2010
 
Particle Engine tutorial part 3
Half-Life | Coding | Client Side Tutorials
By: darkPhoenix | Feb 11 2010
 
Game Movement Series #2: Analog Jumping and Floating
Half-Life 2 | Coding | Shared Tutorials
By: mars3554 | Oct 26 2009
 
Particle Engine tutorial part 5
Half-Life | Coding | Client Side Tutorials
By: Deadpool | Aug 02 2009
 

Site Info
297 Approved Articless
8 Pending Articles
3940 Registered Members
0 People Online (8 guests)
About - Credits - Contact Us

Wavelength version: 3.0.0.9
Valid XHTML 1.0! Valid CSS!