How to Make Steam Skins

By Vail Joy

Steam is a widely used video game management and community console created by Valve Entertainment. The app features an online store, chat client and social networking. One of the most popular features is its in-game overlay, which allows you to check online friends or chat without exiting your game. Steam allows you to design your own interface skins (the graphical look of the application) using a development console or via easy-to-use third-party tools.

Things You'll Need

  • Graphic editing software with TarGA Support

Using the Skin Creator

Step 1

Download the Steam Skin Creator from Fileplanet. When complete, unzip the "ilovesteam10.zip" file to the location of your choice or click the ">" button if the download application was used. Open the "ilovesteam10" folder and launch "ilovesteam_19.exe."

Step 2

Click "Next" on the installer and accept the License Agreement on the following page. Choose a location to install the Skin Creator and click "Install." Leave the "Run" box checked and click "Finish."

Step 3

Click on "Options > Edit Steam Path" and click the "Path" button. Navigate to the location of your Steam directory. This is typically C:\Program Files\Steam (Program Files(x86) on 64-bit systems). Select Steam.exe and click "Open."

Step 4

Click the "New Project" button on the Skin Creator interface. Type a project name and click "OK." The "Root" image will be shown first, with the "Server" window on the second tab. These images represent the main pieces of the Steam Client and how other dialogs will look with your modifications.

Step 5

Edit the colors, background images and icons using the fields on the left side. Colors must be entered using hex, proceeded by a # sign. You may optionally use the color picker which will appear if you click the color square to the right of the input field.

Step 6

Convert desired background or icon images to the TarGA format using a graphic editing program such as Photoshop, Corel Paint Shop Pro or Gimp. Load the existing image into the program then simply choose "Save As" from the File menu and select the file and select the "tga" file type.

Step 7

Click on the "Save Project ILS" button when finished. Click "File > Save and Export to Steam." A success message should appear.

Advanced Editing Using Dev Mode

Step 1

Download and install a 2010 or later compatible skin from Valve's website. This will serve as your template for your custom skin.

Step 2

Open Windows Explorer and navigate to your Steam folder (typically under Program Files). Double-click it and then open the "Skins" folder. Double-click the folder for the newly installed skin and then hit Ctrl+A to select everything inside. Click "Edit > Copy" from the Explorer menu.

Step 3

Return to the main Skins folder and create a new folder named after your custom skin. Double-click to open it, then right-click and choose "Paste." The contents of the downloaded skin's folder should appear inside your new skin folder.

Step 4

Launch Steam and log in. Click on "Steam > Settings" and click the "Interface" tab.Select your skin from the Skins drop-down menu and click "Yes" to allow Steam to restart. Close Steam once it reopens.

Step 5

Click on "Start," type "Run" in the search field and hit the "Enter" key. Type the path to your steam.exe within quotes, followed by a space and "-dev" without the quotes. This will launch the program in development mode. For example: "c:\program files\steam\steam.exe" -dev

Step 6

Open the window you want to begin working on, such as Friends, Servers, Community and so on. Hit "F6" to open the "vgui layout debugger" console. Only one dialog window can be edited at a time while this is open.

Step 7

Select an element of the window you want to re-design. For example, in the Friends window, you could select the "Add a Friend" link. All of the elements required for the link to display and function will appear in the debugger, divided into Styles, Detail, Layout, Groups and Localization. The primary elements to focus on are Styles and Layout which are similar to CSS styles and HTML layouts in Web design.

Step 8

Under the Styles tab, select the property you wish to modify and then click the file link on the far right. A windows dialog should appear asking you how to open the file. Click the "Select the program from a list ..." option and click "OK." Choose Notepad or your favorite HTML editor from the list. If they do not appear, click "Browse" to locate the program. (Notepad is located in your Windows folder).

Step 9

Edit the file with your desired changes to position, color or behavior. To find specific entries related to the element you have highlighted in the debugger, click on "Edit > Find" and type the name of the property. For example: Changing Button:hover to "Red" will make the text turn red after my skin changes are saved and Steam is reloaded.

Step 10

Save the changes to any text files you edit by clicking "File > Save" and take care not to change the file extension. Close Steam when you are finished editing styles and layout.

Step 11

Launch your graphic editing software. The application must be able to view and save TarGA (.tga) files, such as Photoshop, Corel Paint Shop Pro or Gimp. Cick on "File > Open" and navigate to your skin's folder within the Steam skins directory. Double-click on the Graphics folder to view the available images you can edit.

Step 12

Edit the graphic files the same way you would any other interface image. If replacing the image with one of a different size, make sure to save the new graphic with the same name and choose "tga" as the file type.