配图1

UI设计提速秘笈:Photoshop CC使用技巧

KAKA剑

作为工作繁忙的设计师,我们一直追求高效、敏捷地完成设计任务,那究竟要如何提升UI设计效率呢?本文将从软件、习惯、技巧等三个方面来阐述笔者的一些心得总结。

软件篇

工欲善其事,必先利其器。UI设计要更有效率,捷径就是从最常使用的Photoshop(下文简称PS)软件出发。

PS软件更新很快,但出于对版本稳定性的追求,笔者并没有新版本出来就马上更新的习惯。而PS CC版本的出现,却改变了笔者的看法。用好PS CC,会在设计效率方面带来很大提升。

001002

 

1.Photoshop CC精彩新功能

  • 多重形状和路径选择

使用Photoshop CC提供的多重形状和路径选择,可以同时选取多个路径、形状和矢量蒙版,不需按多次鼠标即可完成更多任务。即使在拥有许多路径的多图层复杂图像文件中,也可以使用新的滤镜模式,直接在画布上锁定路径 (及任何图层)。

003

  • 简易绘制虚线

PS CC不需要手工计算像素来进行绘制虚线,虚线绘制变成基础控件。

005

  • 文字优化

旧版本的PS在使用微软雅黑字体时,无法清晰显示。而PS CC 增加了WindowsLCD的文字选项,编辑文字时选择WindowsLCD,就可在PS中获得文字外观的真实预览效果。

004

  • 背景存储与自动复原

使用PS CC,能够在背景储存大型的 PS 档案,同时还可继续工作;也可透过全新的自动复原选项保留所做的编辑,而不会中断工作进度。

006

  • PS软件效率更高,大型文件处理更快

PS CC对代码进行了优化,软件算效率有了很大的提升。

007

  • 可编辑的圆角矩形

PS CC可以生成4个不一样圆角的矩形,圆角设置更加精准。

008

  • 更精细的描边

描边能精确到0.x,能做更加精致的效果。

009

2.简单设置Photoshop CC

说了这么多好处,也谈谈问题。在使用PS CC的过程中,笔者经常遇到假死、闪退、崩溃的问题。出现这些问题的主要原因是目前大部分用户使用的都是机械硬盘,而从PS CS6开始就增加了一个后台储存的新功能,该功能的好处是定时给你的psd文件进行保存,但这个功能在设计的时候并没考虑到目前大部分用户使用的都是7200转速的机械硬盘。我们平时做设计稿很有可能同时打开多个甚至数十个psd文件,如果当前运行的十个psd文件都同时储存,而刚好我们也在进行PS操作,那出现假死、闪退、崩溃的机率就非常大了。

所以为了使用更稳定,可以在使用PS CC前先做一下如下设置,关闭后台储存功能。

010

3.Photoshop CC bug一览表和解决方法

除了关闭后台存储来降低软件崩溃的问题,这里笔者还根据工作经验,汇总了一些PS CC的常见问题。部分问题可以解决,但仍有部分问题只能留待下个版本的更新优化。

011

 

习惯篇

1.同一个项目尽量在一个psd里

在项目中统一功能块、功能尽量保存在同一个psd里,日后使用会更加方便,节约在不同psd文件里查找时间。

014

 2.时刻保持图层命名、归类

良好的归类、图层、命名习惯,在团队合作中psd源文件可用度效率更高,日后修改也会节省时间。

015

3.尽量使用智能对象

智能对象好处在于合并对象后不破坏对象,同时可以让这个合并后的对象具有可编辑特性,同时具备同步更新功能。

016

4.在文件夹中加蒙版,操作一步到位

在文件夹加蒙版,再次修改的时候只需要把图片放入文件夹即可,可以减少重复调整蒙版等工作。

017

 5.输出尽量简单

如果项目有命名标准建议以标准来命名,如项目没命名标准建议用简单易懂的中文命名方式命名。

018

 6.安装psd缩略图补丁

安装PSD缩略图补丁,一目了然PSD文件的内容,提高效率拒绝猜测。

019

 

技巧篇

 1.精简快捷键

如果你肯花一点点时间来练系这些快捷键,腾出你闲置的左手放到键盘上,相信这会让你的工作更加快捷高效。

013

 2.设置隔离图层快捷键

设置隔离图层快捷键,好处在于进入了隔离图层后不会对其他图层进行误操作。

技巧:进入隔离图层后,按Ctrl可以进行对画布中的其他图层加入此隔离图层。

021

 3.色阶的解决办法

我们做效果图的时候经常会使用大面积渐变,时常会出现比较严重的色阶问题,通常出现这些明显色阶的时候,可以通过使用高斯模糊对色阶进行模糊化处理。

022

 4.文本框的好处

当你需要处理一大段文字时,文本框的好处就会体现出来,它会永远保持你字体的宽度整齐展现。

023

5.对齐像素

平时画icon的时候会常常使用到二分一、三分一或者其他比例的线条,所以一般会对网格对齐功能进行关闭。而做界面的时候我们要求更加精准的界面,所以通常会开启网格对齐功能。

开启与关闭网格对齐方法:Ctrl+K 勾选“将矢量工具与变化和像素网格对齐”

024

 6.图形可以合并

PS CC图形图层集体合并后,仍然是可编辑图形。

技巧:合并图层快捷键Ctrl+e,能把选中的图层快速合并。

025

 

说了这么多,PS CC确实是一个有助于提升UI设计效率的好软件。当然,以上所述仅为笔者个人经验总结,如有错漏欢迎指出,愿与大家交流!

 

Tags: , ,

KAKA剑
KAKA剑
上一遍
下一遍
QQ空间 腾讯微博 新浪微博 Facebook Google+

相关推荐

留下你的想法吧

  1. faninx says:

    1. Photoshop CC bug一览表和解决方法 中的错误3, 可能和公司网络有关系, 如果在正常网络下, 一般会出现一个Adobe Community Help的窗口, 不会造成死机(虽然也很讨厌); 但是由于公司网络第三方应用不能访问网络, 所以这个窗口弹不出来, 就有了错误&PS崩坏;
    2. 同一个项目尽量在一个psd里, 这里推荐用下图层复合来区分不同状态, 挺方便的;
    3. 精简快捷键中, 新建图层是Ctrl+Shift+N

  2. shangrenxi says:

    作为ps用户使用了这么多年的ps,有一点我要纠正一下,也是许多设计师会经常出现的问题。有不少的设计师会经常遇到ps崩溃的情况,做着做着ps就死了,这下都还没来得及保存资料,难道又得重做吗?我知道有人又会说,常按ctrl+s!我知道!我也会常按,但ps崩溃是不定什么时候发生的,所以遇到当遇到崩溃或不够足够RAM,这时候自动备份功能就显得格外重要了。
    LZ为了性能而把自动备份给关了,万一遇到啥情况,资料哪里找去啊!下面传上我的方法:遇到ps崩溃的时候,大多情况都能找到之前的数据,包括1.不能完成“存储”命令,因为没有足够的内存。2.无法现实联机帮助。请连接到internent这两种常见的情况。
    假死或崩溃,先不要急着点确定,不然ps会自动关闭,你的资料就会从temp清空。正确做法是:要开了自动备份,如果是选了5分钟自动保存,那么崩溃之后5分钟后打开资源管理器(ctrl+shift+esc)找到photoshop.exe强行关闭,然后再打开ps,等着你的资料完好无损吧!

  3. shangrenxi says:

    关于开关对其网格功能:可以转到这里去下载插件,把Turn Snapping Off.jsx和Turn Snapping On.jsx这两个脚本放到ps/persets/Scripts,然后重启ps,打开快捷键设置页面,对file/scripts设置快捷键,我的快捷键是:command+p(开,原本是打印的快捷键,不常用,所以改了。),command+shift+p(关)

    将同一个项目的所有的页面都放在一个psd里,我不太推荐。这里有两个方面:
    1.文件尺寸将会特别臃肿。
    2.不方便导出预览图。
    正确的用法是:一个项目的所有元素可以做成一个控件表,需要的时候打开psd拖出去,也能一览所有的效果是怎样的,这样做对于团队和交接项目来说,是最快最方便的事。

  4. shangrenxi says:

    忘了贴地址了,补上:
    动作集介绍http://bjango.com/articles/actions/
    直接下载地址是:https://github.com/bjango/Bjango-Actions/zipball/master
    英文好的同学就详细看一下,这个动作、脚本非常地好用,做UI的同学必须关注!

  5. 很好,说得太棒啦

  6. 刘晓辉 says:

    不是正版的都没有权说那么多bug问题,呵呵

  7. JASKNi says:

    在这里找到了一个问题的答案, 就是「隔离图层」的存在。

    这次 CC 的更新没有多去了解新特性, 时长突然就把一个图层弄成「隔离图层」了, 很疑惑到底是怎么一回事… 所以很感谢。

    不过有一个情况我想你应该也有遇到: 当隐藏一个组以后, 只要里边的图层没有一并隐藏, 那么它们依旧是可以被选取到的, 在全屏工作模式下, 你甚至不知道它们会选择到了, 从而会导致错位….

    目前并未找到除了锁定以及全部隐藏之外的解决办法, 不知你是否有注意到这个问题?

  8. missy says:

    兄弟姐妹们,能否共享下已有的PS CC安装包呢?:)

  9. Keystion says:

    简易绘制虚线 基础控件找哪里找!

  10. PS CC安装包呢?

  11. t says:

    看完之后发现 CSS 实在太强大了。。。

  12. t says:

    Photoshop CC 尚未解决的问题。

  13. 杨德意 says:

    关于第2种出现错误,在首选项里面性能加大空间就行。但是不要把所有盘都设置成暂存盘。

  14. stiven says:

    蛋疼的是合并图层后给你添加个涂层名称+(合并)字样 画蛇添足

  15. mookey says:

    今天发现如果取消Photoshop CC帮助的快捷键(F1),似乎就不会因为联机帮助问题而崩溃了。但还有待继续测试。

  16. 秀设计 says:

    很系统,不错,学习了

  17. JIMMY says:

    求有没有PS导出UI后能自动消除纵横的渐变像素的方法?其实也就是消除锯齿·谢谢了啊·

  18. swing says:

    关于PSD图片浏览,adobe很早就出了bridge这个软件,我从8.0开始用,那时候就已经有了,完整版的ps自带的,几乎能浏览所有的图片格式,而且还可以做图片管理和图片调整,根本不需要下载插件的。

  19. 昨日卖鱼 says:

    大哥,用PS的时候,路径选择的时候,偶尔出现路径选不中的情况,(我通常是按一下U,然后那个路径就出现了,但有时候也是不灵,这是不是BUG啊)有没有遇到过啊?怎么解决?

  20. ryoh says:

    技巧篇 3.色阶的解决办法
    其实不用这样,渐变是时候勾上旁边的“仿色”复选框就OK了。

  21. yang says:

    “多重形状和路径选择”, 请问那里能设置回cs6的办法吗,太难用了

  22. 杨十八 says:

    描边能精确到0.x,能做更加精致的效果。
    你确定?最小单位不是pixel?这个地方太不专业了吧。