用简单的方法做整套UI（教程第一/二/三弹合集）

本教程将指导你如何仅使用美图秀秀制作一套适合现代乙女游戏风格的UI，包括语言栏、姓名栏、CG按钮、存档按钮以及其他文字按钮的设计与制作方法。此外，还提供了关于BGM、CG、存档、剧情回放的图片处理技巧，并在第三部分展示了如何利用美图秀秀和PS混搭制作音量条。教程包含实例图片和详细的步骤说明，帮助你快速掌握UI制作技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://bbs.66rpg.com/thread-329530-1-1.html

http://v.tieba.baidu.com/p/2985559487

首先要准备两个工具，“美图秀秀”（咦~我说的是“美图”），然后是“PS”（玉酱用的PS5）
其实不要觉得工具多啊，玉酱我有5个图片编辑工具哦，（泥垢···）
如果没有PS的朋友，也可以直接用美图秀秀解决。
新手完全可以自己制作出来的一套UI。
以前作品链接：美图秀秀第一弹
（事实证明      美图秀秀第二弹
如果用心也      PS+美图秀秀混合第三弹
可以自己做      PS+美图秀秀混合第四弹（附带游戏效果！）
好的）             纯PS制作-古风、仙侠（2013-10-11发布）

教程续作：       用最简单的方法做套UI（教程第二弹）链接地址（此楼341层）
                       第一弹：音量条的补充（此楼347楼）

那么今天我先写一个纯秀秀（无PS）的制作教程。
教程1，只用美图秀秀做出来的（范例为粉红可爱风-适合现代乙女游戏）
抱歉，因为不知道要不要做第二弹，所以这样设置了下“回复可见”，如果效果好，我会去继续做第二弹，第三弹等等。（玉酱现在都还在不断努力学习，所以请见谅）
而且不设置的话图片很多，会卡的。【泥垢，借口···

语言栏：
1,·现在橙光中新建一个你要做的游戏，然后打开UI文件夹，这样方便你看到要做多大才合适。玉酱我是万年800-600的比例，所以就以这个比例来做范文。图1

2·打开秀秀。新建透明图层（若不喜欢半透明，可以设置自己喜欢的背景！）。（这里玉酱建议稍微比原有UI框大10-30的样子）。图2

3·在饰品-炫彩水印处找到你喜欢的颜色，美图原设是3个颜色-粉，黄，蓝。（玉酱用粉色）图3

4·在边框-简单边框选择你喜欢的框子。（玉酱找了个粉红色来搭配底色）图4

5·可以确定后返回饰品处，添加一些你喜爱的装饰。也可以就简单素雅的。图5

6·微调之后，保存-格式要是PNG啊！

姓名栏：
和语言栏同，忽略···（玉酱建议姓名栏不宜太花哨，简单为好）图6

CG按钮·存档按钮：
也和语言栏做法相同，不详细说明了。（注：这两个按钮不能为透明边框，不然网页版只能点击那条线，点空白处没用！）

其余文字按钮们：
1·打开button文件夹，找到你想替换的按钮，然后找到尺寸大小，同语言栏1·2相同。图7

2·文字形式的可以有背景、边框，也可以不用背景、边框。然后找到“文字”-“静态文字输入”写上你想写的字（字体，大小，高级可根据自己喜欢设定）。图8

3·保存，同样PNG格式啊···啊···啊····
4·点中之后的按钮做法，可以吧阴影色和底色呼唤（这是最简单的），也可以自己重新设置颜色，或者添加阴影或者横线。图9

5·保存，PNG格式。然后大功告成！

范例图片在二楼，大家可以看了喜不喜欢再回复。CG，BGM，存档，剧情回放，设置等，在第二弹出。

此为范例试验品，喜欢的可以拿去随便修改。
谢谢喜欢。╮(╯▽╰)╭玉酱爱你！

你看看，这样做了行不行。新建一个语言栏那么大小的框。透明或者不透明。然后在左键点边框。

·1.png (149.39 KB, 下载次数: 88)

·1.png

啊那个是我疏忽了一点，忘了音量条比较特殊。
选择框和语言栏做法相同，所以就不单独列出，下面要讲的是音量条的做法。
首先声明一点，这个做法玉酱觉得很捉急啊（其他办法有待研究）····

1·打开美图秀秀，新建-大小自己定。玉酱就用。374-20的标准大小示范一下。点击图示“涂鸦笔”图1

2·选择你喜欢的类型进行填充，可以单色，可以花色。玉酱用花色，处理好后“确定”。图2

3·回到图一处看，左上角有个“裁剪”，点击进入。可拖动进度条大小，以及是否圆角，个人觉得圆角是必须的，不然方方正正丑死了啊喂···图3

4·选好之后点保存，存为PNG！！不然你的圆角就变成白色了哦。

备注，音乐条为两个，第二个可以用其他效果处理一下就行了，比如柔光，lomo，如果是单色的话也可以用另一种颜色取代。

好了。第三弹的补充到这里。

效果图在二楼。一共四个，两个花色，两个单色。

（用的复古效果）

噢·不···其实我居然花了将近一天的时间做这3个教程，我的彩虹都还没更新，对不起要开学的琳子小姐还有空城妹妹了。。。 ← 啊喂，这个不是音量条啊。。

搬运第二章过来。
接下来继续谈论关于BGM，CG，存档，剧情回放那几个图片的处理。

1·找到几张尺寸比例正确的图（就是说你做多大的分辨率就用多大的图片，不正确的请先修改了再加工），这里玉酱建议最好是用画风差不多的，免得有违和感。那玉酱在这里，还是用的800-600的来范例。【我是800-600狂啊···
注：如果要纯原创的话，请期待玉酱之后推出的PS混搭版。谢谢！
2·把图片拖到“美图秀秀”中。如果要“边框”的可以先选定边框，然后用“饰品”找到开始我们看到那块“粉红色”（或者你喜欢的其他），点击，可以拉伸，调到自己喜欢的大小即可。玉酱建议别太大（一会要放字体），也别太小（橙光系统设置时不好设置）。
3·点击“文字”-“静态文字”-选择自己喜欢的字体和大小以及颜色。玉酱这里建议一下，字体不宜过大过小，都不好看，800-600的话大概在60-80大小就差不多了，大于80就太大。小于60了没存在感···
细节：
（1）音乐鉴赏处建议留点位置，如果要在橙光里放专辑图片的话那个位置必须留下。（范例在“音”字下面那里空白处。）图1

（2）图片鉴赏的选框稍微弄大点，因为图片比较暂地方。图2

（3）剧情回放的选框依然要大点，毕竟文字多了如果选框小的话会很丑，大点没错的。图3

（4）存档处也尽力弄大一点。都是为了橙光系统设置那里好设置。图4

（5）最后就是“设置”画面了，首先设置界面不适合用框框，所以我们先要在“美化”里面选择一项属性（如柔光，lomo等效果来处理一下背景）这里玉酱用的“致青春”效果。然后就是这个字也比较多，但是一定要统一一下字体和大小。比如标题都是80的话，小字就是40-60.玉酱个人偏爱60.好记。然后就是排版，根据自己喜欢，间距最好要统一，这样才美观。我截图都有字数大小，可供参考。图5