Web前端工程师必备的PS技能之切图

时间: 2018-06-27阅读: 424标签: 工程师

1.        PS中我的标尺的参考线为什么不能自动吸附图层或画布中间了?有个选项没有选择“菜单栏-视图-对齐”,勾选下,里面的选项你可以看着勾选。还有一点要注意,你想吸附到图层像素边缘的时候,需要你选中这个图层。


2.        按照设计师提供的设计稿,实现HTML页面,需要将设计稿切分成为最终在页面中呈现的一个个图片,我们一般称之为“切图”。


3.        新建ps文件设置:分辨率 72像素/英寸,背景内容透明,存储预设很方便。


4.        移动工具设置:右下角的图层选项选择,左上角勾选“自动选择”,选择“图层”。选择图层可以用Ctrl + 鼠标左键。


5.        视图设置:勾选“智能参考线”“标尺”。右侧四大面板:图层,历史记录,信息,字符。信息面板设置。都改为像素。


6.        简单工具操作:移动、选区(四种选法)(单行和单列都只是一个像素)、套索、快速选择、裁剪、取色器。


7.        shift键和alt键针对选区是通用的,shift键表示增加选区的一部分,alt键表示减少选区的一部分。


8.        我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS提出了精准切图。所谓传统切图就是切图人员基本上都是自己分割图层切图,传统切图又分为全手工切图和参考线切图;现在CC版本提出的精准切图,切图人员可以依赖计算机把图层对象精确的切割出来,这样切割出来的图层肯定比传统切图切出来的精准度高。另一方面,CC版本可通过脚本执行全自动切图,这样完全解放了切图人员的双手。

9.        我们先把工具切换到“切片选择工具”,上面的菜单栏多了一个“隐藏自动切图”按钮。点击“隐藏自动切片”按钮,然后我们再看看切图一个就只有8个切图了,这8个切图真是我们自己切的。但细心一点的同学看到最后一个切图的编号是29,“隐藏自动切片”只是隐藏了自动生成的切片,而不是删除切片。


10.    切图完成之后就可以执行导出了。打开“文件”->“导出”->“存储为Web所用格式”(老版本打开方式为“文件”->“存储为Web所用格式”),弹出“存储为Web所用格式”窗口。需要设置几个选项,右上角下拉列表选择“PNG-24”,勾选“透明度”和“交错”选项。最后点击“存储…”,选择我们存储的路径。到目前为止,手动切图工作基本上就完成了。


11.    精准切图:打开菜单“文件”->”导出"->“将图层到处到文件”,弹出导出窗口。上面窗口需要填写几个参数,“目标”即导出到哪个目录下,“文件名前缀”为所有导出图片文件名称的前缀,“仅限可见图层”只导出可见图层,“文件类型”为导出文件的类型(例如png、jpg等)。最后点击“运行”按钮开始执行自动切图。


12.    自动切图

l  选择菜单“编辑”->”首选项"->“增效工具”,弹出下面的窗口。勾选“启用生成器”。

l  勾选“文件”->“生成”->“图像资源”菜单。

l  现在把分组名称重新改为“Address.png”。然后我们到psd文件目录下,psd文件名字为“Artica- One Page PSD Template“,可以看到同目录下生成了另外一个叫做”Artica - One Page PSD Template-assets“的文件夹。

l  svg格式导出

l  WebP格式导出:文件->抽出资源


13.    自动切图也是生成svg的利器。ps不仅可以把图层生成为png文件,还支持生成svg文件。


14.    参考线不会吸附到羽化的地方,而是实实在在的地方。


15.    传统切图可以剪裁后再切,事半功倍。


16.    Photoshop CC 自动生成CSS:右键->复制CSS。

全栈工程师是什么?为什么要做Web全栈工程师?

随着软件技术的发展以及市场需求的变化,全栈工程师似乎已成为未来发展趋势。很多Flag公司都已经声称只招Full Stack的员工,那么面对这样的市场形势,对于正在求职路上或者是想要跳槽的程序员来说,我们需要如何准备,如何应战?现在,小编带你了解为什么这次我选全栈工程师!

如何学习前端知识?优秀的前端开发工程师应该具备什么条件?

Web前端开发技术主要包括三个要素:HTML、CSS和JavaScript!如果单纯只是学习前端编程语言、而不懂后端编程语言(PHP、http://ASP.NET,JSP、Python),也不能算作是优秀的前端工程师。在成为一个优秀的前端工程师的道路上,充满了汗水和辛劳。

前端工程师成长的痛,你占几条?

于很多前端工程师,很容易进入工作的舒适区,该熟悉的业务已熟悉了,然后就是重复用轮子,这样很容易让自己的成长处于原地打转以及低水平重复的状态。有的是主观原因造成的 ,有的是客观原因造成的,本文从客观跟主观两方面进行了总结,帮助大家 自检

写给工程师的十条精进原则

作为一名技术人员,我们应该如何践行呢?本文总结了十条精进原则,希望能够给大家带来一些启发,更好地指导我们行动。Owner意识、时间观念、以终为始、闭环思维、保持敬畏

前端工程师/程序员简历怎么写?

其实前端工程师并不少,但很多时候合适的前端工程师难找。可能是由于程序员比较内向,前端工程师都没有把自己最厉害的那一面表现出来。今天我们来聊聊前端工程师的简历怎么写,希望能够对大家有帮助。