详解完美像素使用手册之软件技巧篇(2)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:优设   作者:UIBANG

关键词

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

详解完美像素使用手册之软件技巧篇

颜色编码

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

详解完美像素使用手册之软件技巧篇

展开图层效果

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

详解完美像素使用手册之软件技巧篇

清除所有空图层

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

详解完美像素使用手册之软件技巧篇

移除没有使用的FX

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

详解完美像素使用手册之软件技巧篇

锁定图层

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

详解完美像素使用手册之软件技巧篇

图层复合

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

详解完美像素使用手册之软件技巧篇

生成器

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

详解完美像素使用手册之软件技巧篇

输出脚本

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

详解完美像素使用手册之软件技巧篇

另存为Web格式

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

详解完美像素使用手册之软件技巧篇

减小文件大小

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

详解完美像素使用手册之软件技巧篇

ImageOptim

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

详解完美像素使用手册之软件技巧篇

减少PSD文件大小

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

详解完美像素使用手册之软件技巧篇

RGB(565格式)

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

详解完美像素使用手册之软件技巧篇

565(批量处理)

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

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

详解完美像素使用手册之软件技巧篇

描边

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

详解完美像素使用手册之软件技巧篇

圆圈淡出

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

详解完美像素使用手册之软件技巧篇

快闪

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

详解完美像素使用手册之软件技巧篇

内发光加入杂色

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

详解完美像素使用手册之软件技巧篇

提取logo

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

详解完美像素使用手册之软件技巧篇

星场

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

详解完美像素使用手册之软件技巧篇

详解完美像素使用手册之软件技巧篇

样式

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

详解完美像素使用手册之软件技巧篇

Kuler插件

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

详解完美像素使用手册之软件技巧篇

字符浏览器

详解完美像素使用手册之软件技巧篇

键盘浏览器

详解完美像素使用手册之软件技巧篇

路径快捷键

 收藏