Widescreen Hi-Res GUI Backgrnd

A Tutorial for Counter-Strike: Source

Greetings! We are one of the oldest mod sites on the Interwebs. Sign up and maximize your browsing experience.

  • Subscribe: Get notified of new submissions like this.
  • Say Thanks: Show your appreciation by sending GaryOak points.
  • Post: Give GaryOak your thoughts on this Tutorial.
  • Vote: Help GaryOak win the Monthly Awards.
  • Rate: Give this Tutorial a rating out of 10.
  • Flag: Alert moderators and warn members of a problem with this Tutorial.
  • Watch: Get notified when this Tutorial is updated.
Mascot

Stop Lurking!

Sign up

Already a Bananite? Login

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). :)

Posts

  • 7y
    robin avatar
    robin avatar Hibernating
    Super Moderator Joined 10y
    7,329 points Ranked 606th
    28 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
  • 7y
    Dogger avatar
    Dogger Offline
    Member Joined 8y
    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! :)
    inactive
  • 8y
    mcbonillajr avatar
    Member Joined 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

    9.4/10

    Bananite
  • 8y
    Kallisto avatar
    Kallisto Offline
    Member Joined 8y
    Hey dude
    how doid you get the menu fonts to look like that?
    blue... pls help
    I need some smack bird
  • 8y
    GaryOak avatar
    GaryOak Offline
    Member Joined 8y
    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
    Mantra
    Qtpai
  • 8y
    kalasnikov88 avatar
    Member Joined 10y
    388 points Ranked 10719th
    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

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

More embeddable images

Bookmark and Share

Credits

Key Authors
GaryOak
Creator

Submitter

GaryOak avatar
GaryOak Offline
Member Joined 8y

GaryOak
Creator
Sign up to access this!
Sign up to access this!
Sign up to access this!
Sign up to access this!

Category

Details

Difficulty Level
Beginner Difficulty

Stats

Posts
6
Views
6,669
Date Added
8y
Date Modified
4y

Scores

84 bScore
9.4 Rating

1 voter

Sign up to access this!
bcp.crwdcntrl.net tracking pixel