Search |
| |
|
|
Make a CSS menu background Difficulty: Beginner |
| Category: CS:S > Sprites & GUIs | Author(s): |

BlackJaÇk's CSS Background Tutorial
This tutorial is a simple step-by-step guide on how to overlap the background picture of the main Counter-Strike: Source menu. It does not effect the actual command buttons at all.
You will need:
- A program called VTEX
- Any program that can convert images to Targa File Format (.tga)
- A decent image editor
Step 1
Find an image you want for your background. It can be in any format. Make sure it's not too bright because you might not be able to see the white menu letters.
Step 2
Using your image editor, resize the image width and height in pixels to a number that corresponds with the power of 2. This is important because vtex will not accept the image if you use any old side length. Note: 1024 x 1024 works best.
Step 3
Open up your Targa File Format converter and save your image as "background01.tga" (obviously without the commas)
Step 4
Now here is where vtex comes in. Copy "background01.tga" and open up the folder "vtex". Open the folder "hl2". Then go into "materialsrc" and create a folder called "backgrounds". Paste "background01.tga" in backgrounds.
Step 5
Go back into "hl2" and go into the folder "materials". Create another folder called "backgrounds" in "materials".
Step 6
Copy "background01" from "backgrounds" and go to the folder containing the application "vtex". Right click on "vtex" and paste.
Step 7
Now go into "materialsrc\backgrounds" and you should see your original .tga and a .txt file. Copy them both and do the same thing you did in Step 6 but with both the .txt and the .tga.
Step 8
Your almost done. Go into "materials\backgrounds" and if you have done everything correctly there will be a VTF file sitting there. Cut the VTF file and paste it into "C:\Program Files\Valve\Steam\SteamApps\***YOUR_ACCOUNT_NAME***\counter-strike source\cstrike\materials\console". If any of those files do not exist - create them.
Step 9
Congratulations! Your background is now inserted into your game. Now all you have to do run Counter-Strike: Source and your picture should be at the main menu. If you don't like what you have done simply remove the VTF from console and it will be back to the default background.
If it doesn't work or you have any queries, questions etc. Feel free to contact me - teh_blackjack@hotmail.com
You can also use this tutorial to replace the picture of the computer screens in office, the plasma screen in office, the portraits on the wall of office and much more! (Read Below)
Replacing the computer screen-
Basically follow the 8 Steps in the background tutorial but change a few things:
- Make your image 256 x 256 instead of 1024 x 1024
- Instead of calling your VTF "background01", call it "screen"
- Instead of putting the VTF in "materials\console" put it in "materials\models\props\cs_office"
Replacing the plasma skin (not just the screen)-
- You will have to fiddle with the size settings depending on your skin
- Rename the VTF "TV_plasma"
- Place "TV_plasma" in "materials\models\props\cs_office"
Replacing the portrait pictures-
- Make your image 256 x 256
- Rename the VTF any of the following-
offinspa
offinspb
offinspc
offinspd
offpaintinga
offpaintingb
offpaintingd
offpaintinge
offpaintingf
offpaintingg
offpaintingh
offpaintingj
offpaintingk
offpaintingl
offpaintingo
- Place the VTF in "materials\models\props\cs_office"
Using your creativeness you can create many more skins using vtex, dont be limited to whats in this tutorial.
I hope this tutorial helped you :)
-Black.JaÇk-
teh_blackjack@hotmail.com
|
| Added: 3 years ago | Tags: make, menu, background |
 Add Feedback Provide constructive feedback. What is "constructive"?You cannot post yet!Get involved on FPSB by posting your thoughts. Give authors your feedback to help them develop. To post in this submission register or login. |
 The community's verdict. Disapproval Warning This submission has been disapproved and will be automatically trashed if more are made. Please check the submission and vote accordingly. Disapproved for Broken Layout (1 time)
You cannot assess yet!Moderating FPSB is in your hands - when you assess a submission your vote determines its success or failure. To vote on this submission register or login. This Tutorial in a nutshell... Poor Spelling 1 x Poor Spelling You cannot stamp yet!Stamps let you apply characteristics to submissions to help others understand them. To stamp this submission register or login. None foundWant more? Find related tuts. |
|
|