详细解析PS切图标记外挂神器Assistor

2016-02-15 21:42 10 1 收藏

图老师电脑网络栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享详细解析PS切图标记外挂神器Assistor的教程,热爱PS的朋友们快点看过来吧!

【 tulaoshi.com - PS 】

首先要告诉大家一个好消息,原本$9.99一个月的Assistor PS 现已免费下载。对于学生用户全面免费,而其他用户在今年6月之后就不用再购买商业许可证也可以免费使用,功能强大,特别好用。

基本介绍

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

详细解析PS切图标记外挂神器Assistor,PS教程,图老师教程网

主要功能如下:

轻松创建标记文档,一键导出图层

单位数值转换快速

快速创建参考线(类似 GuideGuide)

圆角矩形调整

按照固定的间隔复制图层

Assistor PS 适用于 PS 3.0 以上的版本,同时兼容 Windows 系统和 Mac 系统。看完视频,心急的同学可先直接前往它家的网站http://witstudio.net/en/assistor/product进行下载。想了解更加详细的功能介绍的及一些使用小技巧的,可以继续往下看。

切图标记功能

广大切图仔最关心最常用的功能抢先亮相,尤其是网页设计师和 UI 设计师,需要频繁和开发工程师打交道,如果不标记清楚,开发做出来的效果有时候简直能吓死人。

「你骗人,设计稿根本不是这样的」「你没标清楚,怪我咯」「」「乖,不哭」从此以后,我发誓,一定要弄出一个牛逼哄哄的标记图,让这傲娇的程序员无理反驳,无地自容好了不瞎扯了,接下来给大家介绍这个切图神器各个界面的功能详解。

详细解析PS切图标记外挂神器Assistor,PS教程,图老师教程网

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

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

颜色设置 切换标记颜色

标记设置设置标记环境

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

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

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

详细解析PS切图标记外挂神器Assistor,PS教程,图老师教程网

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

分辨率单位设置

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

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

字体单位设置PT、PX、SP

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

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

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

标记坐标

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

详细解析PS切图标记外挂神器Assistor,PS教程,图老师教程网

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

详细解析PS切图标记外挂神器Assistor,PS教程,图老师教程网

标记大小

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

详细解析PS切图标记外挂神器Assistor,PS教程,图老师教程网

标记距离

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

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

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

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

详细解析PS切图标记外挂神器Assistor,PS教程,图老师教程网

标记文字信息

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

详细解析PS切图标记外挂神器Assistor,PS教程,图老师教程网

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

详细解析PS切图标记外挂神器Assistor,PS教程,图老师教程网

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

详细解析PS切图标记外挂神器Assistor,PS教程,图老师教程网

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

感谢大家的阅读,下篇文章我们将学习 Assistor PS 的其他功能,如引导框、一键切图、创建参考线、圆角矩形转换、按照固定的间隔复制图层等。近期发布。

来源:http://www.tulaoshi.com/n/20160215/1564287.html

延伸阅读
首先,还是先通过一个非常简单的案例,来介绍一下效果和外观面板。如果要是看了先前的一系列教程,应该操作起来会非常顺利。即 画一个圆角矩形。画圆角矩形应该是一个挺常见的需求。虽然 AI 自带有圆角矩形工具,不过一般来说,不建议直接用圆角矩形工具画,更推荐先画一个普通的矩形,然后添加一个圆角效果;同时,为了说明效果的作用,演示效...
什么是响应式图标设计? 响应式设计主要讲的是布局,那么什么是响应式图标?响应式图标设计是一种根据屏幕尺寸来改变图标类型、从而达到更好可读性的设计。 图标为什么要响应式? 怎样阅读内容?时至今日,我们用来阅读内容的平台越来越多。设备、屏幕分辨率、浏览器、平台我可以拿着5S+Safari+iOS7.0浏览网页,也可以拿着1020+Chorome+WP8浏览...
图标设计要求熟练运用软件,涉猎各种矢量特性、蒙板以及构造实体几何,因此,会需要同学们运用不同的软件工具与技巧,今天的译文全都是超实用的技巧干货,来补充点有料的。 图形创建 vs 图形样式 我认为,对矢量路径的创建和图形样式的设定作出正确的区分是十分重要的,因为它们需要通过两种截然不同的设计软件来实现Photoshop 和 Illustr...
UI最重要组建之一就是图标,随着扁平化设计的发展趋势,越来越注重图标的简洁与寓意表达,平面图标已占主导地位。每位设计师所处的阶段所关注的要点是不一样的,我把图标设计分为2个阶段–初阶与高阶,这样分是为了有步骤性的学习和进阶的加强,当然,能人的话一步到位,对于新人来讲会较难,需要实际工作中辅导与自己经验总结。我不会华...
SLICY MAC下的切图神器!   软件特性: 切图方便,简单的拖放即可,傻瓜式操作2. 培养为图片资源合理命名的好习惯 自动生成@2x两套图片,极大方便IOS开发者 一、软件使用 1、PSD文件的预处理 这一步可以由设计师来处理,不过个人推荐程序员亲自完成这一步骤,因为这里涉及到图片的命名,我们自己来...

经验教程

193

收藏

83
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部