1、面板
2、选择图层
3、属性面板
可查看文本的字体大小和颜色等
可查看形状工具(U)画出的形状的填充色和圆角等信息
可查看智能对象的宽高
4、信息面板
5、吸管工具(I)
左键点击吸取，颜色会实时展示在“信息面板上”；
设计稿经常会看到一些不太明显的渐变色背景色的模块，怎么才能快速知道这是属于渐变色还是纯色的块？按住左键拖动吸管，颜色信息展示在“信息面板”上，通过观察即可知道到底要用background-color还是linear-gradient；
右键需要获取的颜色点，然后会出现菜单，最后一项是“拷贝颜色的十六进制代码”，这里可以快速拷贝色值供css代码用；
如果图层有不透明度，请记得先把不透明度恢复到100%才可以吸取，否则色值会不正确，右键拷贝的色值也会不对；
按住shift键然后吸取，这样会吸取多个色值，并且依次记录在“信息面板”上，这个用于对比色值很有用，在图上相应位置也会标识出顺序，如下图：
6、获取margin的另一种方式
7、复制css
.圆角矩形_584 {
border-radius: 15px;
background-color: rgb(0, 0, 0);
opacity: 0.302;
box-shadow: 6px 10.392px 121.83px 9.17px rgba(79, 48, 193, 0.004);
position: absolute;
left: 283px;
top: 306px;
width: 136px;
height: 32px;
z-index: 34;
}
.矩形_1 {
background-image: -moz-linear-gradient( 90deg, rgb(255,255,255) 0%, rgba(255,255,255,0) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(255,255,255) 0%, rgba(255,255,255,0) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(255,255,255) 0%, rgba(255,255,255,0) 100%);
position: absolute;
left: 348px;
top: 572px;
width: 113px;
height: 78px;
z-index: 25;
}
8、复制图层到新文件编辑
选中图层(组)
图层面板右键图层，选择“复制图层”
在弹出的面板的文档单选框里选择“新建”，如下图
9、资源生成器
首先打开设置，在“增效工具”下，勾选“启用生成器”；然后在主菜单的“文件”-“生成”，勾选“图像资源”
在图层面板选择要导出的图层，把文件名改为如“icon.png”带图片扩展名的图层名，然后就完成了资源生成的全部步骤，就这么简单。生成的资源在文件同目录下、以“-assets”结尾的文件夹里。
| 图层名 | 导出图片 |
|---|---|
| logo.png | 生成png-32，含透明通道 |
| logo.png8 | 生成png-8 |
| logo.png24 | 生成png-24，不含透明通道 |
| img/logo.png24 | 资源保存在img下 |
| logo.jpg | 质量90% |
| logo.jpg8 | 质量80% |
| logo.jpg5、logo.jpg50% | 质量50% |
| 50% logo@1x.png | 宽高为原图的50% |
| 50% logo@1x.png + 100% logo@2x.png | 用“+”或“,”分割可生成多份资源 |
10、微调导出的icon
图层面板，选中图层(可按shift选多个图层，批量处理相似图层)，右键，选择“导出为”
在弹出面板可设置画布大小，宽高可设置比原来的尺寸大2像素即可，2像素会分配到上下左右各1像素。如下图：
参考资料
本文分享自微信公众号 - 凹凸实验室（AOTULabs）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
