Ai如何通过创建多个画板的方式创建图标雪碧图

2024-10-30 18:42:43

1、所谓雪碧图,如果做经常做web设计的UI设计师一定不会陌生,这是一种减少服务器请求高效的图片加载方式,前面也有经验写过怎么在ps中合成雪碧图。

Ai如何通过创建多个画板的方式创建图标雪碧图

3、第一曰搬嚏嘀步,在新建画板时要做好规划,比如这次,我需要6个图标,每个图标的单元格是40px×40px,这里准备让图标排成两行,每行3个,因此画板的大小就是120px×60px。在画板中绘制一个40×40的矩形。

Ai如何通过创建多个画板的方式创建图标雪碧图

5、现在把图标按照顺序对应贴到矩形框中,这里不用刻意去对齐,只要保证图标位于里面就可以了。

Ai如何通过创建多个画板的方式创建图标雪碧图

7、看一下画板面板中,现在有7个画板,多出来的6个画板就是我们上一步操作中矩形转化的面板。

Ai如何通过创建多个画板的方式创建图标雪碧图

9、导出时,画板选择第一个画板(最大的那个),就可以得到一张排列整理的雪碧图。这个方法最大的好处是对齐的时候比较省事。

Ai如何通过创建多个画板的方式创建图标雪碧图

11、因为【矩形网格工具】创建的是分隔线和一个大的矩形,所以这里用形状查找器(快捷键Shift+M)来分成独立的网格。

Ai如何通过创建多个画板的方式创建图标雪碧图

13、这里只需要把矩形块的填充和描边都改成无就可以了,不用去删除。

Ai如何通过创建多个画板的方式创建图标雪碧图
猜你喜欢