我从一个小白到老司机 美术编辑NGUI入门教程| 美术新手
NGUI美术入门教程
通过在wpower一年里的锻炼，从一个没有任何基础的美术人员到熟练掌握视觉设计合入引擎的UI工程技能，从与UI设计、前台程序不断磨合的沟通协作，
我把自己工作中学习的过程总结整理，希望可以提供给大家一个快速上手的经验参考。
美术编辑NGUI的优势：
1、美术完成的NGUI界面还原度高。
2、美术相对程序更了解UI界面的结构，图素的层次和功能，即使沟通起来也相对容易。
3、当UI小幅度修改时，美术可以直接修改资源，而不用等UI设计师修改之后提交给程序，程序再来负责替换这样的复杂流程。
4、可以从程序的角度协助UI设计师更科学精简的方式输出资源，梳理资源规范，在设计过程中协助UI设计师优化资源效率，从一开始就控制好UI的性能问题。
UI界面主要通过两大步骤来完成
第一步：合成atlas文件
Atlas就是一个大的图片，里面用于存放我们需要用到的各种图标图素。
图1.1
图1.2
首先我们把要拼的界面美术资源都整理好(图1.1)，直接把图片都拖到Unity的Project窗口里（ 图1.2）。使用英文命名
图1.3
全选Project窗口里所有要添加的图片资源，点击Assets---NGUI---Open Atlas Maker(图1.3)
图1.4
创建新的atlas点 Creat (图1.4)
图1.5
自定义要生成atlas的文件名名称（图1.5）
图1.6
（图1.6）红框内的信息就是生成atlas的信息：名称和像素大小
图1.7
Unity里的Project视图里会看到生成的三个Atlas文件，这时证明已经合图成功了（图1.7）。
图1.8
用看图工具打开atlas的PNG图片，我们就能看到整张atlas里的图素资源（图1.8）。
第二步：拼界面
图2.1
先新建空挂点，点击工具栏 GameObject---Create Empty 当然也可以使用快捷键Ctrl+Shift+N （图2.1）
图2.2
Hierarchy视窗里就会出现GameObject，空挂点建成。因为是空挂点，所以此时的Scene视窗里是没有东西的（图2.2）。
现在要开始添加图片了，在GameObject上挂点
图2.3
点击工具栏 NGUI---Create---Sprite (图2.3)
图2.4
一个sprite对应一个图片元素（图2.4）
图2.5
通过Inspector视窗来调整Sprite（图2.5），达到想要的最佳效果（图2.6）
图2.6
UI界面中的大底框，我们通常都会设置成九宫格形式来实现，节省很多空间。
我理解中的九宫格：是将一张图分为9个部分，在拉伸的时候针对这9个部分进行不同的拉伸处理。
通过调整Sprite Type（图2.6）里的选项来实现不同的模式
Simple模式就是正常的拉伸；
Sliced是切片模式，就是九宫格的应用；
Tiled是平铺模式，将中心区域的图片进行平铺，如果Border设置为0，就是将整个图片进行平铺；
Filled是填充模式，通过0～1的变化值来更改图片的显示，适用于制作血条或进度条等。
点击Sprite后面的Edit（图2.6） 就可以对图片进行九宫格切割
图2.7
（图2.7）通过设置Border的上下左右的数值，视窗上的图片就出现被设置的九宫格之后的划分线
图2.8
（图2.8）从左边的视窗看到GameObject下面挂了3个Sprite节点，右边的视窗对应的也有3张图片，组成了个比较简单的界面框。
选中右边的任意一张图片，左边会自动选取对应的Sprite节点，相反同道理。UI界面一般都会由很多张大大小小的sprite图片组成，所以我们可以适当的给挂好的Sprite节点重新命名（右键鼠标Rename），这样子就能更好的区分图片对应的节点（图2.9）， 即使不同的人在对同个文件进行编辑的时候，也能让对方清楚区分节点对应的图片。
图2.9
添加文字 Label, 点击工具栏 NGUI---Create---Label（图3.0）
图3.0
图3.1
图3.2
通过Inspector视窗来设置字体的属性（图3.2），达到理想的效果
添加Button, 点击工具栏 NGUI---Open---WidgetWizard （图3.3）
图3.3
弹出创建UI元素对话框（图3.4）
图3.4
此功能还可以添加进度条，滑动条等小部件（图3.4）
图3.5
选择好按钮的Background，编辑Label 文本内容，按钮添加完成（图3.5）
最后把我们的编辑好的界面保存成Prefab文件，就能给到程序员写代码了。
感谢收看~！