The Game Modding Community - Since 2001

Widescreen Hi-Res GUI Backgrnd

A Tutorial for Counter-Strike: Source

Learn to create a widescreen, high resolution background for your CS:S menu screen.

----------------------------------------------------------------------------------- This tutorial will be using Photoshop. Version 6 or later should be OK. -----------------------------------------------------------------------------------
1. Create a new canvas that measures 4,096 x 2048 (pixels). .VTF Files need to be powers of 2, hence the resolution. Note: I used 2048 x 1024 in the screenshots because I only have a 1440 x 900 monitor. All of the same instructions still apply. 2. File>Place the image or wallpaper you are going to use. Here I will be using a background I have already made and put the CS:S logo on. [Refer to SCREENSHOT 2] 3. Shift-Click a corner and expand your image to match the HEIGHT of the canvas. I'm assuming the wallpaper/image you will be using will be under 2048 px in height. If larger, decrease the height, etc. etc. [Refer to SCREENSHOT 3] 4. Align either edge of the image with a side of the canvas. [Refer to SCREENSHOT 4] - We are going to stretch the image horizontally. If not still in "place" mode, go to Edit > Free Transform or press CTRL+T. - 5. Stretch the image horizontally to the opposite edge of the canvas. [Refer to SCREENSHOT 5] Your image will now look streched out, out of proportion and all around unpleasant. DON'T WORRY! When in game, the image will automatically compact and form to the correct resolution of your monitor (given that your video settings are on your correct resolution for your monitor). 6. We are going to export the image as a .VTF file, as required by the game. If you do not have the plugin for this file type, you can download it HERE and follow the readme that is attached. 7. Go to File>Save As and name the file "background01" - be sure to click the dropdown menu below the filename input and select the .VTF extension! 8. Save or place the file in the C:\Program Files\Steam\steamapps\common\counter-strike source\cstrike\materials\console folder. If the console folder does not exist, create it. [Refer to SCREENSHOT 6] ____________________________________ Congratulations! Your finished product should look something like SCREENSHOT 1, however widescreen resolutions and aspect ratios vary based on your monitor. Thanks for reading GaryOak's Widescreen Hi-Res GUI Background Tutorial! Hope it helped. ++ I made this tut because I had never seen it done before, and it was something I had really wanted to do for a long time. Personally, I was sick of stretched out and pixely GUI backgrounds on my widescreen monitor. Hope this will help anyone else using a widescreen res (as most people should be by now). :)


  • 8y
    robin avatar
    robin Joined 11y ago
    Super Moderator
    8,258 points Ranked 558th
    29 medals 2 legendary 6 rare
    • Submitted 100 Maps Medal icon
    • 10 years a member Medal icon
    • 6 years a member Medal icon
    • Achieved Super Moderator clearance Medal icon
    • Submitted 100 Threads Medal icon
    • Returned 1000 times Medal icon
    Not enough ratings/assesments for a wrapup.
    Senior Moderator
  • 8y
    Dogger avatar
    Dogger Joined 9y ago
    Hey Garyoak! :) At Step 7 this process is unfortunately breaking down for me. I have PhotoshopCS4 (I assume the process is similar) with the .vtf plugin installed. When I attempt to save my chosen picture as a .vtf, Photoshop refuses, saying that it cannot "because there is not enough memory (RAM)." Is there some trick to this - something I am missing? (I can get around it by saving the picture as a .jpg & then converting it with "VTFEdit", but this produces a result of far lower quality. I too have a widescreen monitor - and I'm keen to get the high-quality outcome you demonstrate above!) Dogger :) *EDIT*: I have since found that P'shopCS4 will save my picture as a .vtf if the height & width are the same. I used the figure 2048 mentioned above for both values & the .vtf was created with no worries. The higher figure of 4096 seemed to cause P'shopCS4 angst for whatever reason & would not work. Not sure if this info helps anyone, but I'm posting it here in case anyone else encounters the same problem I did. Cheers, and Good Luck! :)
  • 8y
    Where did u get that hazmat suit picture for your background? Ive looked all over the internet and cant find it. Can u tell me where to get? Perhaps send it? :p thnx


  • 9y
    Kallisto avatar
    Kallisto Joined 9y ago
    Hey dude how doid you get the menu fonts to look like that? blue... pls help
    I need some smack bird
  • 9y
    GaryOak avatar
    GaryOak Joined 9y ago
    The image is stretched on the file, but since it is stretched to be larger it will compact itself to form to your resolution when the game is open, making it appear as it should. The menu background image in CS stretches/compacts to fit your screen, hence why the low-res original background is all blurry on any resolution above 1024x1024 or widescreen. The stretched image that appears in the second to last screenshot appears as the 1st screenshot when the game is open.
    Qtpai avatar
  • 9y
    kalasnikov88 avatar
    kalasnikov88 Joined 10y ago
    413 points Ranked 10741st
    14 medals 3 rare
    • 6 years a member Medal icon
    • Reached 50 subscribers Medal icon
    • Submitted 50 Skins Medal icon
    • Received thanks 5 times Medal icon
    • Reached 1,000 Points Medal icon
    • Reached 2,500 Points Medal icon
    Hmm, so what's the point ? you stretch the image, it ruins the aspect ratio anyway :/ it can be done better, not by stretching the side, but chopping off the top and bottom, though it will not be hi res :(
    Soldier of fortune


Share banner
Image URL:
HTML embed code:
BB embed code:
Markdown embed code:


Key Authors


GaryOak avatar
GaryOak Joined 9y ago

Sign up to access this!
Sign up to access this!
Sign up to access this!
Sign up to access this!



Difficulty Level
Beginner Difficulty


  • Share on Reddit
  • Share on Twitter
  • Share on Facebook
  • Share on Google+


  • 6 Posts
  • 9y Submitted
  • 5y Modified


84 bScore
9.4 Rating

1 voter

Sign up to access this!

Attention Gamer! Mascot

GameBanana is one of the oldest mod sites on the net. Sign up and maximize your browsing experience.

  • Subscribe: Get notified of new submissions like this.
  • Say Thanks: Show your appreciation - send modders points.
  • Post: Give modders your thoughts on their work.
  • Vote: Help your favorite modders win monthly awards.
  • Rate: Rate mods and help them stand out.
  • Flag: Alert moderators and warn members of problems with mods.
  • Watch: Get notified when mods are updated.

Join the community! Sign up now!

Already a Bananite? Login tracking pixel