详细内容见另一指南

==================================历史内容==================================




本指南将对字体、背景的替换做出几个示例，其方法在大部分情况下也适用于其他地方，并非仅限于

文中所示例的区域



查看更多内容（UI、控件相关）请点击

http://gtm.steamproxy.vip/sharedfiles/filedetails/?id=935459760

Paint 用于便捷调色以及tga图像处理

官方下载地址[www.dotpdn.com]

Notepad++ 用于编辑代码，效率远高于记事本

官方下载地址[notepad-plus-plus.org]




在Steam\skin目录下新建一个文件夹，命名为你皮肤的名字，并将Steam根目录的friends、

graphics、resource文件夹复制到你的皮肤文件夹中











然后在Steam设置界面选中你的皮肤，重启Steam



使用Notepad++（或记事本）打开resource\styles\steam.styles

可看到如下内容：


首先我们看到的是皮肤的颜色定义变量，如 black = “ 0 0 0 255”

等号前是变量名，等号后分别代表颜色的R G B A（红、绿、蓝、不透明度）值

使用paint可以便捷的得到所需颜色的RGB值（如grey=”153 153 153 255”）



















如果你需要添加新颜色，将你替换所需的颜色定义为新变量

（比如你要添加下图所示的金色，就加上 AA = “255 227 15 225” ,AA为变量名，可以自定义）


















定义的颜色变量，可以在后续的颜色修改中直接使用



打开Steam快捷方式的属性，在目标位置栏，steam.exe后方加上-dev





重启Steam，可以看到界面上多出了console按钮

























再按下F6，便会出现VGUI窗口




















此时将鼠标移回Steam主界面，可以发现有方框出现在鼠标停留的区域，点击后，将选中该区域，

同时VGUI窗口中会出现跟该部分有关的相关数据以及文件位置

























“//”（右倾斜双杠，小键盘8键上面那个键）为注释符号，该行在其后面的代码不会生效，建议

在更改某项不确定数据时，将原数据保留为注释，以防遗忘

如：AAAA = 750 更改： AAAA = 1000 //750


Ctrl+F为搜索，Ctrl+Z为撤销，这两个快捷键在大多数具有编辑功能的程序中都能使用，当你不

小心改错了某项数据时使用撤销即可

如图，可以看到，导航栏字体有三种可见的状态，正常、鼠标悬停（hover）、单击选中

（selected）

除此之外，按钮控件的状态还有键盘焦点（focus）、按住（active）、被禁用（disabled）等










按F6打开VGUI，用鼠标点击导航栏的按钮



















可以看到，VGUI给出了鼠标选中区域（白框）所相关的文件地址（红框）、相关条目（蓝框）以

及条目属性（绿框）

例如第一个条目，可以看出该项控制的是选中后（selected）字体的相关属性




属性说明：

Textcolor=“text” 文本颜色为text，text是一个已定义的颜色变量

Bgcolor=“none” 背景颜色为none，这是一个定义为完全透明（0 0 0 0）的颜

色，而非“不存在”

font-style="outerglow,uppercase" 字体效果：外光晕、大写

font-outerglow-color="TextGlowSelected" 光晕颜色：TextGlowSelected

font-outerglow-offset=1 光晕补偿,可理解为光效大小

font-outerglow-filtersize=5 光晕滤镜

font-weight=400 字体的加粗程度，0是细体，400是标准，700是粗体，1000是加粗

font-family=basefont 使用basefont字体，这是一个定义的字体变量

font-size=24 字体高度，单位为像素



注：点击红框处可以直接打开该文件，但打开的是Steam内置的配置文件，并非你的皮肤文件

夹中的文件，如果修改内置配置，重启后Steam会自动更新，修改无效，所以知道文件名后去

自己的文件夹里找

根据VGUI提示，打开resource\layout\uinavigatorpanel.layout

搜索找到如图所示的代码片段



可以看到不同的状态都有各自的配置代码

例：修改选中后（selected）的字体效果

找到selected对应的片段


这里我们去掉大写效果（uppercase），同时将光晕颜色改为自己定义的Purple（178 0 255 255）


效果如图








当然能修改的肯定不止这两个属性，理论上你看到的都能修改，当然你也可以为其添加更多的自定

义细节。

其他状态下的更改同理


注：常态下的导航栏字体状态配置名为 CUINavButton [!$OSX]，不是CUINavButton [$OSX]，有

[$OSX]标识的代码只在苹果系统中生效，“！”在编程语言中为“不等于”的意思，因此[!$OSX]意

为“非苹果系统时”，所以只用windows的话可以把带[$OSX]的代码删掉


在steam.styles中，找到如图所示的代码


将Arial改为所需字体的名字（确保你电脑上有该种字体）

例：改为basefont=" Comic Sans MS "，效果如图














注：此处更改的是名为basefont的字体变量，该变量默认为全局字体使用，如果想让不同部分的字

体各不相同，则需更改各细分部分的font-family属性

注：所需图片均要求为tga格式，可使用格式工厂等工具转换


打开VGUI,点击导航栏，得到相关文件信息（红框）













接着打开resource/layout/steamrootdialog.layout

搜索CSteamRootDialog，找到如下代码


可以看到其相关的属性

Gradient为渐变，Fill为填充，Image为插入图片

而其中 graphics/clienttexture2,就是我们要替换的图片

目前大部分皮肤的做法是在靠右侧添加一个Logo，或者使用纹理图案来覆盖

这里示例添加Logo的方法，添加的Logo如图




















将已转换成tga格式的图片，放到皮肤文件夹下的graphics文件夹中，然后将clienttexture2改为图片

的名字，会得到如图的效果












此时，我们需要调整图片的位置，以及透明度

调整位置有两种方法，修改X、Y坐标，或者修改图片

观察上上上图的代码我们可以发现，每一个渲染（render）命令都有两对XY坐标，第一对坐标为起

始点，第二对为结束点，X0代表左端，Y0代表上端，两点之间即为该控件的范围，

更改坐标数据即可达到移动的目的

而修改图片的话，需要创建一个足够长的透明对象

此处示例改图的方法，如图











同时适当修改透明度

完成后，当我们打开库时，会发现有一个不透明的长条挡住图片





于是我们要把这个东西调成透明，使用VGUI







找到这段代码


观察对比发现，这段代码包含两个填充（fill）命令，那么第一个Fill命令应该指的是左侧搜索框（红

框）的背景填充，而第二个Fill就是我们不需要的右侧背景填充（蓝框）




于是我们在第二个Fill前加上注释符号，使该行代码失去作用（删掉也可）


得到如图的效果好丑





延伸：

如何得到更好的视觉效果呢？

可以选择纹理和图片的搭配，例如：





（图片来自：Ciuvaz）

注:如使用纹理，那么纹理图案也要够“长”




==========================================================================


================================以下为历史内容==============================


打开VGUI，点击好友栏的空白处

























根据提示打开resource/styles/steam.styles

搜索CFriendsDialog SectionedListPanelInterior

找到如图所示的代码


然后发现没有东西给我们换

怎么办？自己加

可以看到，图中的渲染（render）项是空的，对比更改导航栏图片的代码，于是我们可以在其中加

上


NEP是插入的图片名

等号前的数字可以自定义，仅用于区分

修改后如图


再把图片放到graphics文件夹中

效果如图































但是我们将好友栏拉伸后可以发现，NEP的图片是顶部紧贴顶端的，也就是说，你拉伸后，图片依

然在顶端，如图










































此时我们再修改XY的参数


把第一个点Y坐标改成y1-350后，这样第一个点就会始终以好友栏的底部为起点往上350像素定位，

这样NEP就不会因为拉伸而浮空了，效果如图：









































注：如果添加图片后出现看不清字体的情况，修改图片透明度或者字体颜色即可

聊天窗口同理，代码在Steam.styles的图示位置


只需删除gradient（渐变）项，再添加image项，并添加图片，最后再对图片进行调整即可

注：聊天窗口顶部、好友栏顶部以及主界面导航栏在默认情况下都是使用名为clienttexture2的贴

图，可以通过直接替换该文件来快速替换上述三个部位的图片

整体的思路如下

使用VGUI查找需要更改的文件位置

再找到相应条目，使用文中所述方法即可




要查看更多与皮肤制作相关的内容，可前往我的另一篇指南


另：在根目录的Skin文件夹内，有一份官方的皮肤制作教程，有空不妨去看看











代码水平有限，因此以上内容肯定存在着错误以及断章取义的地方，如有错漏，欢迎指出