Steam-samfunn :: Veiledning :: Steam皮肤简易制作指南

Steam

Alle Diskusjoner Kunstverk Videoer Nyheter Veiledninger

Steam > Veiledninger > Veiledninger av Omic24

170 vurderinger

Steam皮肤简易制作指南

Av Omic24

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

Utmerkelse

Laget av

Omic24
Frakoblet

Languages: Forenklet kinesisk

Lagt ut

Oppdatert

30. mai 2017 kl. 9.23

3. mars 2019 kl. 23.40

877	Unike besøkende
128	Nåværende favoritter

Veiledningsindeks

Oversikt

前言

准备工作

文字相关

背景图相关

总结

Kommentarer

前言

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 kommentarer

< >

Violet Nya 25. aug. 2017 kl. 9.27

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

Omic24 [skaper] 25. aug. 2017 kl. 9.09

是社区右边的名称么？要隐藏的话，打开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 kl. 8.32

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