最终版!值得每个设计师收藏的《完美像素使用手册》之软件技巧篇 - 优设网 - UISDC

最终版!值得每个设计师收藏的《完美像素使用手册》之软件技巧篇

2016/08/14 16531评论区

pixel-perfect-precision-skills-1

这本纪念碑谷团队出品的《完美像素使用手册》终于全剧终了!前三集我们聊了很多设计原则,第四集加了PS的操作技巧,今天完结篇继续放出60多个PS和AI的实战方法,对这类最全面,最毫无保留,最生动有趣的界面设计指南,强烈建议收藏学习。

虽然这个册子确实出来挺久了,大概14年的时候优设网就有推荐过它:http://www.uisdc.com/pixel-perfect-precision-handbook(内附PDF英文原版),但里面的知识依然没有过时。

前两集回顾:

  1. 《值得每个设计师收藏的《完美像素使用手册》之原理篇》
  2. 《中文版来了!值得每个设计师收藏的《完美像素使用手册》之细节篇》
  3. 《第三集!值得每个设计师收藏的《完美像素使用手册》之易用性篇》
  4. 《第四集!值得每个设计师收藏的《完美像素使用手册》之软件技巧篇》

对象颜色

设置形状图层和文本时,最好用对象本身的设置来改变颜色,而不是用颜色叠加。这样做的好处:一是改颜色时候不需要加载图层样式窗口,二是在图层工具栏里也更容易找到对象。如下图。

under201608141

对象渐变

渐变效果也是一样的道理。用渐变填充图层,尽量不要用图层效果。

under201608142

对象渐变(仿色)

不管用什么方法做渐变,Dither(仿色)选项都要选。这样颜色渐变会看起来更自然,不会有拼接的感觉。PS CS5一个图层只能做一次渐变仿色,CS6及以上版本,可以做两次。

under201608143

图层样式简洁

不要把一个对象的图层效果分成多层做。要做在一个图层里,看起来整齐,复制粘贴的时候也方便。

under201608144

缩放图层效果

可以通过Image size(图像大小)来缩放整个文件大小,但是有时可能需要单独缩放某些图层看效果。如果缩放其中一个对象,样式不会自动调整,但是能通过Scale Effects(缩放效果)来改变。(需要知道原始图形的增加或者减少比例才能使两个匹配)这个选项可以通过右击当前图层的fx找到。

under201608145

图层效果(描边)

乍一看好像只有通过“描边”选项才能实现描边效果。其实还有很多其他方法,比如,使用内、外发光或阴影,设置阻塞值为100%,就OK啦!描边是在对象外缘,内阴影和内发光在内侧,外发光和投影在外侧。不过圆角或者弧形的阻塞值不要太宽,会导致边缘粗糙。

under201608146

图层效果vs矢量描边

如果想画出来的图看着舒服,得在形状图层上加一个矢量描边(CS6才可以哦),这样画出来的边缘更细腻(宽度越宽效果越明显),而且还可以选择各种款式:圆、方、斜边、虚线!如果是给iOS做设计的话,这就太实用了,可以把non-Retina描边设置成0.5px,直接缩放到0.5px;如果是Retina的话,可以直接缩放到1px。

under201608147

复合矢量图形

如果要画复合矢量图形,直接用Illustrator要比在PS里面复制粘贴形状方便得多。在Illustrator里面把原始边描好直接粘贴到PS里面就好了。如果矢量对象不止一个形状,比如说一个多颜色的图标,那就需要粘贴成智能对象了。

under201608148

从Illustrator粘贴

从Illustrator粘贴形状图层可能会把对象从原位置移动个0.5px,这样边缘就比较模糊(CS6及以上版本不存在这个问题),需要手动微调。

under201608149

图层混合模式

做效果时,不要把图层混合模式用在之后要合并的图层上。下面例子中“强光”被输出成了一个单独的图层,所以单独显示的时候,就不能显示混合效果,变成了一个白色到黑色的渐变。

under2016081410

图层混合模式

要重做效果,最好的解决办法就是用的图层跟下方的图层独立开来。

under2016081411

文本对齐

under2016081412

段落

如果有一个整段文字,那就把它放进一个整个的段落文本框里,而不要人工换行(点文本)。如果文字和字体改变的话,这个就要重新设置了,但是如果段落文本框画得大小合适,文本就会自动变形。

under2016081413

转换成段落文字

在文本命令下能把点文字转化成段落文字,也能反转。在PS CS5里面,这个在图层-文字-菜单命令里。

under2016081414

连字符

大部分设备不支持连字符,所以设计里最好就不要用了。

under2016081415

间距

默认的间距有点太挤了,所以要挪点空出来。上面的例子中把自动设置改成了20pt,是不是看起来舒服多了~

under2016081416

文本修边

PS里面文本修边有很多种方法。可以每种都试试看看哪个渲染出的效果最好。“消除锯齿-犀利”的效果不错。

under2016081417

文本修边(系统)

PS CC里面有修边选项,能够复制操作系统的次像素渲染,这样就能看出,假设把文本放在浏览器里是什么样子。PS里面的次像素是灰度,不是RGB。

under2016081418

列表

创建列表,特别是旁边有图的列表,把所有的描述放在一个文本框里比每行字都单独用一个图层要好,这样对齐起来也方便,以后更新也好用。

under2016081419

快速预览

手机的分辨率比电脑更高,意味着设计的尺寸要小一点。把文件缩放成手机屏幕大小,然后看看是不是有些东西尺寸要调调。

under2016081420

图层面板(选项)

PS默认会把每个复制图层的名字都会加一个”copy”(副本)。神烦。可以在图层面板选项里把上面蓝框框里的三项都点掉,这样就好了。

under2016081421

命名图层

命名要合理,很系统的命名别人看起来方便,客户也觉得你很专业。建议:建一个命名一个,不要到最后再一起改。

under2016081422

整组图层重命名

整组图层重命名脚本。貌似很有实用的样子。

under2016081423

图层排序

命名要合理,排序也很重要。从上到下,从左至右,就跟看书一样。

under2016081424

搜索

PS强大的搜索功能,你值得拥有。比如,命名图层用前缀btn,icn之类,可以迅速过滤它们的内容,如果需要更新许多按钮的风格,这招就方便多了。当然还有许多搜索类型,比如说“类别”,“效果”,“图层颜色”等等。都可以一试。

under2016081425

颜色编码

这就是一个图层颜色编码的例子,一般核心设计没有颜色标签,右击任一图层前面的小眼睛选择颜色。

hbbb20160814

展开图层效果

图层效果都展开来有点乱乱的,所以还是叠在一起看比较方便。

under2016081427

清除所有空图层

“文件 – 脚本”菜单里有一个删除所有空图层的命令,可好用了!

under2016081428

移除没有使用的FX

做完设计以后,很可能还有很多没有上的效果。通常需要一个一个删除,但是用了Remove Unused FX这个插件,一键清除,一步到位。

under2016081429

锁定图层

锁定图层能保护对象。但是如果你要修改或者删什么东西,又不知道哪个图层被锁定了就比较头疼了。

under2016081430

图层复合

图层复合可以在一个文件里存储设计的不同变形版本。

under2016081431

生成器

PS CC里面最好用的一个功能,只要加个文件扩展名就能输出图层或者整个组。在“文件 – 生成菜单”里面操作。

under2016081432

输出脚本

不用PS CC也能输出,可以用我们ustwo的Crop&Export脚本。

under2016081433

另存为Web格式

看看两个不同的PNG文件有啥不一样?“另存为”存出来的文件比“另存为web格式”的要大32kb,当然选后者比较合算。

under2016081434

减小文件大小

如果输出的文件不需要透明度,那可以转成8bit的PNG文件。下面的例子里,文件质量没有损耗,但是文件大小缩小了一半多。

under2016081435

ImageOptim

一款适用与mac操作系统的软件(前端开发中必备的图片压缩软件)。

under2016081436

减少PSD文件大小

减少PSD大小的一个快速的方法就是隐藏所有的图层。如果设计要求显示某些元素,那可能就不方便了。当然还可以用ZIP压缩PSD文件,这样能缩成原始大小的10%。

under2016081437

RGB(565格式)

有些设备不像电脑屏幕一样颜色多,渐变和过渡可能就看不大出,为了避免这个,可以用 Ximagic ColorDither 插件把图转成565格式。

under2016081438

565(批量处理)

很多文件一起做565过滤很费劲,所以可以用“动作和批处理工具”把这个过程自动化。

照常输出文件,然后把用565的动作“记录”保存,输出结果用“另存为web格式”(省空间),不保存,关闭文件。然后,在这样的设置环境下,运行批处理工具里的“动作”。所有过滤处理过的文件就都会输出到原先的另存为Web文件夹里。

under2016081439

描边

有时弧形的1px描边看起来会比较单薄,为了增强存在感,又不实际增加px值,就增加一个“发光”的效果。差别很小,但是多少有点效果。

under2016081440

圆圈淡出

圆圈淡出用“描边”功能很容易就能做出来。填充类型:渐变色填充,样式:角度。

under2016081441

快闪

让一个对象快闪,可以用“内阴影”效果,“低透明度”。注意一点,因为这个形状是以母图层的上沿为基础的,所以任何不直的地方都会直接被快闪代替。

under2016081442

内发光加入杂色

用内发光效果能够给一个对象添加简单的杂色文理。设置“来源”为“中心”,“大小”为0,然后可以通过杂色设置来调节数量。

under2016081443

提取logo

有时候logo不是现成的,就只能自己抠了。当然还可以找找公司网站看看有没有PDF文件能下载的。用Illustrator打开,提取矢量logo。

logo20160814

星场

画笔选项可以设置出不同效果,通过改变“大小”和“透明度”能出不同的效果。

under2016081444

under2016081445

样式

增加样式和纹理:画几个小方格,用正方形选区选中,然后选择菜单里的“编辑 – 定义图案”,就可以在图层样式 – 图案里面找到刚刚自定义的图案了。

under2016081446

Kuler插件

配色什么没想法?试试Kuler吧,这个插件能够让你看看别人的配色,自己还能自创配色呢。

under2016081447

字符浏览器

under2016081448

键盘浏览器

fk201608141

路径快捷键

有很多路径快捷键可以提高工作效率。选择两个形状图层,按“Command + E”绘制路径后,按“+”或者“Shift”添加另一个路径。按“-”或者“Option”删除一个路径。绘制好后,就可以通过选择再按“+”“-”号来增添或者删减新路径了。

fk201608142

键盘快捷键和菜单

用“编辑-键盘快捷键”来设置个性化的快捷方式。下图就是“对齐-垂直居中”和“对齐-水平居中”的快捷键。另外一个常用的就是把“Command+Q”这个快捷命令移除,避免意外退出PS。

fk201608148

矢量工具不顶用时就要用Illustrator了。主要用于创建复杂图形,再输出到PS样式里。这样功能性和效果都更强了。

Illustrator颜色设置

打开“编辑-颜色设置”,把“工作空间”的“RGB”设置成“monitor RGB-Display”,同时,关掉“色彩管理”下面的“RGB”选项。

fk201608149

预设

在Illustrator里有很多预设可以改动。首先,把键盘增量设置为1px,这样光标的移动就按这个标准量了。然后,打开“单位”选项,把“通用”和“描边”都设置成“像素”,这样所有的大小都是用像素来丈量的。字体就不管它了,还是按照“pt”设置。

fk2016081410

网格

跟PS一样,10×10的网格可能比较好用。这些设置可以在“预设 – 参考线和网格”选项里改。

fk2016081411

对齐到网格

跟PS一样,Illustrator也有对齐到网格这个工具,在“视图”菜单栏下。

fk2016081412

智能参考线

有时候需要突破像素网格的限制,可以试试智能参考线。比如下面的例子,圆上45°位置还需要一个锚点。可以在图下方放一个三角形,打开智能参考线,钢笔工具就能在两个图形重叠的地方形成一个锚点。

fk2016081413

精确

变形窗口是设计师的好伙伴!有了这个窗口,你就可以看看图形或者哪怕一个点大小、位置设计得对不对。同时宽度和高度选项里面一改动,其他的尺寸也会相应变动以保持比例。

fk2016081414

像素对齐网格

使用时要确保菜单栏里面的“新对象对齐像素网格”是关着的,对于已有的图形,像素网格对齐这个框没有勾选。因为一旦勾选了像素网格对齐,可能一不注意,描边时对象就开始乱飘了。

fk2016081415

像素预览

这里也要谨慎。如果点了“视图-像素预览”,可能像素不是很精确的形状看起来都像是很精确的似的。

fk2016081416

预览模糊

不必过度担心,有时候即使尺寸以像素来算的,Illustrator输出的图形边缘还是可能模模糊糊的,看起来像个Bug把,但有一点好,如果图形导进PS里面就不模糊了。

fk2016081417

结构

如果不是要用来画图形,Illutstrator里不要每个图层都命名,但是要有条理,不能一股脑全铺开来。

fk2016081418

能看到最后的朋友,给自己鼓掌~休息一下吧

pixel201608031312

欢迎关注译者微信公众号:UIBANG

uibangqr

译文地址:uik.me

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量160万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/pixel-perfect-precision-skills

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 设计师干货 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 海报设计 用户体验设计 设计规范 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里