【设计课】UI设计提速秘笈:Photoshop CC使用技巧
| 视觉中国 旗下创意社区-视觉me
视觉中国旗下创意社区
正在加载 ...
【设计课】UI设计提速秘笈:Photoshop CC使用技巧
【设计课】UI设计提速秘笈:Photoshop CC使用技巧
来源：视觉中国
发布时间：
作为工作繁忙的设计师，我们一直追求高效、敏捷地完成设计任务，那究竟要如何提升UI设计效率呢？本文将从软件、习惯、技巧等三个方面来阐述笔者的一些心得总结。软件篇工欲善其事，必先利其器。UI设计要更有效率，捷径就是从最常使用的Photoshop（下文简称PS）软件出发。PS软件更新很快，但出于对版本稳定性的追求，笔者并没有新版本出来就马上更新的习惯。而PS CC版本的出现，却改变了笔者的看法。用好PS CC，会在设计效率方面带来很大提升。
1.Photoshop CC精彩新功能多重形状和路径选择使用Photoshop CC提供的多重形状和路径选择，可以同时选取多个路径、形状和矢量蒙版，不需按多次鼠标即可完成更多任务。即使在拥有许多路径的多图层复杂图像文件中，也可以使用新的滤镜模式，直接在画布上锁定路径 （及任何图层）。
简易绘制虚线PS CC不需要手工计算像素来进行绘制虚线，虚线绘制变成基础控件。
文字优化旧版本的PS在使用微软雅黑字体时，无法清晰显示。而PS CC 增加了WindowsLCD的文字选项，编辑文字时选择WindowsLCD，就可在PS中获得文字外观的真实预览效果。
背景存储与自动复原使用PS CC，能够在背景储存大型的 PS 档案，同时还可继续工作；也可透过全新的自动复原选项保留所做的编辑，而不会中断工作进度。
PS软件效率更高，大型文件处理更快PS CC对代码进行了优化，软件算效率有了很大的提升。
可编辑的圆角矩形PS CC可以生成4个不一样圆角的矩形，圆角设置更加精准。
更精细的描边描边能精确到0.x，能做更加精致的效果。
2.简单设置Photoshop CC说了这么多好处，也谈谈问题。在使用PS CC的过程中，笔者经常遇到假死、闪退、崩溃的问题。出现这些问题的主要原因是目前大部分用户使用的都是机械硬盘，而从PS CS6开始就增加了一个后台储存的新功能，该功能的好处是定时给你的psd文件进行保存，但这个功能在设计的时候并没考虑到目前大部分用户使用的都是7200转速的机械硬盘。我们平时做设计稿很有可能同时打开多个甚至数十个psd文件，如果当前运行的十个psd文件都同时储存，而刚好我们也在进行PS操作，那出现假死、闪退、崩溃的机率就非常大了。所以为了使用更稳定，可以在使用PS CC前先做一下如下设置，关闭后台储存功能。
3.Photoshop CC bug一览表和解决方法除了关闭后台存储来降低软件崩溃的问题，这里笔者还根据工作经验，汇总了一些PS CC的常见问题。部分问题可以解决，但仍有部分问题只能留待下个版本的更新优化。
习惯篇1.同一个项目尽量在一个psd里在项目中统一功能块、功能尽量保存在同一个psd里，日后使用会更加方便，节约在不同psd文件里查找时间。
2.时刻保持图层命名、归类良好的归类、图层、命名习惯，在团队合作中psd源文件可用度效率更高，日后修改也会节省时间。
3.尽量使用智能对象智能对象好处在于合并对象后不破坏对象，同时可以让这个合并后的对象具有可编辑特性，同时具备同步更新功能。
4.在文件夹中加蒙版，操作一步到位在文件夹加蒙版，再次修改的时候只需要把图片放入文件夹即可，可以减少重复调整蒙版等工作。
5.输出尽量简单如果项目有命名标准建议以标准来命名，如项目没命名标准建议用简单易懂的中文命名方式命名。
&6.安装psd缩略图补丁安装PSD缩略图补丁，一目了然PSD文件的内容，提高效率拒绝猜测。
技巧篇1.精简快捷键如果你肯花一点点时间来练系这些快捷键，腾出你闲置的左手放到键盘上，相信这会让你的工作更加快捷高效。
2.设置隔离图层快捷键设置隔离图层快捷键，好处在于进入了隔离图层后不会对其他图层进行误操作。技巧：进入隔离图层后，按Ctrl可以进行对画布中的其他图层加入此隔离图层。
&3.色阶的解决办法我们做效果图的时候经常会使用大面积渐变，时常会出现比较严重的色阶问题，通常出现这些明显色阶的时候，可以通过使用高斯模糊对色阶进行模糊化处理。
4.文本框的好处当你需要处理一大段文字时，文本框的好处就会体现出来，它会永远保持你字体的宽度整齐展现。
5.对齐像素平时画icon的时候会常常使用到二分一、三分一或者其他比例的线条，所以一般会对网格对齐功能进行关闭。而做界面的时候我们要求更加精准的界面，所以通常会开启网格对齐功能。开启与关闭网格对齐方法：Ctrl+K 勾选“将矢量工具与变化和像素网格对齐”
6.图形可以合并PS CC图形图层集体合并后，仍然是可编辑图形。技巧：合并图层快捷键Ctrl+e，能把选中的图层快速合并。
说了这么多，PS CC确实是一个有助于提升UI设计效率的好软件。当然，以上所述仅为笔者个人经验总结，如有错漏欢迎指出，愿与大家交流！
微信扫一扫
北京,朝阳区 编辑/网站运营
微信扫一扫
精选图片每日推送!
Copyright &
Shijue.me Incorporated. All rights reserved.
津ICP备号-2北京市公安局朝阳分局:京公网安备07
最佳分辨率，建议使用Chrome、Firefox、Safari、ie9版本浏览器。
下次自动登录
使用第三方帐号直接登录嘘嘘&|&&|&
[…] 来源：/log066 […]网页设计师必备的11款PS插件_UI入门实例教程
作者:发布时间： 13:37来源：点击：次
温馨提示：图片质量较高，若加载慢请耐心等候！
&　　时至今日，各种工具和插件已经多如繁星，而且通常最好和最有用的工具都是收费的。为此，我们专门整理出了这些免费优质的Photoshop 插件，希望能对网页设计师和爱好者们有所帮助。
　　Layrs Control
　　适用版本：CS6，CC
　　这是一款基础的PS插件，为你提供日常使用的支持。在这款图层控制插件的帮助下，你可以轻松删除无用的图层效果，删除空白无效的图层，栅格化智能对象，还可以根据扁平化的设计规则将视觉元素扁平化。在扁平化流行的今天，也许这款插件正是你所需要的。
　　Cut&Slice
　　适用版本：CS6, CC
　　这是一款专门用来切割布局、导出切片并为不同设备设备输出切片的便捷工具。对于需要考虑多尺寸屏幕的网页设计师而言，这款工具堪称神器。Cut&Slice在导出切片的时候，会根据所需的设备类型进行单独优化。当图层命名符合特定语法规则的时候，Cut&Slice会根据输出的设备类型，自动地为单个图层或者一组图层附加动作，包括裁剪、缩放、检测按键状态等。
　　Render.ly
　　适用版本：CC
　　Render.ly的基础功能和Cut&Slice的有点相似，不过Render.ly拥有更多实用的功能。它允许用户在布局和图层上留下评论，然后同步到云端，在网上发布。Render.ly的另一个好处就是，它非常聪明地优先输出更容易处理的元素，以提高处理图层切片的速度。
　　CSS3Ps
　　适用版本：CS3+
　　CSS3Px是一款能将PS的形状与样式转化为CSS3和SCSS/SASS的优秀工具。它的处理范围非常广，包括纯文本图层，内阴影、外发光效果，还有各种图形，这也就意味着它可以将按钮的内外阴影，边缘弧度都用角度都转化为样式表。
　　这款插件是基于云的，这是优势，也存在问题。它的优势在于无需通过重新安装来获取新的功能的特性，但是同样的，它的缺陷也来自云，CSS3Ps需要连接互联网，因为所有的东西都需要在服务器上生成再输出。
　　Composer
　　适用版本：CS5, CS6, CC
　　这款名为Composer的插件让你可以同时对多个不同的图层进行相同的操作，这可以让设计师从可怕的繁琐工作中解脱出来。虽然它在操作数上有限制，但是它会覆盖你所做出的任何修改。
　　GuideGuide
　　适用版本：CS5, CS6, CC
　　如果你需要制作多种不同尺寸样式的引导页或者说明，那么这款插件是你的不二选择。
　　WebFont
　　适用版本：CS5, CS6, CC
　　一个网页设计师要做出令人惊艳的设计作品，往往会用一些非常用的字体，不幸的是，这些字体并不会在所有浏览器中都正常显示。通过这款插件，你可以直接在PS的窗口中&试用&哪些web字体，看看它们实际显示的效果。这款插件直接接入到了Google字体和weblnk调用了上千款web字体。当然，英文字体居多。
　　Divine Elemente
　　Divine Elemente是最令人激动的PS插件之一。Divine Elemente这个项目所针对的对象并不仅仅是专业的网页设计师，还希望能造福于那些仅了解PS基础知识的博客和网站管理员，因为Divine Elemente号称是旨在创建&wordpress和Photoshop之间的隐形桥梁&。
　　在Divine Elemente的帮助下，任何人都可以创建wordpress主题，无需专门的前端/后端知识。你所需要做的，就是装上插件，按照内置的蓝图创建布局，然后将你的PS设计转化成HTML/CSS/PHP代码。非常惊艳吧!这款插件唯一的缺陷在于它目前仅仅只适用于windows系统。不过，使用Mac的同学也不用担心，因为开发商表示在不久的未来将会发布Mac的版本。同时，开发商还承诺了更多的好处：搜索引擎优化，使用HTML编辑器，XAMPP支持，兼容性提升等等。
　　这款插件可以免费试用，有付费版本，而付费版本中可以享受升级、高级主题/插件等一系列福利。
　　Random User Generator
　　适用版本：CS6, CC
　　当创建网页布局的时候，常常需要同时创建示例用户，这些示例用户得拥有逼真的名字的照片，这个时候，你就需要这款插件。只需要轻轻一点，插件会自动为你生成一个拥有名字和头像的随机用户，看起来还满逼真的样子，你再也不用为此到处翻找了。当你在做网页版面编排设计的时候，随机生成的人物角色可以很好地填补需要用户头像和基本信息的位置。这款插件是在RandomUser API的协助下完成的。
　　BlendMeIn
　　适用版本：适用版本：CS6, CC
　　BlendMeln可能是最受网页设计师追捧的PS插件之一。当网页设计成为了你每个项目必须的组成部分之时，如何时刻把控并运用高质量网页元素就显得很重要了。于是BlendMeln的重要性就凸显出来了：它提供了许多的设计资源，并且都是分层的PSD文件和矢量的AI文件，装上它，你所需要做的就是根据关键词来搜索，并且无需离开PS或者AI的窗口。不论你是PS重度用户还是新手，这种插件都是你必装的吧?
　　FlatIcon
　　适用版本：适用版本：CS5, CS6, CC
　　快到碗里来!装上Flaticon插件，超过38000个扁平化的图标就到你的PS窗口中去了!这款插件是网站制作的，它也是目前网上最大的分层PSD资源站。不要错过哦~
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
UI界面欣赏