Steam Community :: Guide :: Steam皮肤简易制作指南

Steam

All Discussions Artwork Videos News Guides

Steam > Guides > Omic24's Guides

170 ratings

Steam皮肤简易制作指南

By Omic24

本指南包含以下内容：文字调整、主界面/好友/聊天窗口栏背景替换

Award

Created by

Omic24
Offline

Languages: Simplified Chinese

Posted

Updated

30 May, 2017 @ 9:23am

3 Mar, 2019 @ 11:40pm

862	Unique Visitors
128	Current Favorites

Guide Index

Overview

前言

准备工作

文字相关

背景图相关

总结

Comments

前言

2018.7.25 Steam默认UI已更新，指南内容已更新

详细内容见另一指南

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

是不是看腻了原版的土气皮肤？又或者说网上找的皮肤都不尽人意？

那为什么不自己动手做一个呢？

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

文中所示例的区域

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

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

准备工作

推荐的工具

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

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

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

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

（1）建立文档

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

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

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

（2）变量相关

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

可看到如下内容：

steam.styles { colors { black="0 0 0 255" dark="35 35 35 255" almostBlack="22 22 22 255" almostBlackTrans="22 22 22 204" white="255 255 255 255" grey="153 153 153 255" none="0 0 0 0" yellow="255 255 0 255" offwhite="164 164 164 255" dullgreen="216 222 211 255" maize="203 191 87 255" red="255 51 51 255" darkblue="39 100 130 255" blue="54 143 179 255" darkred="128 0 0 255" darkpurple="64 0 64 255" ......

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

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

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

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

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

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

（3）调出控制台及VGUI的使用

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

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

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

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

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

（4）必备知识

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

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

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

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

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

文字相关

（1）导航栏文字更改

如图，可以看到，导航栏字体有三种可见的状态，正常、鼠标悬停（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

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

CUINavButton [$OSX] { textcolor="Labelfocus" bgcolor="none" font-family=basefont font-size=24 font-weight=400 font-style="uppercase" padding-left=5 padding-right=5 } CUINavButton:disabled { textcolor="TextDisabled" bgcolor="none" font-family=basefont font-size=26 font-weight=400 font-style="uppercase" } CUINavButton:hover { textcolor="Text" font-style="outerglow,uppercase" font-outerglow-color="TextGlowHover" font-outerglow-offset=1 font-outerglow-filtersize=5 } CUINavButton:disabled:hover { textcolor="TextDisabled" font-style="uppercase" } CUINavButton:selected { textcolor="white" bgcolor=none font-style="outerglow,uppercase" font-outerglow-color="TextGlowSelected" font-outerglow-offset=1 font-outerglow-filtersize=5 }

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

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

找到selected对应的片段

CUINavButton:selected { textcolor="white" bgcolor=none font-style="outerglow,uppercase" font-outerglow-color="TextGlowSelected" font-outerglow-offset=1 font-outerglow-filtersize=5 }

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

CUINavButton:selected { textcolor="white" bgcolor=none font-style="outerglow" font-outerglow-color="Purple" font-outerglow-offset=1 font-outerglow-filtersize=5 }

效果如图

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

义细节。

其他状态下的更改同理

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

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

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

（2）主要字体修改

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

basefont="Arial" basefont="Helvetica" [$OSX]

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

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

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

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

背景图相关

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

（1）主窗体导航栏

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

接着打开resource/layout/steamrootdialog.layout

搜索CSteamRootDialog，找到如下代码

CSteamRootDialog { bgcolor=none render_bg { 0="gradient( x0, y0, x1, y0+175, ClientBGTop, DialogBG )" 2="image( x0, y0, x1, y0+175, graphics/clienttexture2)" 3="fill( x0, y0+175, x0+20, y1-76, DialogBG )" 4="fill( x1-20, y0+175, x1, y1-76, DialogBG )" 5="fill( x0, y1 - 76, x1, y1, DialogBG )" } }

可以看到其相关的属性

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

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

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

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

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

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

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

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

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

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

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

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

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

同时适当修改透明度

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

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

找到这段代码

styles { grouper { bgcolor=none render_bg { 0="fill( x0 + 2, y0 + 1, x0 + 273, y1 - 1, clientgrouper )" 1="fill( x0 + 279, y0 + 1, x1 - 10, y1 - 1, clientgrouper )" } } ......

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

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

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

styles { grouper { bgcolor=none render_bg { 0="fill( x0 + 2, y0 + 1, x0 + 273, y1 - 1, clientgrouper )" // 1="fill( x0 + 279, y0 + 1, x1 - 10, y1 - 1, clientgrouper )" } } ......

得到如图的效果好丑

延伸：

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

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

（图片来自：Ciuvaz）

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

（2）好友栏

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

Steam 2018.7.25 好友列表更新，若要使用旧版，则需要在快捷方式中加入 -nofriendsui -udp

2019.3.4 更新，切换UI老方法已失效，我只找到一个-no-browser有用，但是会禁用Steam内部浏览器（比如商店、个人页面），所以好友列表就先放着吧

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

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

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

搜索CFriendsDialog SectionedListPanelInterior

找到如图所示的代码

"CFriendsDialog SectionedListPanelInterior" { bgcolor=none inset="-6 -1 -1 -1" font-family=basefont font-size=14 font-weight=400 textcolor="Text" selectedtextcolor="TextSelected" selectedbgcolor="Focus" shadowtextcolor="TextDisabled" // the color of disabled line items render { } render_bg { } }

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

怎么办？自己加

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

上

2="image( x0, y0, x1, y1,graphics/NEP )"

NEP是插入的图片名

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

修改后如图

再把图片放到graphics文件夹中

效果如图

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

然在顶端，如图

此时我们再修改XY的参数

render_bg { 2="image( x0, y1-350, x1, y1,graphics/NEP )" }

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

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

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

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

ChatListPanel { render {} render_bg{ 0="gradient( x0, y0, x1 -16, y1, darkdialogbg, almostblack )" } }

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

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

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

总结

整体的思路如下

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

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

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

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

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

12 Comments

< >

Violet Nya 25 Aug, 2017 @ 9:27am

感謝感謝~~如有不懂再麻煩了

Omic24 [author] 25 Aug, 2017 @ 9:09am

是社区右边的名称么？要隐藏的话，打开uinavigatorpanel.layout

来到底部layout条目中

添加

region {name=hidden width=0 height=0}

place { control="label_me" x=14 y=16 region=hidden height=0 width=0}

然后把

place { control="label_store,label_library,label_community,label_me,label_news,label_console" x=72 y=9 spacing=9 margin=2 height=40 }

中的label_me,（以及后面一个逗号）删掉即可

但是你这样的话，一些附属在这个键上的功能就消失了，可以先将按键中的选项移至他处

Violet Nya 25 Aug, 2017 @ 8:32am

謝謝,但是還是找不到是哪一項...