今天的这节是新手教程，主要教大家如何标图与切图，新手可以来学习一下！

1.这个是标图，就是把界面里所有可操控的东西标注起来，文字要标注字体、字号、颜色，程序在这个基础上去添加想要的效果，图片是大小、间距、位置。

2.这个是切图，当这个界面要给程序的时候，把这些单一的元素切出来，导出PNG的格式，然后发给程序。

3.标注之前要清楚的知道要标注什么，这张图要标注的是字号，字号之间的区分是多少，大小、颜色、间距都分别是什么，程序知道之后，批量的往里输入信息就可以了，文字标注好之后，切出来的图片也要标注出来。

4.新建图层，把它【裁切】一下，按住【Alt】拉到想要的位置，填充颜色，新建图层，用【铅笔工具】，换一个颜色，直接标注。

5.描边只要给它一个边的宽度就可以，边色可以直接吸一下颜色，把它复制进去，同样的方法，把其它的标注一下。

6.图片用【切片工具】标注大小，填充颜色，【填充】为【0】，添加【描边】，【位置】为【内部】，修改颜色。

7.选择【切片工具】，双击图片，就有大小，进行标注。

8.图片有它固定的大小，可以测量一下，文字到切片的高度，直接标注。

9.只要标注一张图就可以了，下面的位置都是统一的，可以把两张图片的高度标注一下，这样程序会更好的把控间距。

10.切图就是设计完效果图之后，把所需要的元素给它单独的导出来，用【切片工具】，把它的大小框出来。

11.按住【Ctrl+Shift+Alt+S】存储为Web所用格式，按住【Shift】选中需要的东西，选择【PNG-24】。

12.点击【保存】，【切片】选择【选中的切片】，把标图和切图一起发给程序，程序就会把所有的图拼成你想要的效果。

13.PNG.9是PNG另外一个计算方法，如果这个按钮1像素拉伸没有任何纹理、异形的情况下，它的衡量设置是统一的，就可以用PNG.9把它的横轴和纵轴无限拉伸，变成想要的大小，1、3、7、9这四个位置是不变的。

以上就是今天的内容，关注疯狂的美工官网，每天分享不同设计技巧！