勤学思培训网LYMEZD
  • 终于知道ui切图干什么用的_ui切图用什么软件

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

    [图片0]2ui切图用什么软件
    ui切图干什么用的_ui切图用什么软件,UI设计师的标注切图的利器:

    1.手动标注:PxCook支持多种图像格式(psd,png,bmp,jpg等)的读取,并可手动创建距离、区域、颜色、文本、坐标点等标注。

    2.智能标注:提供PSD文件解析与Sketch插件支持,自动识别各图层尺寸及文本样式等,标注更快捷!

    3.自动吸附:标注过程中可以针对图像内突出颜色进行自动吸附。

    [图片1]3ui切图工具
    PhotoshopCC2015已经出了切图就更方便了,但是对于电脑的配置要求比较高。对于电脑配置比较低的可以这样干,作图的时候用CS6,文件在这里面做好之后,只需要启动CC2014或者CC2015进行切图操作就可以了,毕竟高配置的电脑成本比较高。

    1、调出优选项Command(Ctrl)+k,勾选启用生成器,默认是不够选的。

    2、文件-生成-图像资源,这个是后期的时候用的比较多的一个选项。

    4ui切图教程
    切图要点

    1、不同的模块建立不同的切图文件夹存放。

    这样做的目的:一方面,方便自己以后查找;另一方面,方便咱们的开发工程师查找文件,因为有时候是分工合作,需要第一时间找到对应的文件。

    2、命名规则

    建议采用以下方法命名:

    公式:模块_类别_功能_状态.png

    3、切图文件大小必须是偶数,格式为PNG-24。

    4、iPhone的3倍图怎么切?

    由iPhone6和iPhone6plus的屏幕尺寸比得来的,750/1080≈1334/1920≈2/3,因为iPhone5/s与iPhone6的屏幕分辨率是一致的,都是326ppi,所以它们用的是一套图,也就是@2x图,6和6plus的屏幕宽高比是2/3,当5/6使用@2x图的时候,6plus使用的@3x的图,也就是5/6的图片资源宽高的各倍,换算成百分比刚好就是150%。

    6、输出

    这个时候,就开始输出了,因为咱们的准备工作都已经弄完了,下面就需要用到CC2014或CC2015的图像生成器了,前面的利其器的部分的增效工具里面的启用生成器一定要打勾,然后就可以直接操作,文件>生成>图像资源,然后你会看到,切图文件的旁边多了一个文件夹,文件夹的名称一般是“文件名-assets”,里面就是你的切图文件了。

    5ui切图规范
    1. 切图资源尺寸必须为双数

    众所周知,智能手机的屏幕大小都是双数值,比如iPhone 7的屏幕分辨率是750*1334 px。切图资源尺寸必须为双数,是为了确保切图资源在工程师开发时是高清显示。因为1px是智能手机能够识别的小单位,换句话说就是1像素不能在智能手机被分为两份。

    2. 图标切图输出应根据标准尺寸输出,并且考虑手机适配(主要是iPhone 6plus的适配)

    在切图资源输出中,图标切图输出是至关重要的部分。在开发中由于各机型的屏幕分辨率不同,需要针对一些大屏机型进行适配。

    3. 为了提升APP使用速度,尽量降低图片文件大小

    在切图资源输出中,图标切图是很重要的部分,比如新手引导页、启动页面、默认图、广告图等。图片切图一般情况下文件大小都是相对较大,不利于用户在使用app过程中加载页面,因此图片切图要尽量压缩图片文件的大小。

    4. 可点击部件应当注意其点击区域不小于88px

    5. 可点击部件要把相关状态都切图输出,比如正常状态、点击状态。

    在切图过程中,不仅要输出正常状态的切图,更要注意不要遗漏其他状态的切图。