【UI教程】如何将已有的效果图应用为实际的UI界面

在经过了一些折腾和比较折磨的尝试后，我总算是摸清楚了嗒啦啦怎么把UI效果图转换为实际游戏中的UI组件，今天就给大家带来这部分的经验分享。

tips：1.本篇教程需要各位掌握最基本的ps使用，具体的操作部分我会大致讲解，但仍需各位自行学习ps的基本操作，部分可以由ai代劳的环节我会注明。
2.本篇教程需要在以我前两篇教程作为前置环节，请在阅读这两篇前置教程后再进行本篇教程内容的学习
【UI教程】更省积分，也更加精准还原布局的UI制作方案
【UI教程】如何使用image2制作符合自己项目风格且高质量的UI界面

在按照前两篇的教程内容，完成了游戏中的界面效果图和功能布局后，我们接下来就要面临一个稍显头疼的问题，那就是怎么将效果图转换为我们游戏中实际的UI呢？

实际上第一步需要的并不是处理图片，而是确认我们的UI适配方案。目前我摸索出来的，嗒啦啦支持两类布局，一种是自适应的流式布局，一种是使用设计像素逻辑的绝对定位布局；
流式布局支持布局随设备分辨率自动调整匹配，UI组件使用的是界面的相对比例位置，UI组件内部也是使用的相对最大组件的内部比例定位；
绝对定位布局使用的是以预设设计像素的绝对定位布局，设备分辨率改变时UI组件的相对位置不会变化，UI组件使用的是以界面左上角为0点的设计像素坐标，需要提前指定项目的设计分辨率和画幅比例，UI组件内部视情况也可能使用相对比例定位（如卡牌一类组件）；

因为绝对定位布局也可以顺便讲讲相对定位布局的使用，所以我就以绝对定位布局作为本次教程的主要类型。

绝对定位布局有几个需要额外注意的点：1.设计分辨率应当如何制定？2.设备画幅与预设画幅不一致时如何适配？

上述两个问题这里直接给出我推荐的方案，各位有其他需求的也可以自行设置。
设计分辨率我的建议是1.5k到2k，这也是现在主流机型的分辨率设置，画幅推荐20:9，也是现在多数主流机型的设备画幅；

设备画幅和预设画幅不一致时，我推荐使用《碧蓝航线》的上下色块填充方案去进行适配，如果只考虑移动端，这个方案已经足够了，只需要另外制作一张图片素材垂直镜像用于填充上下的黑色部分就行。

那么在经过这些前置步骤的确认以及前两篇教程的学习后，我们此时应当已经有一套界面效果图以及和界面效果图基本匹配的功能布局界面，就可以正式开始图像素材的处理部分了。

首先，我推荐将画布尺寸设置为设计分辨率的两倍，或者在导出时将导出倍率设置为2。因为设计分辨率并非实际的最终分辨率，当玩家设备大于我们设计分辨率时，游戏画面会按玩家设备进行整体缩放（流式布局下会进行自适应调整）。

然后就是界面效果图里UI组件的裁剪和分拆了。

大致流程是：从效果图中将对应UI组件进行裁剪——清除UI组件中的文字和边缘溢色——对需要二次分拆的UI组件进行类似操作，清除作为背景的UI组件上的冗余内容。

首先是裁剪抠图和清除文字的环节，这部分可以由ai代劳，尤其清除文字的工作，香蕉和image2都能做得不错，我这里额外说明下人工处理的办法：
以这个效果图中的详情弹窗作为示例

在ps中，使用选区工具框选对应区域，按ctrl+j快捷键，在基础图层上以选区范围复制并新建图层

选区应当略微超出组件边缘，避免图像轮廓缺失

按下ctrl+j后，会以原图的选区范围复制出一个新图层，我们以这个新图层继续进行修改

选中新图层，点击底部的添加图层蒙版，为对应的图层添加图层蒙版。在图层蒙版中，我们可以用黑白颜色去控制对应图层的显示隐藏，白色显示黑色隐藏，灰色则显示为半透明。使用这种方案进行修改，不会破坏原图层的实际图像，具备相当不错的可逆性，不用担心中途存在错误操作导致重来。

具体的蒙版制作上，这种比较规整的形状我推荐使用选区工具配合油漆桶填充来制作出干净利落的边界轮廓；如果是比较复杂的，那我更推荐使用笔刷工具手动绘制调整；如果是半透明界面，我推荐使用背景橡皮擦+蒙版配合手动绘制综合进行，半透明界面的处理后面单开个帖子另行讲解。
在激活笔刷、油漆桶等绘制填色工具时，按x可以切换前景色背景色，建议将前景色背景色一个设置为白色，一个设置为黑色，这样在绘制蒙版时按x就可以快速切换显示隐藏；需要注意的是，在普通图层和图层蒙版中，前景色背景色是两套不同的配置，修改颜色前要将当前显示图层切换为对应样式。

在原图中对弹窗边缘轮廓进行修整后，拖拽图层到底部栏的新建图层按钮复制一层作为备份。多备份是个好习惯，可以避免中途出现错误时整体返工。

右键点击复制出图层的图层蒙版区域，选择应用图层蒙版。

这样我们就可以得到图层蒙版塌陷后，边缘已经清理干净溢色的弹窗组件。我们按住ctrl点击图层，使用ctrl+c复制当前图层，点击ps的顶部菜单栏文件——新建，此时新建菜单中会读取我们剪贴板的图片尺寸自动识别分辨率，直接新建即可。

如果剪贴板没有正确识别到组件的分辨率尺寸，也可以在图片属性小窗查看对应的分辨率，w为宽，h为高。

新建画布后，ctrl+v粘贴复制的图层，清除之前的白色背景。

检查弹窗组件四周是否存在空白区域和缺少区域，如有，则相应调整画布大小，可以使用裁剪工具快捷调整。

检查无误后，再次复制一层原图层（此处必须复制），现在我们需要清理出弹窗背景作为整个弹窗UI的基础组件。

这部分可以使用ai代劳，但效果可能不彻底；同时使用ai进行清理后，图片分辨率可能产生出入。

以上是使用ai需要注意的地方，下面我们讲解传统的人工处理办法。

长按此处工具图标，在弹出的工具列表中选择修补工具。

使用修补工具对图片存在文字、其他组件的地方进行选取。

然后拖拽选区区域到纯背景区域，即可完成局部清理。

按此方法完成整体界面的清理，即可获得干净的背景图。使用ctrl+d可以快捷消除已有选区。
需要注意，如果框选区域没有完整包括相关组件内容，可能导致修补的区域出现溢色和混色。

背景清理完成后，我们重复这个从完整效果图中获得干净背景的方法，就可以获得其他的UI组件图片素材。

然后我们隐藏已清理好的图层，显示原图层，使用ps自带的文字工具确认我们界面中文字信息的位置，面板尺寸和字号。

此时，我们就基本完成了详情弹窗的图片素材制作，因为弹窗是独立的相对定位组件，所以实际的素材制作到这里就只需要再重复之前的复制新建，将每个素材导出保存就结束了，这里额外说明需要整体适配的组件后续操作。
在原画布点击最上方可见图层，按住ctrl+shift+alt+E，新建合并可见图层，然后将这个可见图层拖入到完成了功能布局界面的游戏截图中进行匹配；也可以不合并，将组件图层放入一个文件夹，直接将整个文件夹拖入项目截图中。
游戏截图可以直接使用嗒啦啦的截图功能进行截图，然后复制该图片到ps中新建画布，粘贴后按以下步骤调整即可获得相应完美匹配尺寸的布局背景图：顶部菜单栏，图像，图像大小，将画布宽度修改为与设计像素宽度一致——图像，画布大小，将画布高度修改为与设计像素高度一致——如果有需要，此时可以在回到图像大小将分辨率调整为当前两倍。

此外，也可以直接在上述的项目截图基础上进行UI组件的制作和布局调整，大致方法是基本相同的。

导出相应图片素材，将原psd文档复制一个，图像比例调整为与设计分辨率一致（图像为2x倍率制作，此时就缩小为原来一半）。

命名可以直接上传后让嗒啦啦根据图像类型和作用拟定命名规范进行命名，她可以直接改名称，导出时写好每个组件的作用就行，例如血条填充层，血条外框等。

这时候我们前置的准备工作就全部完成，可以进入到tapmaker中对UI进行美术资源替换了。
之所以选择这个详情弹窗作为讲解案例，也是因为它可以同时适配两种不同布局模式，我直接给各位展示我上传图片后使用的替换指令：

首先是明确我们使用的UI素材用于的是哪个部分的替换，“对战斗界面的角色详情弹窗进行美术资源替换”；然后说明我们的图片导出时的放大倍率，之后是明确每个部分使用哪个素材。
然后是坐标和尺寸，因为我进行素材替换前就已经确定好了详情弹窗的界面尺寸，所以这里不需要输入详情弹窗的面板尺寸。
坐标则可以从我们保存的psd文档，将图片比例缩放为与界面比例一致后，选择对应的图层属性进行查看。弹窗的坐标使用的是内部相对坐标，所以坐标0点是弹窗的左上角，如果是整体界面的坐标，则以界面左上角为0点。

输入这段指令等待指令完成后，可能还需要根据实际效果进行一定的调整修改，以下是我实际调整修改完成之后的效果：

大体的UI替换过程和思路就是如此，部分思路来自店长在官方交流群里的分享。
这里帮忙推荐下店长的新游戏，美术十分精致，有这方面学习兴趣的欢迎去游玩体验。

哦对，字体部分可以参考店长他们工作室的美术N3佬写的这篇帖子：如何提升你游戏中的UI美术水平
字体选择上记得查询相关授权协议，这方面坑挺多的，有些不支持嵌入式使用，有些你用他们字体就要把游戏本身开源，非常容易触发侵权风险。有这方面需求的建议查询清楚再去决定是否使用相应字体。

下篇教程应该就是一些使用嗒啦啦内置的程序动画来制作UI动效的内容了，其实我目前展示的战斗界面界面中动效已经制作得差不多了。

如果有不懂的或不理解的部分，欢迎提问沟通。也欢迎有更好思路和方法的，也欢迎在评论区交流学习。

（最后，求积分，孩子参加这次制造新星比赛后发现超级缺积分，哪怕目前危城没做了积分也不够用，比赛期间能不能给个申请大额活动积分的渠道啊，现在嗒啦啦特别吃分的情况下比赛还有时间限制，申请紧急积分一次还是只有一两万，改点bug基本就用完了，然后紧急积分的申请还有3天冷却期，卡得特别难受。）