Here’s a quick and easy one for you speed junkies, it’s very straightforward to do, but I’ve included a couple of tips below to help you get the best from your menu background.
Firstly, you’ll need a sexy photoshop image, but before you start doing your photoshop magic, you need to get the dimensions right. So create a blank canvas at 3072px wide by 2048px tall. I know, it’s huge! There’s a reason for this, so bare with me. Create something lovely, but try to leave the left-hand side of the image free from clutter to make room for the menu selection later on. Also, make sure that you leave around 256 pixels on the left and right hand sides of your image (512 pixels altogether) that can be cropped later on (this is important!).
Note: I’m not sure if 2048 x 2048 images work in non-Orange Box mods, so if it has trouble, then divide by the power of two for any dimensions I use (e.g. where I say 2048px use 1024px and where I mention 256px use 128px etc.
Now you’ll need to create two images, one for 4:3 monitors and one for 16:9/16:10 monitors, adjusted for the pixel aspect ratio differences, to do this you’ll need to adjust the proportions of the image. So before you go any further, save two PSD files on your hard disk, called background01.psd and background01_widesceen.psd respectively. Open up background01 to begin with.
So the first thing to do, is crop the image slightly on either side. Select the Crop tool and change the Width and Height settings (top left under the tool bar) to 2560px wide, by 2048 px tall. Now crop your image so you end up removing 256px from either side of your image.
Now select Image from the tool bar, and choose Image Size. Unlink Constrain Proportions and change the width of your image to 2048 x 2048. Your image will now appear squished, this is correct! You haven’t made a mistake! Quick save your PSD (CTRL-S), and then save it again as a VTF file using Nem’s VTF Photoshop Plugin that we’ve used in previous tutorials, make sure to name it background01.vtf.
That’s our 4:3 image done. So open up background01_widescreen.psd, and this time, don’t crop it. Instead, just go straight to Image; Image Size again, and change the dimensions to 2048 x 2048. This time your image will be even more squished than before, and again, this is correct! So save it as a VTF file and name it background01_widescreen.vtf.
Now go grab both of your VTF files and drop them into the following directory in your mod: materials/console. Once you’ve dropped them you’ll need to create a VMT file for each one, so open up Notepad and paste the following code in:
1 2 3 4 5 6 7 8 9 | "UnlitGeneric" { "$basetexture" "console/background01" "$vertexcolor" 1 "$vertexalpha" 1 "$ignorez" 1 "$no_fullbright" "1" "$nolod" "1" } |
Name it “background01.vmt” in the Save as dialogue and be sure to include the quotation marks so the file extension is saved as a VMT file and not a TXT file. Now create a second VMT file and paste the following code in:
1 2 3 4 5 6 7 8 9 | "UnlitGeneric" { "$basetexture" "console/background01_widescreen" "$vertexcolor" 1 "$vertexalpha" 1 "$ignorez" 1 "$no_fullbright" "1" "$nolod" "1" } |
Name this one, “background01_widescreen.vmt” again with quotation marks. And that’s it! You’re done! Just load up your mod and admire your handy work!
Ain’t it lovely?! I’ll be following up this tutorial with an explanation of how you can change the font files, add your own custom font sets and how you can alter the appearance of the menu screen for your mod!
June 25th, 2009 at 3:02 pm
Hey, that was an excellent tutorial! Truly, it’s a big help in moving my project forward. I only have a single gripe, though. For some reason my background appears extremely pixelated. Any suggestions as to how I can fix this?
Thank you!
June 25th, 2009 at 3:51 pm
Yeah I’ll see if I can help!
Can you upload a JPG of the main menu design at full resolution? Then link to it here?
Can you also do a print-screen shot of the main menu, when it’s pixelated and link to that too?
July 1st, 2009 at 4:26 am
Amazing Tutorials! Thanks.
July 1st, 2009 at 4:41 am
Amazing Tutorials! Thanks.
July 1st, 2009 at 4:48 am
wow great tutorial. the final result looks cool.
July 9th, 2009 at 12:17 pm
good tutorial dude but how do you ditch the old half life 2 backgrounds?
November 14th, 2009 at 2:27 pm
w00t!
December 9th, 2009 at 10:38 pm
I followed your tutorial it was great. but my main screen only loads and stays for a few seconds then fades to the original bsp background. How do I keep my background as the main background
December 29th, 2009 at 7:59 pm
i had the same problem as jon the backgrounds there when it loads then it fades out and the background map fades in
February 11th, 2010 at 11:22 pm
how to fix that error the two dudes over there had, because im having it too, should i create other file?
February 12th, 2010 at 7:30 am
Is the background BSP map still included in the maps directory? If it is, delete it.
February 19th, 2010 at 1:55 pm
Hi Wills, great tutorial! I got the images working, but they’re badly pixellated? And ideas? I think it may be the image data format in the dialogue when I save my .vtf file…
February 19th, 2010 at 11:12 pm
Scratch that, I’ve fixed it
The photoshop VTF plugin I used had mipmap checked by default, obviously unneccessary
February 26th, 2010 at 2:10 pm
I have a problem.
I’ve made a source mod, and it starts up with a app, and it makes the game start in the mainmenu.Help
May 6th, 2010 at 4:16 pm
Great wallpapers , i really like most of them . Thanks for sharing .
July 8th, 2010 at 9:07 pm
I have a problem.The background image returns to it default one after a few seconds.What should I do?
August 15th, 2010 at 11:48 am
Hey man, awesome tutorial, but like a tard
i need more help. I went to place all those files in the materials/console folder in folder……. but its not there? so i tried just creating it…… but no result, the background image is still the same. ne ideas?
August 28th, 2010 at 6:21 pm
Just saw it. Very good tutorial, thanks!
Well, btw, i already had all pics and this, but the only thing that i did wrong was console/*name*. I written it wrong xD