如何提高设计出图效率

设置

【首选项】中的设置

PS中的设置

常用模数(手机端、PC端)

模数的概念:

在建筑设计中,通常选定的标准尺寸单位,所有的建筑材料、制品都以此标准尺寸长度进行协调进行设计。从而达到统一、美观、标准的设计目的。同样的思路也可以被引用在网页、app设计当中。

iOS:

iOS通常的设计都是在@2x分辨率下进行,通常以2px作为倍数作为基本模数即可,基本可以参照Android的设计模数进行调整。但注意:在iOS中常用到而Android设计中不会用切图大小 44px × 44px。

Android:

Android因为分辨率比较多,需要考虑不同分辨率的大小。因此在设计中通常使用xxhdpi作为常用分辨率进行设计。通常使用8px作为基本模数。
因此在做Android的图标设计时,icon切图通常是:
40px × 40px
48px × 48px
64px × 64px
72px × 72px
元素距通常用:64px、48px、32px
字体常用:32点、40点、48点、60点

总体来说,都是以8作为基本模数来进行设计。通常来说,按照此标准做出来的设计会比较规整。

Web:

Web相对于App的不同在于承载的物理屏幕,在web中,我们通常以5作为最小的模数单位。而常用的多是10px、20px...等5的倍数。


工具

【移动工具】的 自动选择 功能

建议使用【自动选择-图层】,因为相对来说,【群组】的选择是比较少的。


如图所示

【位移工具】V工具配合【直接路径选择工具】A 的使用

在zcool中看到有小伙伴提出不建议用【位移工具】的自动选择,原因是会无操做,选择到许多其他图层。但是作者比较喜欢用【位移工具】配合【直接路径选择工具】来使用。

通常我们需要用到【位移工具】的时是因为我们需要�** 对图层进行位移操作 **,那么可以分为,以下几种情况

  • 单一图层移动

单一图层的移动,建议使用【移动工具】简单处理即可。

此处应配图

  • 仅有多图层移动(可框选范围)

比如在web设计中,通常我们会遇到需要选择一个页面中的一整个模块进行位移,这时候最方便的不是去打开【图层】面板找图层,而是直接用【移动工具】直接左击鼠标按住拿出一个选框,被选框选中(哪怕只是局部选中)的图层会可以直接进行移动。当然,这时候如果有部分icon或者其他元素需要增减进移动的范围,那么可以配合右键选择+shift或者ctrl使用。

此处应配图

  • 仅有多图层(不在同一框选范围)

此处应配图

  • 有不可见或者复杂图层移动——放在最后因为是大招啊!!!

有时候我们在作图过程中很难免的会产生很多过程中的痕迹,比如【隐藏图层组】。而这个时候如果我们需要选择多图层,而图层之间可能还有很多【隐藏图层组】,这时我们如果按照先前的方式进行操作,结果只能是我们把很多隐藏图层都召唤出来。
因此,这个时候我们最合适的方式是使用【直接路径选择工具】进行框选选择,而再使用【位移工具】进行移动。
那么为什么不直接使用【路径选择工具】呢?因为在多图层的移动中,如果是用【路径】的方式进行移动,在作者的经验中,发现会变得无比卡顿(可能是因为计算机需要按照矢量进行运算所有位移),而且使用【直接路径选择工具】多图层的时候,会有明确的选中路径边缘显示,更加直接明了,因此最方便的方式是用【直接路径选择工具】。

此处应配图(此处应有对比图)

Ai配合Ps

在我们做Ps的时候,是不是会遇到一些小icon或者插图需要画。这时,建议使用Ai,而不是使用Ps直接画,好处如下:

  • 可以节省Ps在渲染路径过程中耗费的系统资源(一个设计中运用的路径过多的时候,通常Ps会出现明显的卡顿);
  • 可以减少Ps中的图层数量,降低管理图层成本。通常我们需要画个插图,没有一、二十个图层是搞不定的。而过多的图层在选择和管理,会降低我们的设计效率。
  • 修改调整不会因无操作,影响其他图层。只要我们在Ai导入Ps的时候选择【智能图层】贴入,那么在我们需要调整插图的时候的时候,只要选择双击插图的智能图层就可以完美切换到Ai,而在Ai中保存后,Ps会只能调整呈现结果。
  • Ai在做复杂路径的方面比Ps更加方便。在Ai中,除了定义了ps本身就有的钢笔工具,还定义了 【增加锚点】、【删除锚点】、【转换锚点】工具,这样的操作其实比单纯用ps编辑路径要方便很多。

巧用智能图层

在我们的设计进行过程中,可能会有些元素在一个页面要反复使用,而元素本身可能在后续进行微调。而如果进行微调,那么势必回带来重复性劳动。因此作者习惯在这个时候使用【智能图层】,只需要在文件中,修改一个智能图层,即可达到所有相同图层修改的结果。减少了设计中的重复性劳动。


规范的建立

从一开始就建立规范

只要是平台类项目,建议从一开始就建立视觉规范。
无论是字体大小还是用色,尤其是Android,在设计完成,有些团队需要设计给出color.xml文件,因此最好养成习惯在设计开始就进行规范的制定。
通常来说在设计的起始就考虑清楚一下问题,在设计的过程中不易出现设计规范之间的矛盾,从而影响到设计效率。
在建立规范的时候,要考虑如下几个设计点:

  • 颜色

主色
辅助色
文字突出颜色
文字描述颜色
文字提示颜色
文字连接颜色
文字警示颜色

  • 字体

主标题
副标题
普通文字大小
备注文字大小

  • 间距

左右模块之间间距
上下模块之间间距
模块内元素之间间距
模块内图片之间间距
模块内文字之间间距

  • 分割

模块内部分割方式
模块之间的分割方式

  • 按钮

大按钮
中按钮
小按钮

  • 图标
  • 表单

图层归档

何时使用 Ctrl+G

设计师的源文件通常都是惨目人睹的。而处女座的设计师无疑比惨目人更让接手的设计师抓狂。

此处应有vicky图层对比类似的图。

归档命名规范

移动端的归档命名规范

移动端通常的命名通常形式为【模块+类型+一级名称+二级名称】的形式组成

Web端的归档命名规范


文件归档

版本迭代

文件命名

文件夹整理


输出

sketch配合zeplin——设计与开发撕逼终结神器

Ps CC 15配合Ps CC 16——CC16也有爱

之所以使用CC15配合

Acdsee替代Ps导图——导图挚爱没有之一

Principle替代AE做效果演示


快捷键

Shift+位移

V+T改字体属性

Ctrl+Backspace / Alt+Backspace


避免的问题

避免少用【图层样式】

尽量多使用【路径形状】

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,567评论 25 707
  • 以PhotoshopCS6为例,共包括以下六个方面详细笔记一、PhotoshopCS6的安装二、色彩模式及其像素概...
    委婉的鱼阅读 15,572评论 63 351
  • 我的梦 藏着一个人 不敢说 忘记你的身影 听不到你的声音 我的心 留下你的位置 不想说 抚慰你的内心 望不见你的照...
    我爱吃任何鱼阅读 229评论 0 4
  • 灵感总是不经意就跳过去, 像是抓不住的兔子。 我好久没有思考了, 动起脑子来, 带起了那里的锈迹, 转动带起的咔咔...
    豆沙馅儿阅读 197评论 0 0
  • 娱乐圈里有这么一波人,年轻的时候靠各自的能耐颜值活的风生水起,老了老了还动不动领着老婆孩子秀个恩爱。比如沙溢胡可夫...
    王爷万安阅读 662评论 8 10