现在的手机有不同的型号,同时也有不同的屏幕分辨率。比方上图中不同分辨率的手机需要不同大小的图标设计,所以就需要切图。把同一个图标为了能在不同型号的手机上清晰的显示出来,就需要切成不同尺寸和分辨率的图标,这个就是切图的原因。
一:什么是切图?
切图就是把一张大界面里小元素单独保存成小图的过程。
这张大界面需要动动刀
把图标切成不同尺寸单独保存
第二:ui设计师为什么要切图?
单纯靠代码实现不了
ui设计师的产出物只是普通的图片或者是psd,是用于观看预览的演示稿设计稿,真正的app应用还必须通过代码的编写,数据的储存和系统的配合才能完成,所以界面的元素都需要通过代码写入实现。
但是有些内容是代码也实现不了的,例如设计师设计的图标,背景图片等等,这些就需要通过图片的方式存在,所以设计师要把这些内容切成一张张的小图,给到程序进行代码的制作。
(代码实现不了的图标)
需要适配不同的屏幕
目前手机市场设备种类繁多,即使是iphone也有3种不同的屏幕分辨率,这就要求了同样的界面元素需要有不同的尺寸。
第三:如何切图?
一种是利用ps自身的切图功能,“导出为”(这个功能只有更新到ps最新版本才有)在想要切出来的图层或者图层组上,选中并右键,会有一个导出为,点击导出为就可以看到下面的界面。
第二种利用ps插件cutterman,直接安装在ps里面,然后在窗口-拓展功能里面可以找到,界面如下:
按上面的参数可知,直接可以切除安卓、苹果和pc端的尺寸,下面可以设置画布大小,选择需要的分辨率,然后在导出之前需要先选择导出的位置,之后直接单击导出选中图层按设置键,按照自己设计出来的界面尺寸,填写参数即可。
第四:切图的技巧
切图的时候并不是直接把小图保存就可以了,其中还有些小技巧,能够帮助程序猿更方便地进行页面编写:
1.相同位置相同功能的图标尺寸应该保持一致
2.保证图标的可点击区域大小
第五:如何标注?
标注也有相应的方法,最傻瓜的就是在元素旁边写上需要标注的信息,但是这种方法又慢又麻烦,页面多起来还会让设计师崩溃,所以我们又要用插件了:
标注软件——markman
步骤:
打开马克鳗,会要求我们先拖进一张图片,如下图:
拖进一张图,我们即可看到下面图中红色框的小图标,再进行操作。
选择标图工具,比如一个长度标记,找到想要标出的位置,然后按住鼠标并拖动到自己想要的位置,就能得到想要的间距了,选择颜色标记工具,在想标记的位置直接单击,就会出现颜色值,还有一些不能标出的,可以用说明工具去单击,然后直接手动输入即可。
利用标注插件——assistor ps
JAVA上百实例源码以及开源项目源代码简介(组图)分销商城小程序有哪些优势呢影响外链价值的关键性几个因素企业做个公司网站价格是多少?十大平面设计师必备技能无代码来了,还要程序员吗?大量的死链对优化有哪些影响?网站建设要提前做好准备