注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

老胤祥 YOU CAN, DO IT!

Illustrator CS6/CC 插件 脚本 动作 笔刷 符号 教程

 
 
 

日志

 
 

422 UI设计师必备 Photoshop图层属性变量插件 设计构建工具 UI-DNA  

2017-10-08 13:05:45|  分类: 【Photoshop】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
UI-DNA 是一个 Photoshop 的扩展插件,它为 Photoshop 带来了真正意义上的变量,让设计稿中组件的复用与修改变得更加便捷与灵活,此外还提供了一系列提高图形设计特别是 UI 设计效率的功能。

UI-DNA一个功能齐全的操作面板在一处使用 UI 设计需要的所有功能,增强 Photoshop 原生功能

422 UI设计师必备 Photoshop图层属性变量插件 UI-DNA - whyeming - 老胤祥 YOU CAN, DO IT!

UI-DNA 是一个 Photoshop 的扩展(CEP 扩展),支持在 MacOS 或 Windows 下的 Photoshop 中运行。

支持 Photoshop CC 2017。CC2014上测试不可用。

单击下方链接下载脚本 插件:
422 UI设计师必备 Photoshop图层属性变量插件 UIDNA-0.0.18-windows-installer.rar

解放设计生产力的快捷功能
Photoshop 没有却该有功能
长阴影与厚度层
文本与图片填充
自由的阵列排列
文本表格编辑
在UI-DNA中都有

在 Photoshop 制作的组件复用一直很是问题,虽然有智能对象可以实现图层或图层组整体的复用,但是智能对象的编辑是脱离当前文档的,把图层和变成智能对象相当于丧失了编辑的便捷性,所以 Sketch 、 Affinity Designer 甚至 illustration 的 Symbol 一直是使用 Photoshop 的设计师羡慕的功能。

UI-DNA 并没有提供 Symbol 一样的功能,而是提供了对智能对象机制的补充(整体复用智能对象就足以),对于组件复用而言更加灵活,自由度更高的解决方案:变量
422 UI设计师必备 Photoshop图层属性变量插件 设计构建工具 UI-DNA - whyeming - 老胤祥 YOU CAN, DO IT!
 使用 UI-DNA 可以为几乎所有图层属性设置变量,这意味着你可以在各个图层间共享填充颜色、描边设置、文本、位置、高度、宽度、阴影、图层样式…..当你需要修改时,只要修改原型图层,所有使用变量的图层的相应属性都会被修改,这个变量应用到实际图层过程被称之为渲染。

不仅是变量,还可以把图层的属性设置为表达式,像是这样把图层宽度设置为某变量的一半再减 10:

A/2 -10

这意味着可以随心所欲的完成动态的布局,像是下图这样:

422 UI设计师必备 Photoshop图层属性变量插件 设计构建工具 UI-DNA - whyeming - 老胤祥 YOU CAN, DO IT!

 为了方便的输入, UI-DNA 还提供了会智能赋值的 @ 开头的对象变量,可以不为单个属性一一建立变量,单个属性会赋值成为对象变量的一部分,当引用时会根据目标属性来取相应的值。

比如可以把图层的宽度和高度都赋值到 @a ,当在另一个图层的高度属性引用 @a 时就会引用@a 里的高度值,在宽度属性中引用 @a 时就会引用 @a 里的宽度值。另外还可以用 @a.w 或@a.h 来明确要引用的值。

422 UI设计师必备 Photoshop图层属性变量插件 设计构建工具 UI-DNA - whyeming - 老胤祥 YOU CAN, DO IT!

 把文本框的表达式属性勾选上,就可以在文本内容中用双花括号 {{}}包裹表达式,来把表达式或者变量转化成文本。这就像 Web 前端中 Angular、或者 vue 对 HTML 所做一样,还有像是 rgb() hsl() 这样的内置函数把颜色转化成不同的文本格式:

 色彩1:{{cc1}}
 色彩1:{{rgb(cc1)}}
 宽度:{{@a.w}}
 高度:{{@a.h}}
 比例:{{@a.h/@a.w}}
 阴影大小:{{@a.quickEffect.dropShadow.blur}}

这意味着可以在你可以在文档里做动态的标注,这样的标注可以使用 Photoshop 里各种各样的效果,比起脱离文档标注,可以更自由设计的外观。

 

 除了文本内容,智能对象的内容(文件路径)也可以使用变量来指定,把路径设置为 > 开头就表示这个路径可以使用 {{ }} 来解析表达式 :
>{{style1}}/img.png

好了,文档的图层效果和内容都已经可以用一系列变量来控制的了, 也就是说内容、布局、外观都可以分离了,这意味着可以把设计稿模板化,修改内容只需要修改变量,可以批量的替换内容、替换布局、替换颜色、字体、样式,可以把文字内容完全交给文案,或者从别的格式转换而来….

不过有些功能还没完成,这里就不多说了。

变量与表达式很强大,但是可能对于很多人来说太复杂,没关系,UI-DNA 还提供了一系列不会改变工作流程的快捷功能,涵盖了图形设计的各个方面,由于太多了,这里选几个代表性的来介绍。

422 UI设计师必备 Photoshop图层属性变量插件 设计构建工具 UI-DNA - whyeming - 老胤祥 YOU CAN, DO IT!

 创建阵列(或者说 N 宫格)是设计经常会用到的工作,当然排列也是

422 UI设计师必备 Photoshop图层属性变量插件 设计构建工具 UI-DNA - whyeming - 老胤祥 YOU CAN, DO IT!

 UI-DNA 派生阵列也是就是根据一个图层创建多个排列好的副本,这和别的工具里 Grid 一样

而 UI-DNA 的排列功能比别的工具更加灵活,它的排列功能不仅可以对任何图层使用,而会自动计算选中图层的间距,当你修改现有图层时这就非常方便了:

422 UI设计师必备 Photoshop图层属性变量插件 设计构建工具 UI-DNA - whyeming - 老胤祥 YOU CAN, DO IT!

 


1.位置、尺寸独立修改 一次修改多个对象

当选中多个图层时 UI-DNA 对每个选中图层的位置和尺寸的修改都是独立的,而不是当做一个整体:

位置、尺寸独立修改

2.自动计算

0.0.6 以下版本只能在有变量的情况下才会自动计算

在 UI-DNA 属性面板的输入框中可以输入数学公式,数学公式会被立即计算出结果:

自动计算输入框中的数学公式

不仅可以计算简单的加减乘除,甚至可以进行各种科学计算:

de  >(100+1920)*1.72                 //=3474; 可以使用括号来明确计算顺序
2017%2000                       //=17; 取余数
5!                              //=12; 阶乘
2^10 + sqrt(100)                //=1034; 次方与求根
abs(-30) + sign(-1)             //=29; 绝对值与符号判断
round(0.6) + fix(0.6)           //=1;四舍五入与丢弃小数位
exp(1/3*log(27))                //=3; 指数与对数
sin(30deg) + cos(60deg)         //=31; 三角函数
max(1,10,100) + min(3,33,333)   //=103; 取最大或最小
10>1?44:111                     //=44; 三元表达式de>

在简单的修改图层属性时可能并不会用到这些高级的计算功能,但是在使用变量来进行动态的设计时。这些高级计算功能提供了无限的可能性。

数学公式中的符号必须使用英文的半角符号

3.所有属性可复制、粘贴

UI-DNA 中所有属性都可以用文本来编辑、复制、粘贴,即使是色彩或者下拉列表选项:

变量
变量

4.使用变量与表达式

UI-DNA 的属性值中可以使用变量,也可以把属性值赋值给变量:

变量

有关变量与表达式的详细说明将在单独的章节来介绍。

属性选项卡

不同类别属性的选项卡按钮左键点击时是互斥的,也就是在不同类别属性的选项卡中切换。如果要同时显示多个类别属性的选项卡,可以右键点击:

左键单选,右键多选

另外不是最常用的的属性被隐藏在“高级”选项里,需要时可以展开:

展开高级选项

1.位置与尺寸

Photoshop 对图层位置与尺寸的修改除了实时形状图层可以在属性面板中修改以外只能用自由变换工具来修改,这对于需要精确控制位置、尺寸数值的 UI 设计来说并不方便。 相比之下 UI-DNA 的位置与尺寸属性提供了更实用的功能:

  • 可以用精确数值修改任何图层的位置与尺寸。
  • 多选图层时,每个图层的修改都是独立的,而非当做整体修改。如前文提到的
  • 自动计算输入的数学公式。

支持的属性

简称名称描述
XX 坐标图层 X 坐标
YX 坐标图层 X 坐标
H高度图层高度
W宽度图层宽度
锚点图层尺寸改变时的锚点位置

锚点

这里的“锚点”与 Photoshop 自由变换工具的锚点的效果一致:

锚点

2.形状

UI-DNA 的形状可以支持几乎所有的形状属性,相比于 Photoshop UI-DNA 的形状属性:

  • 色彩输入框直接使用 #Hex 格式的色彩代码。
  • 强大的色彩选择器

虚线

虚线

UI-DNA 的虚线属性就是Photoshop 描边选项的虚线选项:

Photoshop 描边选项 虚线

3.文本

目前文本属性的字体选择器还没完成(fonTags2),只能显示和输入字体标识名称(postscript name),需要用 Photoshop 自带的字体选择器来切换字体。

相比 Photoshop :

  • 不用切换到文本工具就能修改文本图层内容

不用切换到文本工具修改文本图层内容

4.智能对象

智能对象

UI-DNA 可以直接编辑智能对象的链接文件,并且改变链接的文件时会自动调整大小。

5.图层样式

图层样式

UI-DNA 的图层样式选项卡目前提供了 CSS 风格的“图层阴影”的快捷属性,也就是并非通过阴影角度与距离而是用 X 、Y 轴偏移来控制阴影位置。你可以不用打开 Photoshop 自带的图层样式面板就可以添加和编辑图层的阴影。

CSS 风格的阴影属性

而另一个“图层样式 - 全部”属性的作用则是为了实现用变量来共享图层样式:

把全部图层样式赋值到变量中

6.自定义

自定义子面板

自定义子面板中可修改图层名称、图层不透明度、填充不透明度、混合模式等图层属性。另外还有 UI-DNA 独有的为图层扩展出的额外属性,比如标签、别名、名称组。

外观

图层不透明度、填充不透明度、混合模式。

信息

图层名称、图层颜色(在图层面板中提示用的颜色)。

额外

额外属性不属于 Photoshop 图层的原生属性, 是 UI-DNA 内部记录的属性,其可以记录一些额外信息供 UI-DNA 的功能使用。

比如标签可以输入容易标签,(多个标签用 de >,de>或 de >,de> 分隔),在“选中图层子面板-菜单-寻找标签”功能中就可以根据图层标签来寻找并选中图层

把全部图层样式赋值到变量中

别名与名称组暂时还没有功能引用它们,可以作为图层的备注使用,记录任何信息。

色彩选择器

UI-DNA 中可以使用 Photoshop 自带的拾色器,也可以使用 UI-DNA 的色彩选择器( Color Cylinder),UI-DNA 的色彩选择器。

 
单击下方链接下载脚本 插件:
422 UI设计师必备 Photoshop图层属性变量插件 UIDNA-0.0.18-windows-installer.rar

UI-DNA 属性是 UI-DNA 的核心功能,它提供了一个编辑图层属性的面板,修改其中属性能立即生效,与 Photoshop 原生面板一样。在此之上 UI-DNA 属性面板还提供了原生面板不具备的各种进阶功能。


变量与表达式
用变量辅助设计,修改一处,处处生效
双向绑定,每个属性值都可以设置为变量,也可以把属性值赋值给变量
在文本框中用 "{{ 表达式 }}" 来渲染文本模板
通过变量与表达式让你能实现动态、易修改的设计
  评论这张
 
阅读(39)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017