Steam Community :: Guide :: Steam皮肤进阶制作指南

Steam

All Discussions Artwork Videos News Guides

Steam > Guides > Omic24's Guides

41 ratings

Steam皮肤进阶制作指南

By Omic24

本指南包括以下内容：UI、控件更改

Award

Created by

Omic24
Offline

Category: Crafting

Languages: Simplified Chinese

Posted

Updated

30 May, 2017 @ 9:23am

5 Aug, 2018 @ 8:24pm

431	Unique Visitors
40	Current Favorites

Guide Index

Overview

前言

右上控制区

左侧面板

左上导航区

页面更改

头像框

最终成果

2018.7.25更新

总结

Comments

前言

2018.7.25 Steam默认UI已更新，指南内容更新详见更新章节

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

是不是觉得仅仅换几张背景图换几个字没意思？想来点高级的？

下图为一款比较知名的皮肤：Threshold

作者：Edgarware

本指南将以Threshold为模板，在将原版Steam皮肤一步步修改成Threshold的过程中，示例Steam面板中各处控件的修改方法

Threshold作者发布的皮肤下载地址 https://github.com/Edgarware/Threshold-Skin/releases

如果没有皮肤制作经验的话请先看下面这个

http://sp.zhabite.com/sharedfiles/filedetails/?id=935986694

注：本指南中所使用的图标资源均来自Threshold

右上控制区

首先我们来更改大屏模式、最大最小化等按钮

打开VGUI

在VGUI中我们可以看到，跟该部分按钮相关的代码一部分在steam.styles中,而另一部分则是在steamrootdialog.layout中

我们先来到steam.styles，找到相关代码

(左图为Threshold，右图为原配)

可以看到，在官方的代码中，是给按钮的三种状态分别赋予三个贴图，当鼠标悬停时，使用更亮的按钮贴图

而Threshold的做法是更改背景颜色

我们将以下各条目的代码进行更改（包括各状态）:

FullscreenButton（全屏模式按钮）

FrameMinimizeButton（最小化按钮）

FrameMaximizeButton（最大化按钮）

FrameRestoreButton（复原按钮，就是按了最大化后再按一下就复原的那个键）

FrameCloseButton（关闭按钮）

注：代码中的inset用于控制控件范围（大小），在上上上图中可以看到，Threshold是在steam.styles进行inset属性控制，而原配是在steamrootdialog.layout中

将上述按钮的代码分别改为

常态：

{ bgcolor=none inset="12 0 0 0" render_bg={} image="graphics/对应贴图路径" }

鼠标悬停状态（hover）以及按下状态（active）

{ bgcolor="TitleBar.Hover" }

注：此处TitleBar.Hover="70 70 70 100"

完成了单个按钮的修改后，我们还要修改他们的整体布局

打开steamrootdialog.layout，将上述按钮的条目属性全部删除（原因看上个注释）

同时在该文件最底端，我们找到如图所示的代码

place [!$OSX] { control="frame_minimize,frame_maximize,frame_close" align=right margin-top=10 margin-right=9 spacing=-5 } place [$OSX] { control="frame_close,frame_minimize,frame_maximize" align=left margin-top=10 margin-left=4 spacing=-7 }

其中：

名称

含义

Control

所控制的控件

align=right

右对齐

margin-top

顶边距

margin-right

右边距

width

宽度

height

高度

Spacing

间距

我们将其改为

place { control="fullscreen,frame_minimize,frame_maximize,frame_close" align=right margin-top=0 margin-right=0 width=46 height=32 spacing=0 }

效果如图

左侧面板

接下来制作这块区域

这块区域，在原版的配置中是完全不存在的，因此我们需要自己添加

打开uinavigatorpanel.layout

找到下列代码

place { control=emailreminderbar margin-top=81 margin-left=8 margin-right=8 width=max height=48 } place { control=phonereminderbar margin-top=81 margin-left=8 margin-right=8 width=max height=80 }

此处的emailreminderbar 、phonereminderbar是一个类似于面板总控制的东西

我们将其改为

place { control=emailreminderbar start=URLBar dir=down margin-top=0 margin-right=0 width=max height=50 x=230 y=32} place { control=phonereminderbar start=URLBar dir=down margin-top=0 margin-left=0 width=max height=80 x=230 y=32}

效果如图

接着我们把导航栏的按钮修改到这块新区域中

在同一文件中，找到如下代码

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

这一行即为控制导航栏位置的代码，将其改为

place{control="label_store,label_library,label_community,label_me,label_news,label_console" dir=down x=45 y=120 spacing=0 width=200 height=45 width=230 y=32}

效果如图

然后需要在字体左边添加图标

打开steamrootdialog.layout,找到下列代码

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 )" } }

我们在其中添加新的渲染项以增加图标

CSteamRootDialog { bgcolor=DialogBG 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 )" } render{ 0="image (x0+15, y0+154, x1, y1, graphics/Threshold/store)" 1="image (x0+15, y0+199, x1, y1, graphics/Threshold/library)" 2="image (x0+15, y0+244, x1, y1, graphics/Threshold/community)" 3="image (x0+15, y0+289, x1, y1, graphics/Threshold/me)" } }

效果如图

注：因为控制台（Consloe）非常驻选项，因此没有图标

接着我们把右下角的头像移到左上角

打开Steamrootdialog.Layout,在底部找到图示的代码

place { control="FriendPanel" height=48 width=48 region=bottom align=right margin-right=2 margin-top=16 }

将其改为

place { control="FriendPanel" height=48 width=48 y=80 margin-left=10 width=max height=63}

效果如图

然后我们来移动这几个按键

首先我们更改收件箱（inbox_button）的图标,相关条目位于steamrootdialog.Layout

需要注意的是它的两种状态（有消息和无消息），原配中是分别使用两种贴图（启封的信件和未启

封的信件）以及更换蓝色背景来区别，而Threshold中仅更改了背景色（inbox_button_active即为有

消息状态的条目）

图标修改完后，来到teamrootdialog.Layout的底部找到如图的代码

place { control="InboxButton" align=right end-right="account_balance" margin-top=4 margin-right=16 height=26 } place { control="ParentalLockButton" align=right end-right="InboxButton" margin-top=7 margin-right=10 height=23 } place { control="SupportAlert" align=right end-right="ParentalLockButton" margin-top=4 margin-right=10 height=26 }

图中的第一行即为我们需要更改的地方，但是可以看到inboxbutton和下方的

ParentalLockButton（家长控制按钮）、SupportAlert（支持选项）的属性是相关联的，可以选择将

三者一起移动，或者无视后两者（因为基本见不到）

注： Threshold在许多文件的layout条目中，都添加了自定义的region（区域）项，layout中的控件

可以直接调用region名，使控件被放置在对应区域

此处我们将这三个一起移动，首先在layout中添加两个region项

layout { region {name=left width=230 y=32} region {name=bottom region=left width=max height=50 align=bottom} ......

然后将上上图中的三行代码换为

place { control="SupportAlert, ParentalLockButton , InboxButton" region=bottom align=right height=50 width=50 spacing=0 dir=right}

效果如图

下一个移动是账户余额以及账户名

首先在steamrootdialog.layout添加一个新的region项

region { name=account region=left y=47 margin-left=5 width=max height=63 }

然后在底部找到

place [!$OSX] { control="account_balance, account_balance_seperator, account_URL, universe_label, startvr, exitvr, fullscreen" align=right margin-top=12 margin-right=88 spacing=7 } place [$OSX] { control="account_balance, account_balance_seperator, account_URL, universe_label, startvr, exitvr, fullscreen" align=right margin-top=12 margin-right=15 spacing=7 }

我们需要更改的是account_balance（账户余额），而它已经包含在了一串控制命令中，因此我们需要先将图中的account_balance删掉

然后在下面加上

place { control="account_balance" start=FriendPanel dir=down y=0 x=4 region=account}

可以看到这行代码中含有一个start=FriendPanel，可以理解为“从FriendPanel（头像框）位置起始”

效果如图

再接着是账号URL，以及好友在线显示

在同一文件中layout中，将account_URL、view_friends 、online_friends在原来的条目中移除，并添加新的代码

place { control="account_URL" margin-left=60 y=15 region=account} place { control="view_friends" height=12 y=30 margin-left=52 region=account} place { control="online_friends" height=12 x=10 y=30 spacing=5 margin-left=52 region=account}

效果如图

注：在原版配置中，鼠标单击好友显示控件（view_friends，红框范围）时会弹出好友列表，做出上

述更改后，”VIEW FRIENDS LIST”文字被隐藏，同时控件大小被缩小成在线人数显示区

（online_friends，绿框）大小，并与人数显示重合，因此更改后点击在线人数处即为打开好友列表

左上导航区

接着来更改这块区域

先看到菜单键（steam键等）

对比Threshold的该处区域

可以看到，许多键被“融合”到了一个键中（包括左下角的添加游戏键ADD A GAME）

通过VGUI我们可以知道该按钮名为MenuBar，但VGUI并没有给出按钮中选项相关的修改地址

此时我们打开steam.menu（不是steam.style）

可以看到如下代码

"menubar" { Steam { text = [!$OSX] "#steam_menu_file" text = [$OSX] "#SteamRootAccount" ChangeUser{ text="#steam_menu_changeuser" command="ChangeUser" } GoOnline { text="#SteamUI_OfflineMode_GoOnline" command="goonline" } GoOffline { text="#SteamUI_OfflineMode_GoOffline" command="gooffline" } Divider {} CheckForUpdates { text="#steam_menu_checkforupdates"command="CheckForUpdates" } Divider {} BackupGames { text="#steam_menu_backupgames"command="backupgames" } Divider {} Settings {text="#steam_menu_settings"command="Settings" } Divider {} Exit {text="#Steam_ExitSteam"command="Exit" } } View ......

再对比原配中的按键

仔细观察不难发现

Divider即为分割线，要更改按键内容只需修改相应条目内容即可

修改完成后，效果如图

注：此处顺带消灭了右侧的view、friends、game、help键

下一步，我们更换菜单按钮（steam键）的图标以及位置

在steamrootdialog.layout中添加如下代码

"MenuBar MenuButton" { textcolor="none" inset="0 0 0 0" render{ 0="image(x0+17,y0+14,x1,y1,graphics/Threshold/menu)" } } "MenuBar MenuButton:hover" { render_bg { 0="fill(x0,y0,x1,y1,Menu.Button.Hover)" } } "MenuBar MenuButton:frameFocus:hover" { render_bg { 0="fill(x0,y0,x1,y1,Menu.Button.Hover)" } } "MenuBar MenuButton:frameFocus:selected" { render_bg { 0="fill(x0,y0,x1,y1,Accent)" } }

然后在底部的layout中更改其控制项，改为

place { control="MenuBar" height=40 width=50 y=32 x=0 }

效果如图：

接着，我们先来看Threshold在该区域的几种状态

常态：

后退键可用时：

后退、前进键均可用时：

容易看出，在后退、前进键不可用时（disabled），他们是隐藏的

悬停时（hover）替换高亮背景

常态（可用时）蓝底

除上述之外，可以看到，在Threshold中，后退键不可用时，在后退键的位置，显示的是“Steam”字

样，当后退键可用时，后退键出现并将“Steam”字样右移，注意此时的“Steam”字样已经不再具有按

钮功能

为了达到这个效果，我们要在uinavigatorpanel 的Style条目中添加如下代码

BackButton { bgcolor=none inset="13 0 0 0" image="graphics/Threshold/back_sm" render_bg{ 0="fill(x0,y0,x1,y1,TitleBar.Accent)" 1="image(x0+60, y0+11, x1, y1, graphics/Threshold/title)" } } BackButton:framefocus { bgcolor=none inset="13 0 0 0" image="graphics/Threshold/back_sm" render_bg{ 0="fill(x0,y0,x1,y1,TitleBar.Accent)" 1="image(x0+60, y0+11, x1, y1, graphics/Threshold/titlefocus)" } } BackButton:hover { bgcolor=none image="graphics/Threshold/back_sm" render_bg{ 0="fill(x0,y0,x1,y1,TitleBar.Accent.Hover)" 1="image(x0+60, y0+11, x1, y1, graphics/Threshold/title)" } } BackButton:hover:framefocus { bgcolor=none image="graphics/Threshold/back_sm" render_bg{ 0="fill(x0,y0,x1,y1,TitleBar.Accent.Hover)" 1="image(x0+60, y0+11, x1, y1, graphics/Threshold/titlefocus)" } } BackButton:active { bgcolor=none image="graphics/Threshold/back_sm" render_bg{ 0="fill(x0,y0,x1,y1,TitleBar.Accent.Hover)" 1="image(x0+60, y0+11, x1, y1, graphics/Threshold/title)" } } BackButton:active:framefocus { bgcolor=none image="graphics/Threshold/back_sm" render_bg{ 0="fill(x0,y0,x1,y1,TitleBar.Accent.Hover)" 1="image(x0+60, y0+11, x1, y1, graphics/Threshold/titlefocus)" } } BackButton:disabled { bgcolor=none image="none" render_bg{ 0="image(x0+13, y0+11, x1, y1, graphics/Threshold/titlefocus)" } } BackButton:disabled:framefocus //SIGH... Doesnt seem to work { bgcolor=none image="none" render_bg{ 0="image(x0+13, y0+11, x1, y1, graphics/Threshold/titlefocus)" } }

再修改两个键的位置

place { control="back" x=0 y=0 height=32 width=50} place { control="forward" region=left x=50 height=40 width=40}

效果如图

可以看到，后退键并没有如预期般出现在左上角，即使更改place中后退键的x、y坐标，也没有效果

此时我们需要到steamrootdialog中更改另一项属性

在layout条目中找到UINavigatorPanel的控制项，并将其更改为

place { control="UINavigatorPanel" width=max height=max margin-right=0 margin-left=0 margin-bottom=0 margin-top=0 }

效果如图

然后我们把这个键删掉

如果你直接将其相关代码删掉的话，不仅删不掉，它还会出现在一些鬼畜的地方

Threshold的做法是，创造一个没有面积的区域（region），然后把这个键放进去

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

效果如图

页面更改

在之前的改动中，左侧边栏以及顶部导航栏的改动使得主页面显得过小

我们来到uinavigatorpanel中，在底部layout中找到如图所示的代码

place { control=DownloadsPage width=max height=max margin-top=0 margin-left=0 margin-right=8 margin-bottom=20 start=phonereminderbar dir=down } place { control=ScreenshotsPage width=max height=max margin-top=0 margin-left=0 margin-right=8 margin-bottom=20 start=phonereminderbar dir=down } place { control=GamesPage_List width=max height=max margin-top=0 margin-left=0 margin-right=9 margin-bottom=21 start=phonereminderbar dir=down } place { control=GamesPage_Details width=max height=max margin-top=0 margin-left=0 margin-right=9 margin-bottom=21 start=phonereminderbar dir=down } place { control=GamesPage_Grid width=max height=max margin-top=0 margin-left=0 margin-right=9 margin-bottom=20 start=phonereminderbar dir=down } place { control=WebPanel width=max height=max margin-top=0 margin-left=0 margin-right=9 margin-bottom=21 start=phonereminderbar dir=down } place { control=BroadcastPage width=max height=max margin-top=0 margin-left=0 margin-right=9 margin-bottom=21 start=phonereminderbar dir=down } place { control=BroadcastPageMin width=300 height=168 margin-top=0 margin-left=0 margin-right=30 margin-bottom=26 dir=down align=bottom-right } place { control=BroadcastPageMinHoriz width=300 height=168 margin-top=0 margin-left=0 margin-right=30 margin-bottom=40 dir=down align=bottom-right } place { control=ConsolePage width=max height=max margin-top=0 margin-left=0 margin-right=9 margin-bottom=21 start=phonereminderbar dir=down }

我们将其改为

place { control=DownloadsPage width=max height=max margin-top=0 margin-left=0 margin-right=0 margin-bottom=0 start=emailreminderbar dir=down } place { control=ScreenshotsPage width=max height=max margin-top=40 margin-left=0 margin-right=0 margin-bottom=0 start=emailreminderbar dir=down } place { control=GamesPage_List width=max height=max margin-top=40 margin-left=0 margin-right=0 margin-bottom=0 start=emailreminderbar dir=down } place { control=GamesPage_Details width=max height=max margin-top=0 margin-left=0 margin-right=0 margin-bottom=0 start=emailreminderbar dir=down } place { control=GamesPage_Grid width=max height=max margin-top=38 margin-left=0 margin-right=0 margin-bottom=0 start=emailreminderbar dir=down } place { control=WebPanel width=max height=max margin-top=0 margin-left=0 margin-right=0 margin-bottom=0 start=emailreminderbar dir=down } place { control=BroadcastPage width=max height=max margin-top=0 margin-left=0 margin-right=0 margin-bottom=0 start=emailreminderbar dir=down } place { control=BroadcastPageMin width=300 height=168 margin-top=0 margin-left=0 margin-right=30 margin-bottom=26 dir=down align=bottom-right } place { control=BroadcastPageMinHoriz width=300 height=168 margin-top=0 margin-left=0 margin-right=30 margin-bottom=40 dir=down align=bottom-right } place { control=ConsolePage width=max height=max margin-top=40 margin-left=0 margin-right=0 margin-bottom=0 start=emailreminderbar dir=down}

效果如图

看上去似乎大功告成了？

然而并没有，打开游戏库，我们会看到如图所示的情景

可以看到，搜索栏以及右侧的Game键与页面布局产生了冲突

首先我们把搜索栏移过来

在uinavigatorpanel.layout中修改下列代码

place { control="label_search_icon" align=left height=40 region=right width=35} place { control="library_search" start=label_search_icon height=40 dir=right region=right} place { control="library_filters" x=275 y=0 height=40 region=right}

效果如图

然后我们要把挡住的这块区域整体下移

打开steamrootdialog_musicpage_details.layout，来到底部layout条目

先修改区域变量，改为

region {name=hidden width=0 height=0} region { name="list" y=0 x=0 width=275 height=max margin-top=40 margin-bottom=0 } region { name="details" y=0 x=275 width=max height=max margin-top=40 overflow=scroll- vertical} //overflow region { name="header" region=details y=0 x=0 width=max height=300} region { name="headertext" region=header y=10 x=10 width=max height=max margin-right=20 } region { name="tags" region=header y=230 height=50 width=max} region { name="links" region=header align=bottom height=35 width=max overflow=scroll-horizontal } region { name="detailsbody" region=details y=300 height=max width=max overflow=allow-vertical}

然后将后续place项全部替换

place { control=emptylisttext region=list width=max height=max margin=10} place { control=GamesList region=list width=max height=max margin=0 } place { control=welcomedetails,rentaldetails,turnnotifications,friendsdetails, achievementsdetails,dlcdetails,screenshotsdetails,clouddetails, communityfilesdetails,newsdetails,nonsteamdetails region=detailsbody dir=down width=max } place { control=DetailsBorder y=0 x=0 width=max height=max } place { control=headerimagea region=header width=max height=max align=top-center margin-top=-75 } place { control=headerimageb region=header width=max height=max align=top-center margin-top=-75 } place { control=gametitleheader region=headertext} place { control=gamesubheader start=gametitleheader region=headertext dir=down} place { control=*taglink,sendguestpasslink,storelink,gamehublink,forumlink, ogglink,achievementslink,newslink,dlclink,cdkeylink,manuallink, guidelink,guideslink,supportlink,recommendlink region=links dir=right } place{ control="linkslabel,tagslabel,edittagslink" region=hidden}

效果如图

接着我们来更改下载提示框

此处VGUI提供的相关文件为uistatuspanel.Layout,然而这个文件更改的是下载栏的细条目（如下载

条颜色），真正与位置相关的文件为steamrootdialog

在底部进行更改

place { control="UIStatusPanel" x=0 region=left width=max height=42 align=bottom margin-bottom=50 }

效果如图

接着我们增加这个下载条的长度

在uistatuspanel.layout底部，place的StatusProgressbar条目中，将width（宽度）属性改为MAX，效果如图

到此，主窗口的示例就结束了

头像框

最后（真的是最后），我们来把方的头像变成圆的

关于圆头像，一开始我在代码里翻来翻去都找不到，直到我看到。。。

Threshold的做法是把原来的方框贴图换成圆的，然后用黑色（也正是背景色）把多余的地方覆盖

只要覆盖相应文件即可达到替换的效果

效果如图

最终成果

示例部分最终成果，如图

其实仍有许多可以进行后续修改的地方，例如

修改配色方案以及字体

将按钮换成2D样式

（原配）

（Threshold）

将多处渐变（gradient）项改为填充（fill）项

（灰度渐变）

（纯色填充）

其实这里并没有改完，如果你使用了Threshold的话，你会发现下载页面、好友页面等并未进行修

改，不过能一直看到这里的人，我相信肯定已经有能力进行独自修改了

2018.7.25更新

这次更新增加了一个账号区域（accountbutton），及其下拉菜单（accountmenu），加了一个接收

官方信息的按钮（announcement），然后好友页面大改

同样是以之前的 Threshold 来示例

要将错乱的皮肤改回之前的样子，先到官方的 resource\layout 下，将 accountbutton.layout 、

accountmenu.layout 、 announcement_text.layout 、 announcement_web.layout 四个文件复

制到你的皮肤对应目录下

先把 accountbutton 搬回之前的区域，打开 steamrootdialog.layout ，来到底部

layout { region {name=hidden width=0 height=0} region {name=left width=230 y=32} region {name=bottom region=left width=max height=50 align=bottom} place { control="AccountButton" region=left y=65 margin-left=-30 width=50 height=40 } place { control="AnnouncementButton" region=hidden } ...

官方公告的按钮我觉得意义不大，所以我丢到 hidden 里隐藏了

效果如图

中间的白块是之前的好友列表区域，现在把它与头像整合，只要点击头像即可弹出好友列表

打开 steamrootdialog.layout

place { control="view_friends" height=32 width=32 y=18 margin-left=10 region=account}

然后来更改账号区域，打开 accountbutton.layout ，来到底部

layout { place { control="account_drop_down" align=right end-right="account_balance" margin-top=-4 height=24 width=8 } place { control="account_avatar" align=right end-right="account_persona" height=32 width=32 } place { control="account_persona" align=right end-left="account_drop_down" y=0 } place { control="account_balance" align=right end-left="account_drop_down" y=14 margin-left=-47} }

这里我把 account_menu_button ，也就是那个下拉菜单去掉了，因为下拉菜单中的功能，基本都

已经收录在了左上角的大按键上

然后再把 AccountButtonStyle 的 bgcolor 改成 Neutral

效果如图

更新后官方使用头像右边的一个颜色条来显示用户状态，不过我还是喜欢原来的圆的

同样在 accountbutton.layout 中

styles { AccountPersonaStyleOffline { font-size=17 padding-right=6 padding-left=6 textcolor=Friends.OfflineColor } AccountPersonaStyleOnline { font-size=17 padding-right=6 padding-left=6 textcolor=Friends.OnlineColor } AccountPersonaStyleInGame { padding-right=6 padding-left=12 textcolor=Friends.InGameColor } AccountDropDownStyleOffline { render { 0="image(x0-37,y0,x1,y1,graphics/avatarBorderOffline)" } } AccountDropDownStyleOnline { render { 0="image(x0-37,y0,x1,y1,graphics/avatarBorderOnline)" } } AccountDropDownStyleInGame { render { 0="image(x0-37,y0,x1,y1,graphics/avatarBorderInGame)" } } ...

这里把用户名和余额的字体大小也改了

效果如图