目前APP设计师们对Assistor PS 可是好评连连,说是切图仔的福音或救星。确实是这样的。

与其他切图标记软件不同的是,Assistor PS 是完全独立于 PS 本身的,说是一个外挂更加合适,旨在提高切图标记的效率及速度。虽然不是一个插件,但是它与 PS 是连通的,当你在 PS 选择一个图层在后,即可使用它的功能。如果你肯花点时间下载是试用,相信不会让你失望,甚至能可能让你觉得相见恨晚。

APP切图标记PS的外挂神器推荐-Assistor PS

包括mac版和window版,具体版本下载请各位移驾Assistor PS下载官网。

工具下载官网:http://witstudio.net/en/assistor/download

Assistor PS 的标注功能无需赘述,大家看一下他们的演示视频即可,其中最吸引我的是 Layer Snips 功能,简单来说就是把选中的图层按照其本身或者自定义的大小放到一个新建的文件里,完全替代我以前手动 Cmd + Shift + C,然后 Cmd + N 然后在调整图片尺寸的操作,一键完成,十分方便,而且只要图层是矢量的,之后可以直接新建成 @2x 或者 HDPI、XHDPI 等各种尺寸。另外也附带了圆角、打网格、单位转换等辅助功能。

我们可以先看看Assistor PS工具视频介绍:

25学堂给大家介绍这个切图神器各个界面的功能详解。

1】、Each Layer 选中此框可单独处理每一个图层,不选中则将已选择的图层视为一个整体进行处理

2】、分辨率单位设置 可选择输出数据的分辨率单位,如 px 以及安卓开发中常用的各种 Dpi 等

3】、颜色设置 切换标记颜色

4】、标记设置 设置标记环境

5】、标记数据输出 自动计算并输出所选图层的位置、大小、间距等信息

6】、引导框 为你所选的尺寸或者图层创建一个引导框

7】、一键切图 快速切出并保存所选图层

8】、数据提取 输出所选图层的数据信息

9】、复制全部 复制上面第八项的数据到剪贴板

点开标记设置,我们可以看到下面的界面:

1】、输出设置 指定输出数据的的各种设置,如字体、小号、抗锯齿、颜色及加粗。

2】、分辨率单位设置

3】、小数/整数设定 选中则四舍五入输出整数

4】、颜色代码类型设置 RGB 或者 HEX,具体什么类型,看程序员的编码习惯

5】、字体单位设置 PT、PX、SP

6】、创建标记背景 有时候我们的标记可能与设计稿的颜色相近影响阅读,这时候添加背景可以使之更加清晰

7】、控制点设置 可以选中标记从所选图层的左上角、右上角等地方开始

8】、第一行选中则标记后自动链接图层。第二行选中则每次标记自动创建组

标记坐标

选择一个或者多个图层,点击标记坐标按钮即可标记。或者(Alt+1)。按钮右边的小三角形可以进入该功能的设置页面,可选择标记的格式及指定标记位置。

有时候我们需要标记相对坐标,怎么做?先用选区工具选择一个区域,然后再开始标记即可

标记大小

同样选图层后点按钮标记。或者(Alt+2)。小三角形可以设置标记的格式及选择同时标记宽高还是标记其一。

标记距离

这里的标记有三种情况,快捷键(Alt+3)。小三角形可以设置标记的格式。

1、选中两个图层,标记两个图层之间的距离

2、利用选区工具拉个区域,标记该区域较长的边

3、只选择一个图层,标记该图层与画布间的距离

标记文字信息

根据设置输出文字的相关信息。快捷键(Alt+4)。

点击小三角形,可选择信息选项。

分割线上部分为是否显示引导线,效果如下图,左边为显示引导线,右边为不显示。

分割线下半部分则设置是否显示字体的相关信息,依次为字体族、字体样式、字体大小、行高、字体眼颜色、效果(阴影)等等。

以上内容来源于:http://www.bigertech.com/post/assistor-ps-1/

如果各位还需要了解更详细的教程可以看看:

http://www.zcool.com.cn/article/ZMTQwMjAw.html

http://www.shejidaren.com/assistor-ps-plugin.html

转自:链接

APP切图标记PS的外挂神器-Assistor PS(转)的更多相关文章

  1. 转发-UI基础教程 – 原生App切图的那些事儿

    UI基础教程 – 原生App切图的那些事儿 转发:http://www.shejidaren.com/app-ui-cut-and-slice.html 移动APP切图是UI设计必须学会的一项技能,切 ...

  2. 原生App切图的那些事儿

    如何切图? 了解iphone界面的尺寸 最小的分辨率是320x480,我们把这个尺寸定为基准界面尺寸(baseline),基准尺寸所用的图标定为1倍图(1x). 在实际设计过程中,为了降低设计成本,一 ...

  3. 学习笔记:APP切图那点事儿–详细介绍android和ios平台

    学习笔记:APP切图那点事儿–详细介绍android和ios平台 转载自:http://www.woofeng.cn/articles/168.html   版权归原作者所有 作者:亚茹有李 原文地址 ...

  4. App切图命名规范

    转自:http://www.uisdc.com/slice-rename-in-ui-design(略有修改) 关于切图命名的规范,我个人觉得关键是在于团队能够有一个统一的规则,所有成员严格遵守并且和 ...

  5. APP切图那些事儿-Android ios

  6. 切图教程,APP切图实例

  7. 一款APP从设计稿到切图过程全方位揭秘 Mark

    纯干货!一款APP从设计稿到切图过程全方位揭秘   @BAT_LCK:我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不 ...

  8. 纯干货!一款APP从设计稿到切图过程全方位揭秘(转)

    @BAT_LCK :我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不同,流程不尽相同,但是终究还是能有些帮助. 依旧声 ...

  9. 2018年设计师都在用的PS切图插件--摹客iDoc

    终于找到你,我梦寐以求的PS切图插件.曾几何时,设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦.为什么这么说呢?开发要的那么多尺寸,我到底该怎么切图?iPhone的版本已经不少了,更别提安 ...

随机推荐

  1. 解决:dpkg:处理 xxx (--configure)或E: Sub-process /usr/bin/dpkg returned an error code (1)

    问题重现: 问题解决办法: #先备份原来的,然后重新新建 sudo mv /var/lib/dpkg/info /var/lib/dpkg/info.bak //现将info文件夹更名 sudo mk ...

  2. pod setup 安装的最新办法(大坑啊)

    由于升级到10.11以后安装cocodpods难免会碰到各种问题,下面有列举出不同的解决办法,建议一个方法如果不行,把文件请了再用第二种方法, 流程是这样的:正常安装-->碰到问题-->查 ...

  3. 用TTS实现文本转语音

    最近被toefl单词虐成狗::>_<:: 想做一个可以自动把单词转成语音的软件,这样就可以在路上戴耳机边走边听啦~ 用微软的TTS语音库可以很容易地实现.早期的TTS要想实现中英文混合朗读 ...

  4. UnixC学习小结

    1.malloc工作原理:     malloc使用一个数据结构(链表)维护分配空间     链表的构成:分配的空间/上一个空间数据/下一个空间/空间大小等信息.     对malloc分配的空间不要 ...

  5. JS-抽奖系统-实现原理

    有本事中奖的,过来找我换红包!!哈哈!! <meta charset="UTF-8"> <title>抽奖系统</title> <styl ...

  6. jQuery 复习

    jQuery 复习 基础知识 1, window.onload $(function(){});   $(document).ready(function(){}); 只执行函数体重的最后一个方法,事 ...

  7. 面试题目——《CC150》数组与字符串

    面试题1.1:实现一个算法,确定一个字符串的所有字符是否全都不同.假使不允许使用额外的数据结构,又该如何处理? 注意:ASCII字符共有255个,其中0-127的字符有字符表 第一种解法:是<C ...

  8. 【转载】使用Pandas对数据进行筛选和排序

    使用Pandas对数据进行筛选和排序 本文转载自:蓝鲸的网站分析笔记 原文链接:使用Pandas对数据进行筛选和排序 目录: sort() 对单列数据进行排序 对多列数据进行排序 获取金额最小前10项 ...

  9. Coursera-Getting and Cleaning Data-Week2-课程笔记

    Coursera-Getting and Cleaning Data-Week2 Saturday, January 17, 2015 课程概述 week2主要是介绍从各个来源读取数据.包括MySql ...

  10. flash_header.S ( freescale imx6 board)

    /* * Copyright (C) 2011-2012 Freescale Semiconductor, Inc. * * This program is free software; you ca ...