【攻略】如何自制steam皮肤 皮肤制作其实很简单
怎么利用这个自制皮肤的网页来进行配色呢？很简单，首先照着它的网页制作一个皮肤出来，下载后它会在你的skins文件夹里生成一个皮肤文件
打开它的steam.style文件会发现像这样
跟本来的文件内容一样但是格式变了（看着有点不爽），然后我们把它拉到247行，就会发现它并没有像我修改的方案一样修改原始变量值，而是直接定义了一堆新的颜色然后把文件里相应的地方替换成它的颜色
我们要做的就是找出其中那些我们需要的颜色并运用到我们的文件里，我找到的几个关键色
当然你也可以直接对它的文件进行后续修改，可以省去一些事但是我不建议这样，如我所说它对文件的修改很大，如果你不知道它对哪里进行过修改的话这在后续修改中会是一件非常麻烦的事，我一开始就是尝试直接修改这个文件省去配色的麻烦但是我失败了
打开它的steam.style文件会发现像这样
跟本来的文件内容一样但是格式变了（看着有点不爽），然后我们把它拉到247行，就会发现它并没有像我修改的方案一样修改原始变量值，而是直接定义了一堆新的颜色然后把文件里相应的地方替换成它的颜色
我们要做的就是找出其中那些我们需要的颜色并运用到我们的文件里，我找到的几个关键色
当然你也可以直接对它的文件进行后续修改，可以省去一些事但是我不建议这样，如我所说它对文件的修改很大，如果你不知道它对哪里进行过修改的话这在后续修改中会是一件非常麻烦的事，我一开始就是尝试直接修改这个文件省去配色的麻烦但是我失败了
在此之前我要说一个的东西
在steam.style的最后几行出现的颜色
表示好友状态的颜色，我们熟知的 蓝——在线 绿——游戏中 灰——离线 在这里是可以修改的，但是让我很在意的是最底下的Friends.GoldenColor，给大家看看它的颜色
不知道大家还有没有印象，两个月前的两篇帖子关于steam社区金色名字和头像边框的
那篇教程当时我没有在意于是没去看，等我想到去看看的时候貌似已被原作者删除了，我不知道这件事跟皮肤制作有什么关联，不过我想这有可能就是为什么G胖不开启steam皮肤制作的创意工坊的缘由吧
在steam.style的最后几行出现的颜色
表示好友状态的颜色，我们熟知的 蓝——在线 绿——游戏中 灰——离线 在这里是可以修改的，但是让我很在意的是最底下的Friends.GoldenColor，给大家看看它的颜色
不知道大家还有没有印象，两个月前的两篇帖子关于steam社区金色名字和头像边框的
那篇教程当时我没有在意于是没去看，等我想到去看看的时候貌似已被原作者删除了，我不知道这件事跟皮肤制作有什么关联，不过我想这有可能就是为什么G胖不开启steam皮肤制作的创意工坊的缘由吧
首先是确定添加的位置
这一点楼主需要说明的是这些位置其实并不好找，即使你知道它在哪个文件里修改，如果你要添加图片的位置本身没有图片，你将要面对的是自己添加一行命令引用该图片以确定你所猜测的位置是否正确，所以这一点是很麻烦的。那么经验告诉我们这个时候借鉴一下别人的皮肤就会是一个不错的方法。首先介绍的是如何通过别人所加的图片来确定位置，我们以wp7为例
这一点楼主需要说明的是这些位置其实并不好找，即使你知道它在哪个文件里修改，如果你要添加图片的位置本身没有图片，你将要面对的是自己添加一行命令引用该图片以确定你所猜测的位置是否正确，所以这一点是很麻烦的。那么经验告诉我们这个时候借鉴一下别人的皮肤就会是一个不错的方法。首先介绍的是如何通过别人所加的图片来确定位置，我们以wp7为例
看见右上角那只可爱的eagle了吧。
首先说明的一点是，皮肤里用得到的贴图文件几乎都在graphics文件夹里，所以找寻我们的目标时就在这里找就好了，打开它，里面列满了.tga格式的图片，我们以修改时间顺序来排序就能得到最近被修改过的文件。
这时paint的第二个用场就体现出来了，它打开.tga文件绝对比ps要方便。当然这里有我前面提到好几次的思想：注意文件名。大部分的贴图我们都是不会改动或者不需要改动的。这上面的几个里显然没有老鹰，然后楼主在上面两个文件夹里找了找，在overlay里找到了名字为12.tga的神盾局老鹰
接着我们只需要搜索老鹰所在的路径graphics/overlay/12就可以找到引用了它的地方进行修改。
不过对于wp7来说比较特殊，因为作者把他做的一些细小改动直接用一个额外的mod.style引了出来如下
这个语句的意思我们等一下再讲，现在我们去原文件中去看一下这个CSteamRootDialog
我们所有的添加自己的新图片或者替换已有的图片都可以这么做：
自己找一张图，对于这里的clienttexture2，因为是各窗口顶部的窄条，我们最好找一张细长的图片（等一下会说原因），比如
把它转换为.tga格式（我用的是格式工厂）然后更名为clienttexture2.tga，所有引用了clienttexture2的地方就被这张图片替换掉了如下图的结果
自己找一张图，对于这里的clienttexture2，因为是各窗口顶部的窄条，我们最好找一张细长的图片（等一下会说原因），比如
把它转换为.tga格式（我用的是格式工厂）然后更名为clienttexture2.tga，所有引用了clienttexture2的地方就被这张图片替换掉了如下图的结果
114楼忘记打码了重发一遍
它在steamrootdialog.layout里，我们注意到这里的
2="image( x0, y0, x1, y0+175, graphics/clienttexture2)"
clienttexture2这个贴图应该具有重要地位，事实上我看到了很多别人制作的皮肤就是用自己的图片改名以后替换了这个clienttexture2的内容，搜索它的引用位置就可以找到它用的一些地方比如
还有比如
要替换他们我们这么做
它在steamrootdialog.layout里，我们注意到这里的
2="image( x0, y0, x1, y0+175, graphics/clienttexture2)"
clienttexture2这个贴图应该具有重要地位，事实上我看到了很多别人制作的皮肤就是用自己的图片改名以后替换了这个clienttexture2的内容，搜索它的引用位置就可以找到它用的一些地方比如
还有比如
要替换他们我们这么做
接115楼
这样做不好的地方在于引用了clienttexture2的地方贴图都会是一样的，所以我们这么做：
把选好的.tga图片（比如我这里的deepice.tga）直接复制到graphics里面，然后把你想引用它的地方的graphics/clienttexture2换成graphics/deepice就可以了如下图
然后就会有如下效果
这样做不好的地方在于引用了clienttexture2的地方贴图都会是一样的，所以我们这么做：
把选好的.tga图片（比如我这里的deepice.tga）直接复制到graphics里面，然后把你想引用它的地方的graphics/clienttexture2换成graphics/deepice就可以了如下图
然后就会有如下效果
一下是一些平常需要加图片的位置的列举，其他你想加图片的地方自己慢慢找吧
(1)l楼上的CSteamRootDialog，关于clienttexture2不再费讲
(2)CFriendsDialog SectionedListPanelInterior（这里我好像之前忘了用mychange注释）
(1)l楼上的CSteamRootDialog，关于clienttexture2不再费讲
(2)CFriendsDialog SectionedListPanelInterior（这里我好像之前忘了用mychange注释）
接下来我们讲一讲render和render_bg里面的三种引用形式
0="gradient( x0, y0, x1, y0+175, ClientBGTop, DialogBG )"
1="image( x0, y0, x1, y0+175, graphics/top)"
2="fill( x1-20, y0+175, x1, y1-76, DialogBG )"
在脚本程序中整个窗口是由一系列的区域与控件搭建起来的，所谓控件就是窗口中所存在的各类元素比如按钮，下拉框之类，这几条是对控件的内容进行编辑的
首先，=左边的数字没有实际意义，你想等于几都可以（就算这样你特么也别瞎输啊知道吗）
引号里括号外的第一个单词表示你对控件的编辑方式其中gradient表示渐变，就是颜色慢慢变淡，fill表示填充，就是用颜色把区域填满，image表示图像，就是插入一张图片
括号里前4个x,y表示控件内的相对坐标，面对屏幕，向右为x正方向，向下为y的正方向，单位长度为1像素x0表示该控件最左边，y0表示最上边，x1表示最右边，y1表示最下边
这四个坐标的使用方式经我的探索应该为前两个坐标指定控件内第一个点，后两个坐标指定控件内第二个点，第一个点为起点第二个点为终点画出矩形，该矩形即为被编辑的区域（我不知道是不是这样说错了别打我）
最后一个或两个参数对应你的编辑方式，gradient、fill就填颜色，image则填相应的图片路径，一般直接放在graphics里面路径就是graphics/文件名，图片应为tga格式
0="gradient( x0, y0, x1, y0+175, ClientBGTop, DialogBG )"
1="image( x0, y0, x1, y0+175, graphics/top)"
2="fill( x1-20, y0+175, x1, y1-76, DialogBG )"
在脚本程序中整个窗口是由一系列的区域与控件搭建起来的，所谓控件就是窗口中所存在的各类元素比如按钮，下拉框之类，这几条是对控件的内容进行编辑的
首先，=左边的数字没有实际意义，你想等于几都可以（就算这样你特么也别瞎输啊
知道吗）引号里括号外的第一个单词表示你对控件的编辑方式其中gradient表示渐变，就是颜色慢慢变淡，fill表示填充，就是用颜色把区域填满，image表示图像，就是插入一张图片
括号里前4个x,y表示控件内的相对坐标，面对屏幕，向右为x正方向，向下为y的正方向，单位长度为1像素x0表示该控件最左边，y0表示最上边，x1表示最右边，y1表示最下边
这四个坐标的使用方式经我的探索应该为前两个坐标指定控件内第一个点，后两个坐标指定控件内第二个点，第一个点为起点第二个点为终点画出矩形，该矩形即为被编辑的区域（我不知道是不是这样说错了别打我
）最后一个或两个参数对应你的编辑方式，gradient、fill就填颜色，image则填相应的图片路径，一般直接放在graphics里面路径就是graphics/文件名，图片应为tga格式
那么对于如图的下端，我们要是想插入图片
那么根据上一楼的内容，我们可以做如下修改
然后我们就会看到
仔细体会这一步修改的过程，其实一点都不难理解
什么？你说底下的字看不见了？废话不然你以为我前面告诉你修改单独的字的颜色是为了什么？
那么根据上一楼的内容，我们可以做如下修改
然后我们就会看到
仔细体会这一步修改的过程，其实一点都不难理解
什么？你说底下的字看不见了？废话不然你以为我前面告诉你修改单独的字的颜色是为了什么？
那么关于插入图片的教程到此就结束了，到这一步基本上一个你自己勉强能看的皮肤就已经完成了。
对于在顶部和底部的窄条所用的图片我之所以强调要用细长条是因为一旦你的图片不够长，那么你的图片就不够填充你前面四个坐标划定的区域，那么当你左右缩放窗口右下角那个头像拖到了图片外面，就会产生非常严重的残影如图
（别问我为什么突然要请饶老师了很久以前发现的bug了懒得为了制造bug特意调一遍）
那么吧里的各种日漫痴二次元可以开始DIY自己的皮肤了
什么？你说你没有图片素材？自己学一学PS会死吗？
对于在顶部和底部的窄条所用的图片我之所以强调要用细长条是因为一旦你的图片不够长，那么你的图片就不够填充你前面四个坐标划定的区域，那么当你左右缩放窗口右下角那个头像拖到了图片外面，就会产生非常严重的残影如图
（别问我为什么突然要请饶老师了
很久以前发现的bug了懒得为了制造bug特意调一遍）那么吧里的各种日漫痴二次元可以开始DIY自己的皮肤了
什么？你说你没有图片素材？自己学一学PS会死吗
？