ui设计为什么要切图，切图是什么意思？

切图严格来说并不是Ui设计师的工作，而是前端工程师的工作，指的是将设计师的设计转化为网页，是一种将设计师的“理想”转化为“现实”的工作，将psd进行切片重组，利用div+css js等等前端开发代码来生成网页的一种技术。

在软件或网页中，各元素的代码应该是分隔开的，有些ui中做的文字部分，对应到软件或网页中就需要写相应的文字显示代码，如果是ui中做的背景，则在软件中就只需要显示该图片。

UI设计中的切图本质上来说，就是需要把一些图形打包到app的安装包内，这部分图形(比如说是图标)开发工程师无法用开发语言写出来，但是这些各种形状的图标也需要随着安装包安装到用户的手机里，所以这些图标就需要UI设计师给切出来，然后让开发工程师打包到app的安装包内。

那么UI设计师切图要怎么做呢？

在设计软件里手动切图

用 PS 的切片工具把图标分割出来（通常先用辅助线把元素围起来，方便准确切割），然后存为 Web 所用格式，通常是存为透明底的 PNG 图，这样一个切图就做好了。当然，正常情况下是把一个页面上的图都切好，全部选中，批量导出。

不过，现在这种方式，已经很少有人用了，效率太低了。

设计软件+第三方插件

在 Sketch 或 PS 里把设计稿做好，再上传到第三方插件里去切，这样的好处是效率提高很多，缺点就是如果要修改设计稿或者有漏标的内容，要重新上传。

ui设计为什么要切图，切图是什么意思？相关推荐

UI设计灵感|高级黑网页首图就该这样设计
那高级黑就是沉稳霸气的经典色,在网页色彩搭配中,甚少会有人敢大面积的使用黑色,但其实黑色有它的优点,它能搭配世界上任何一种色彩,能让其他亮色凸显魅力.当大家都在研究各种色彩搭配法则的时候,高级灰与高级 ...
UI设计中配色专辑素材|做图配色，一键搞定
UI设计师如何获得完美的配色? 这要从对色彩理论和基本工具的开始. 有没有更容易上手的方案呢? 搜UI (SOOUI) 搜集了最实用的配色专辑,可以说是目前最好用的配色网站了! 60%是你的主导色, ...
UI入门必读！完整的UI设计学习流程是怎样的？
目前UI设计师现越来越火,薪资也越来越高.随着技术领域的逐步拓展,产品生产的人性化意识日趋增强,越来越多的企业开始注重交互设计.用户测试方面的投入,这也就意味着兼具美术设计.程序编码.市场调查.心理学 ...
微风：什么是UI设计？
大家好我是微风,一个爱设计爱生活的平面设计师,最近很多朋友都在问什么是UI设计?零基础能学习UI设计吗?UI设计学习需要使用什么软件?就业前景怎么样呢!今天微风就来给大家介绍下什么是UI设计,UI设计 ...
新手学习UI设计好学吗？难吗？
有的新手选择学UI设计,可能只是因为毕业不知道做什么,或者是因为学了一些设计,觉得不从事设计浪费所学技能,然后不情愿的选择做个设计师,那么,苏州学码思小编先介绍什么是UI设计. 一,什么是UI设计? ...
微信小程序--札记与贺卡项目前端页面UI设计实现
这周因为忙着开学准备以及开学之后的事情,所以没有多余的时间去学习另外的知识,只是在有限的时间内抓紧完成了这周布置的任务-札记与贺卡项目的UI设计. 主要是通过千图网和图怪兽寻找灵感进行素材的制作,或者 ...
UI设计进阶干货|切图命名
UI设计切图是最重要的设计输出物,切图输出的命名规范不规范也直接影响到工程师对设计效果的还原度.所以切图输出应当做到切图精准.便与协同和压缩大小.这些问题其实都不是问题,搜优 SooUI http:/ ...
移动端切图内容包括什么_移动ui设计切图规范有哪些要求
随着智能手机的不断运用,移动端ui设计成为大家关注的重点.而移动ui设计中,移动ui设计切图跟手机的使用密切相关.今天就让小编为大家介绍移动ui设计切图规范有哪些要求. 移动ui设计切图规范 1.切图 ...
android ui 切图工具,APP切图标注教程：UI设计切图标注的小工具实用技巧
分享关于一篇UI设计师必须要懂的切图标注的小工具实用技巧,让你在跟开发工程师协作的时候更加得心应手. 设计师必备的UI切图小工具如下3大常用工具: 1.切图工具 Assistor PS 也是一款PS的 ...

ui设计为什么要切图，切图是什么意思？

ui设计为什么要切图，切图是什么意思？相关推荐

最新文章

热门文章