大家好，我是艾莎。
距离上一个steam美化教程已经过去了两年，很高兴我的指南对大家或多或少有些帮助，趁着五一佳节，我抽空把手头的资料整理了一下，辅以我对展柜制作的一些心得，又写了一篇指南，主要向大家介绍静态长展柜的设计和制作。
对美化展柜有些了解的小伙伴肯定会嗤之以鼻——做展柜，说白了不就是Photoshop钢笔抠图和利用代码上传吗？需要看指南吗？我要说的是——是，钢笔抠图很重要，但也不止。今天要谈到的，就是关于展柜的设计，从颜色、画风及主题全方面地了解美化展柜。并不是说，我把喜欢的人物素材和背景结合起来，就做出了好看的长展柜了。
另外我会简单介绍一下关于制作动态长展柜的内容，很多人向我咨询，正好趁着这个机会把我制作的一些心得、网上一些有用的视频解说整理一下，希望能够帮到大家。

Steam社区被锁，指南啊，看一篇就少一篇，且看且珍惜啊。
大家是不是应该投币收藏关注……嗯不对，收藏就行了……

Steam等级需求10级或以上这点就不说了（还是说了），在社区，steam10级才能够解锁一个展柜，方便我们进行制作静态长展柜。关于升级，你可以移步这里了解steam卡牌、等级等相关内容，也可以直接去TB搜索“steam等级”，简单粗暴地购买成套的卡片合卡升级。

素材和背景都很重要，但我们默认以找素材作为第一目标。毕竟我们要做自己喜欢且好看的展柜，当然展柜里面素材是最重要的。素材的格式最好是1:2比例，500*1000分辨率或者以上为最佳。小于这个分辨率可能制作展柜会导致模糊，不同于这个比例的素材可能无法最大化利用展柜空间。

接下来要说背景，其实背景的重要性不亚于素材。因为素材我们可以自由挑选，但是背景是由游戏开发商所设计，背景的左、右部分是无法进行改变的，所以挑选一定要慎重。另外好看的背景也很贵，如何选择一张好看又实惠的背景，就要展柜制作者自己考虑了。有的时候也有素材迁就背景的情况发生，所以究竟是先选素材，还是先选背景呢，就是仁者见仁智者见智的事情了。

首先用浏览器来到steam社区市场，搜索到你要做的背景，在背景详情页有一个“查看完整大小”，点击一下会把背景最大化。复制页面的地址。
然后来到steam.design[steam.design]，一个好像个人主页的展柜切割工具网站，将刚才的图片地址复制到头像旁边的URL空白里，点一下后面的“Change BG”，这个网站会把你的背景自动切割成长展柜。然后你可以点击“Download ZIP”，下载切割好的图片，就获得了纯粹的背景切割展柜。之后就可以在下载好的图片上添加素材。

我有另一种方法，就是点击“Change BG”之后，按F11开启浏览器全屏，然后把steam.design页面调整成能当前页面能直接看到整个长展柜长度的程度，然后按一下键盘上的PrintScreen，直接截取当前画面，然后打开Photoshop，文件——新建，Photoshop会自动识别剪贴板的大小，新建文件后Ctrl+V复制，将你刚才截图的画面粘贴上去，这样做的好处是可以看到展柜之外的背景，方便你根据背景对人物素材进行整体的画面、色彩调整。缺点是需要自己掌握展柜图片的大小。后文会提到，如果你的文件尺寸与自动切割的图片大小有差异，会导致上传之后错位等问题。
OK，然后你就可以把下载好的图片拖到拖到Photoshop里，将人物素材放在图片上编辑。
具体怎么编辑呢？Photoshop钢笔工具了解一下。
钢笔工具相关指南[www.bilibili.com]

好了，我们准备好背景与素材了。开始抠图……恩，稍等一下，背景与素材的色调搭配吗？
很多时候我们会把喜欢的、贵的背景和喜欢的素材放在一起，但是却不去考虑他们的色调是否一致，很好很贵的背景做出了很低端的感觉，因为色彩与色彩之间的变化太过巨大，违和感很严重，这是我见到的最常见的问题之一。
解决问题的方法也很简单，当你的背景和人物素材色调不一致的时候，人物素材妥协——换一个素材，或是用钢笔工具把人物素材的脸部扣下来，然后把人物整体变色。

我们前文也提到了背景的左右部分是无法改变的，但是背景中间可以。
有的背景中间会有其他内容，我们可以用Photoshop抹掉；或者……背景中间没有内容。我们可以用Photoshop填充一部分。
（快捷键M）选区工具视频教程[www.bilibili.com]
（快捷键S）仿制图章工具视频教程[www.bilibili.com]

前面也说了直接利用色相更改人物素材色彩的方法，但有的时候并不需要那么极端。比如说我想做一个红色的展柜，找到了红色的背景和红色的人物，但是大家也知道红也有很多种，比如石榴红、比如橘红、比如艳红色等等……我们该怎么调整呢？使用颜色工具微调人物素材色彩。进一步缩小背景与人物素材之间的割裂感。

有的时候我们仅仅关注色彩与明暗，却忽略了画风。
有的背景/人物素材画风是写实的；有的背景/素材画风是手绘的……如果你能够在挑选的时候就两者一致的画风，那么做出来的展柜更加“顺眼”。因为协调性给人带来的是更强的认同感。当一个展柜好像和背景浑然一体，那么一定是画风与颜色同样的背景/人物素材。

有的时候我们会遇到一些人物素材极其复杂，基本没法使用钢笔抠图，或者一抠图要抠个大半年那种的；还有的时候素材边缘属于半透明、或是其他性质导致单纯抠图无法完成的情况。但是我们又不想放弃这个素材，怎么办呢？有一种方法。
思路是把人物素材图片使用通道改变其性质，让其白色或黑色不显示，但是图片其他的细节还保留并显示，然后用钢笔简单抠出人物的轮廓放在上面，就可以避免疯狂抠图的情况。
（在想要改变的图层上——图层栏——将其变更为“正片叠底”，或其他风格）

还有一些不经常做展柜无法察觉的问题需要讲一下。
首先是人物素材尽量完整，如果有人物缺失的部分，尽量将其置于右侧。因为展柜左侧直接交接背景左边，而展柜右侧交接的是的个人信息部分，并不直接与背景连接。如果缺失一部分的人物素材与背景直接交接，切割感太强烈了。

其次是注意切割好的展柜尺寸。展柜做好之后的长度是随着背景的。一般来说比较长的背景是929像素，也有808像素或者更小像素的短背景。而宽度是固定的。展柜切割后分成两部分，大的一部分是506像素宽，小的一部分是100像素宽。举个例子，展柜做好后可能是X像素*506像素和X像素*100像素，X可能是929像素，可能是808像素。而506像素和100像素是固定不可变的。如果X、506、100这三个数值有错误，就会导致上传展柜后无法对齐等问题。

还有上传问题，上传一定要用Chrome浏览器。非Chrome任何错误都有可能出现。最常见的提示是“respons{ } ” 。

最后是上传展柜的文件大小问题，这个问题在普通静态长展柜上可能不怎么出现。上传的文件大小必须小于8MB，创意工坊展柜也相同。如果大于8MB就会出现无法上传的问题。

准备好做好的展柜——两张图片，steam等级10级以及背景。打开Chrome浏览器，登录steam，点击个人主页右侧的艺术作品，点击上传艺术作品——非游戏特定。

（这里要强调的是无论你要上传截图展柜还是艺术作品展柜，方式方法都是一样的，唯一的区别是两种展柜上传所需的代码不一样。你将展柜上传到截图作品展柜也要通过浏览器——上传艺术作品去上传，跟steam客户端和截图库没任何关系。）

来到上传艺术作品页面，输入艺术作品（展柜）名称，先后选择你做好的两张图片（需要用两次相同的流程上传两张图片），鼠标右键——检查（快捷键F12），找到“Console”，在下面是输入框输入代码，回车确认，然后勾选艺术作品是我创作的，上传。
（输入代码后回车，正确会有蓝色的数字提示，大图提示50600，小图提示10000）
两张图片上传完毕之后，来到个人资料——编辑个人资料——把个人资料背景设置成你做展柜的背景，来到“已展示的展柜”，选择艺术作品展柜或截图展柜，选择两张图片即可。

（展柜上传之后在选择页面会展示出两个黑条，看不到展柜内容，这属于正常现象。请按照你上传顺序分别选择两张图片。）
（两张做好的展柜图片，大的图片请选择左边的大选择框，右边你可以注意到有三个小选择框，请把小的图片选择到三个小选择框上面第一个选择框，其他两个框空着不选任何内容即可。）

讲解了静态长展柜，简单向大家介绍一下动态长展柜的制作方法。
有视频教程，但是我还是把我的一些想法和经验简单描述一下。希望能够帮到大家。不用觉得很困难，只要你有一定的Photoshop基础和学习精神，After Effects其实还是蛮简单的。先理解，再执行。

首先，我们要准备好静态长展柜所需要的一切。不同的地方是人物素材需要进行一定的准备。动态长展柜的人物需要提前用钢笔抠出来，然后将其胳膊、腿部、裙摆、头部等分割出来。需要注意的是胳膊、裙摆等需要利用仿制图章工具进行涂抹，使其比原本的大小更大，给予它摆动的空间。
举个简单的例子，一个人物伸出胳膊，胳膊后面是披风。那么把胳膊单独用钢笔工具抠出来，再扣披风——披风是不是少一块啊？如果只做胳膊摆动的动作，后面披风没有胳膊的部分就“露馅”了。

• 由于steam指南限制图片文件大小，所以示意图较小，可以去我的社区主页浏览大图。

在做动态长展柜之前，要先了解一下时间轴。
由于前文讲过图片尺寸不能大于8MB，所以我们的动态展柜注定不能做的太大。我选择做三秒钟，或两秒钟的动态效果，在这三秒钟内完成人物的头发、裙摆、肢体、躯体摆动。
那么我要向大家阐述的是，三秒钟里面的开头和结尾，是没有动画的。因为者三秒钟是要连续无限循环播放的，如果头尾不接就会不协调，所以做出来的动画应该是“不动——动——不动”的，这样第一个三秒钟的结尾不动，会和第二个三秒钟的开头不动相重叠。就变成了无限循环的动态。

其实，做动态长展柜最重要的就是布偶工具了。布偶工具利用钉点、操控点来进行人物的移动，很好理解。接下来的视频解说会详细教给你。
至于波纹工具，衣服的摆动就是通过波纹工具制作出来的。
身体、衣服飘动动画视频教程[www.bilibili.com]
眨眼动画视频教程[www.bilibili.com]

其实也有直接从AE直接导出GIF的方法，但是在这里给大家带来的是比较简单的、无插件的导出方法。图文教程[www.ui.cn]。

谢谢大家阅读全文。
朗读并背诵那就更好了。
我为什么要写这篇指南呢？
因为我看到很多人把做展柜、设计展柜想的太简单，或者说根本就没有设计——准备了昂贵的的流星雨、大白腿背景！还有P站顶级画师最新的作品！嘿嘿把图扣一下放到背景上去，展柜就做好啦！

首先不是什么背景和人物素材都适合做展柜，其次色彩、明暗、画风搭配还是要有的。
最后不要再伤害我的眼睛了！

还有，做什么展柜，其实都只是徒劳，没人看你的主页的。

——————————————————广告———————————————————
https://sp.zhabite.com/sharedfiles/filedetails/?id=1264516618