UI设计中的切图是怎么切图「零基础学UI须看」

Question

如题所述

Answer 1

切图是设计师交付给开发的产物之一，设计稿完成后，设计师需要将其切成便于制作成页面的图片。设计师切图时就需要用到切图工具，比如摹客，可以自动切图（支持Sketch、Adobe XD、PS的设计稿），设计师只需在设计稿上进行切图标记，上传至摹客即可，无需手动，开发可以自主下载和使用。

如何切图？其实很简单：（以PS切图为例）

Step 1.安装并打开插件
插件安装好后打开PS，在「窗口>扩展功能」找到摹客 插件，选择并打开。使用摹客平台账号登录。
Step 2.标记切图
在完成的设计稿上，选中需要切图的图层或编组，点击「标记切图」。将在名称前增加“-e-”，「标记切图」变为「取消切图标记」，则标记切图完成。
Step 3.上传至摹客
标记切图后，一键将设计稿上传至云端项目中，开发工程师就可以自主下载切图，只需在右侧面板中选中切图，点击即可下载。

除了自动切图，还有更多亮点功能：
1. 切图压缩：在右侧面板中选中切图
2. 切换平台和选择倍率：iOS、Android、Web
3. 下载选中切图，一步到位。

摹客还支持Sketch、Adobe XD的自动切图，下载插件即可：
下载地址：
摹客：https://www.mockplus.cn/download/idoc-ps
Sketch：https://www.mockplus.cn/download/idoc-sketch
adobe XD：https://www.mockplus.cn/download/idoc-xd

Answer 2

ui设计切图首先找一个合适的工具，比如Photoshop，Adobe Illustrator。都是UI设计切图过程中必不可少的好工具。本回答被网友采纳

Answer 3

切图标注
　　如今，设计切图插件能够将设计稿里所选中的图层、图层组按不同开发规范宽度、倍数，进行合并裁剪切片。与传统切图方法「调整图像尺寸 – 选中切图图层/图层组 – 调整画布尺寸 – 导出web所用格式」相比，这一系列动作被进行了一键化处理，只需要在插件中选择好开发语言，保持文件夹位置便可一键标记或导出，极大地缩减了繁琐的操作流程。
　　蓝湖插件
　　蓝湖插件在设计稿做切片标记，上传至平台的画板便带有切图下载。

　Cutterman插件

　　3种开发语言(iOS，Android，Web)：根据不同的项目选择不同的开发语言，下方小箭头可进行素材输出「倍数」选择。
　　倍数：插件在导出选中图层时以「@2x」和「XHDPI」为标准对设计稿进行等比放大缩小。如 750px 宽度的设计稿导出「@3x」和「@1x」时，导出的切图会分别放大 1.5 倍和缩小至 0.5 倍，然后进行图层导出。
　　导出选中图层：插件根据已选语言、倍数，对已选中的所有图层、图层组进行合并裁剪然后导出。裁剪大小为所有图层合并后总宽度高度。
　　固定尺寸：插件在导出选中图层时对已选中的所有图层、图层组进行合并后，再调画布或者图像至固定尺寸大小，然后进行图层导出。已选图层大小大于固定尺寸设定，则被调整图像，素材被压缩。已选图层大小小于固定尺寸设定，则被调整画布，图层素材大小不变，素材尺寸变为固定尺寸大小。
　　设计稿尺寸与切图倍数
　　UI 设计师需要在正确的设计稿尺寸下进行切图，切图素材才能正常供给开发人员使用。否则产品开发落地后会出现图标变形，像素低等情况。
　　手机端常用的设计尺寸与它们对应的切图倍数
　　iOS：采用 750×1334 来设计，@2x 切图直接适配 750×1334 分辨率的机型，并向上向下适配主流分辨率(@2x/@3x)。
　　
　　设计稿750x1334px——切图倍数iOS@2x，iOS@3x
　　
　　Android：采用 720×1280 来设计，XHDPI 切图直接适配 720×1280 分辨率的机型，并向上向下适配主流分辨率(XHDPI/XXHDPI)
　　
　　设计稿720x1280px——切图倍数XHDPI，XXHDPI
　　
　　微信小程序(它的单位都是以i6的750px为划分点)
　　
　　设计稿750x1334px——切图倍数png24
　　
　　手机端网页、公众号链接等(与微信小程序统一使用i6，方便做单位转化)
　　
　　设计稿750x1334px——切图倍数本回答被网友采纳

Answer 4

现在都有软件能够帮你完成自动标注和一键切图，比如蓝湖
有软件能帮你完成了你自己还切那干啥哈哈哈