这本纪念碑谷团队出品的《完美像素使用手册》终于全剧终了!前三集我们聊了很多设计原则,第四集加了PS的操作技巧,今天完结篇继续放出60多个PS和AI的实战方法,对这类最全面,最毫无保留,最生动有趣的界面设计指南,强烈建议收藏学习。
虽然这个册子确实出来挺久了,大概14年的时候优设网就有推荐过它:(内附PDF英文原版),但里面的知识依然没有过时。
前两集回顾:
设置形状图层和文本时,最好用对象本身的设置来改变颜色,而不是用颜色叠加。这样做的好处:一是改颜色时候不需要加载图层样式窗口,二是在图层工具栏里也更容易找到对象。如下图。
渐变效果也是一样的道理。用渐变填充图层,尽量不要用图层效果。
不管用什么方法做渐变,Dither(仿色)选项都要选。这样颜色渐变会看起来更自然,不会有拼接的感觉。PS CS5一个图层只能做一次渐变仿色,CS6及以上版本,可以做两次。
不要把一个对象的图层效果分成多层做。要做在一个图层里,看起来整齐,复制粘贴的时候也方便。
可以通过Image size(图像大小)来缩放整个文件大小,但是有时可能需要单独缩放某些图层看效果。如果缩放其中一个对象,样式不会自动调整,但是能通过Scale Effects(缩放效果)来改变。(需要知道原始图形的增加或者减少比例才能使两个匹配)这个选项可以通过右击当前图层的fx找到。
乍一看好像只有通过“描边”选项才能实现描边效果。其实还有很多其他方法,比如,使用内、外发光或阴影,设置阻塞值为100%,就OK啦!描边是在对象外缘,内阴影和内发光在内侧,外发光和投影在外侧。不过圆角或者弧形的阻塞值不要太宽,会导致边缘粗糙。
如果想画出来的图看着舒服,得在形状图层上加一个矢量描边(CS6才可以哦),这样画出来的边缘更细腻(宽度越宽效果越明显),而且还可以选择各种款式:圆、方、斜边、虚线!如果是给iOS做设计的话,这就太实用了,可以把non-Retina描边设置成0.5px,直接缩放到0.5px;如果是Retina的话,可以直接缩放到1px。
如果要画复合矢量图形,直接用Illustrator要比在PS里面复制粘贴形状方便得多。在Illustrator里面把原始边描好直接粘贴到PS里面就好了。如果矢量对象不止一个形状,比如说一个多颜色的图标,那就需要粘贴成智能对象了。
从Illustrator粘贴形状图层可能会把对象从原位置移动个0.5px,这样边缘就比较模糊(CS6及以上版本不存在这个问题),需要手动微调。
做效果时,不要把图层混合模式用在之后要合并的图层上。下面例子中“强光”被输出成了一个单独的图层,所以单独显示的时候,就不能显示混合效果,变成了一个白色到黑色的渐变。
要重做效果,最好的解决办法就是用的图层跟下方的图层独立开来。
如果有一个整段文字,那就把它放进一个整个的段落文本框里,而不要人工换行(点文本)。如果文字和字体改变的话,这个就要重新设置了,但是如果段落文本框画得大小合适,文本就会自动变形。
在文本命令下能把点文字转化成段落文字,也能反转。在PS CS5里面,这个在图层-文字-菜单命令里。
大部分设备不支持连字符,所以设计里最好就不要用了。
默认的间距有点太挤了,所以要挪点空出来。上面的例子中把自动设置改成了20pt,是不是看起来舒服多了~
PS里面文本修边有很多种方法。可以每种都试试看看哪个渲染出的效果最好。“消除锯齿-犀利”的效果不错。
PS CC里面有修边选项,能够复制操作系统的次像素渲染,这样就能看出,假设把文本放在浏览器里是什么样子。PS里面的次像素是灰度,不是RGB。
创建列表,特别是旁边有图的列表,把所有的描述放在一个文本框里比每行字都单独用一个图层要好,这样对齐起来也方便,以后更新也好用。
手机的分辨率比电脑更高,意味着设计的尺寸要小一点。把文件缩放成手机屏幕大小,然后看看是不是有些东西尺寸要调调。
PS默认会把每个复制图层的名字都会加一个”copy”(副本)。神烦。可以在图层面板选项里把上面蓝框框里的三项都点掉,这样就好了。
命名要合理,很系统的命名别人看起来方便,客户也觉得你很专业。建议:建一个命名一个,不要到最后再一起改。
整组图层重命名脚本。貌似很有实用的样子。
命名要合理,排序也很重要。从上到下,从左至右,就跟看书一样。
PS强大的搜索功能,你值得拥有。比如,命名图层用前缀btn,icn之类,可以迅速过滤它们的内容,如果需要更新许多按钮的风格,这招就方便多了。当然还有许多搜索类型,比如说“类别”,“效果”,“图层颜色”等等。都可以一试。
这就是一个图层颜色编码的例子,一般核心设计没有颜色标签,右击任一图层前面的小眼睛选择颜色。
图层效果都展开来有点乱乱的,所以还是叠在一起看比较方便。
“文件 – 脚本”菜单里有一个删除所有空图层的命令,可好用了!
做完设计以后,很可能还有很多没有上的效果。通常需要一个一个删除,但是用了Remove Unused FX这个插件,一键清除,一步到位。
锁定图层能保护对象。但是如果你要修改或者删什么东西,又不知道哪个图层被锁定了就比较头疼了。
图层复合可以在一个文件里存储设计的不同变形版本。
PS CC里面最好用的一个功能,只要加个文件扩展名就能输出图层或者整个组。在“文件 – 生成菜单”里面操作。
不用PS CC也能输出,可以用我们ustwo的Crop&Export脚本。
看看两个不同的PNG文件有啥不一样?“另存为”存出来的文件比“另存为web格式”的要大32kb,当然选后者比较合算。
如果输出的文件不需要透明度,那可以转成8bit的PNG文件。下面的例子里,文件质量没有损耗,但是文件大小缩小了一半多。
一款适用与mac操作系统的软件(前端开发中必备的图片压缩软件)。
减少PSD大小的一个快速的方法就是隐藏所有的图层。如果设计要求显示某些元素,那可能就不方便了。当然还可以用ZIP压缩PSD文件,这样能缩成原始大小的10%。
有些设备不像电脑屏幕一样颜色多,渐变和过渡可能就看不大出,为了避免这个,可以用 Ximagic ColorDither 插件把图转成565格式。
很多文件一起做565过滤很费劲,所以可以用“动作和批处理工具”把这个过程自动化。
照常输出文件,然后把用565的动作“记录”保存,输出结果用“另存为web格式”(省空间),不保存,关闭文件。然后,在这样的设置环境下,运行批处理工具里的“动作”。所有过滤处理过的文件就都会输出到原先的另存为Web文件夹里。
有时弧形的1px描边看起来会比较单薄,为了增强存在感,又不实际增加px值,就增加一个“发光”的效果。差别很小,但是多少有点效果。
圆圈淡出用“描边”功能很容易就能做出来。填充类型:渐变色填充,样式:角度。
让一个对象快闪,可以用“内阴影”效果,“低透明度”。注意一点,因为这个形状是以母图层的上沿为基础的,所以任何不直的地方都会直接被快闪代替。
用内发光效果能够给一个对象添加简单的杂色文理。设置“来源”为“中心”,“大小”为0,然后可以通过杂色设置来调节数量。
有时候logo不是现成的,就只能自己抠了。当然还可以找找公司网站看看有没有PDF文件能下载的。用Illustrator打开,提取矢量logo。
画笔选项可以设置出不同效果,通过改变“大小”和“透明度”能出不同的效果。
增加样式和纹理:画几个小方格,用正方形选区选中,然后选择菜单里的“编辑 – 定义图案”,就可以在图层样式 – 图案里面找到刚刚自定义的图案了。
配色什么没想法?试试Kuler吧,这个插件能够让你看看别人的配色,自己还能自创配色呢。
有很多路径快捷键可以提高工作效率。选择两个形状图层,按“Command + E”绘制路径后,按“+”或者“Shift”添加另一个路径。按“-”或者“Option”删除一个路径。绘制好后,就可以通过选择再按“+”“-”号来增添或者删减新路径了。
用“编辑-键盘快捷键”来设置个性化的快捷方式。下图就是“对齐-垂直居中”和“对齐-水平居中”的快捷键。另外一个常用的就是把“Command+Q”这个快捷命令移除,避免意外退出PS。
矢量工具不顶用时就要用Illustrator了。主要用于创建复杂图形,再输出到PS样式里。这样功能性和效果都更强了。
联系客服