快速导出产品原型中的Icon切图（sketch/PS/蓝湖）-经验/观点-UICN用户体验设计平台

恭喜你成为UI中国推荐设计师（详情）

查看全部热门榜单

全部

常用搜索：作品集 AE ui设计 aigc icon logo app

您的意见是我们 UI 中国进步的动力！

点击立即反馈按钮，发表您的意见！

立即反馈

QQ群反馈

您也可以加入UI中国官方反馈群进行反馈！

群号：302892100

备注：反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作，请填写需求表单，我们会在第一时间与您联系！

0/20

0/200

设计大赛

设计大赛
发布广告
发布招聘
其它需求

取消发送需求

提交完成
感谢您对UI中国的支持和信赖！

我知道了

快速导出产品原型中的Icon切图（sketch/PS/蓝湖）

0.0°

2020-04-18 原创文章 经验/观点 举报 3896 2 4 0

Zoeyyou 关注

问题：如何借助sketch、PS、蓝湖、墨刀等工具，快速导出产品原型中的Icon切图

原型查看地址：https://org.modao.cc/app/67c8f0f15adc101b4228752ef8429385e1e7a20d?simulator_type=device&sticky

方法一、sketch

参考链接：https://www.ui.cn/detail/301391.html

1、在Iconfont上下载icon图片（图片格式：svg）下载地址： https://www.iconfont.cn/

2、查看原型、UI页面设计稿、Icon尺寸

3、打开sketch，导入icon图片

4、调整Icon尺寸，与UI页面中的Icon尺寸一致（若无UI页面，则与原型页面一致）

5、换算倍数

（1）苹果：

（2）安卓：

6、根据换算的倍数关系，设置切图导出格式后，导出切图

（1）苹果：

（2）安卓：

方法二、PS

1、在Iconfont上下载icon图片（图片格式：png） https://www.iconfont.cn/

2、查看原型、Icon尺寸，并打开PS，参照原型尺寸新建画布

3、在PS中导入icon图片

4、调整Icon尺寸，与原型页面中的Icon尺寸一致

5、打开蓝湖拓展功能，打开步骤：窗口>拓展功能>蓝湖

6、选择Icon并标记切图

7、上传设计图至蓝湖，步骤：选择设计尺寸>选择项目>点击上传全部画板

8、打开蓝湖，打开项目中的设计图，选中Icon，选择开发平台，导出切图

以上，Icon导出切图的这两种方法已经介绍完了，有需要的同学可以下载文章下方的Icon切图练习附件练手哦~

P.S.这是我第一次发文，如果大家觉得对自己的工作有帮助，还请多多支持，笔芯~

更新：2020-04-18

下载

2人已收藏

Zoeyyou

一只喜欢设计的好奇产品汪

1

作品
0

粉丝
1

关注

猜你喜欢

2020-04-18 原创文章 经验/观点 举报 3896 2 4 0

快速导出产品原型中的Icon切图（sketch/PS/蓝湖）

0.0°

添加收藏！

您还可以进行分类收藏

您确认要推荐？

该作品发布时间：2020年04月17日

评分

完整度

启发性

勤奋性

排版布局

提交需求

猜你喜欢

举报理由:

您确认要推荐？

评分

推荐心得