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

更新日期: 2018-06-27阅读量: 2079标签: 工程师

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

站长推荐

1.云服务推荐: 国内主流云服务商/虚拟空间,各类云产品的最新活动,优惠券领取。领取地址:阿里云腾讯云硅云

链接: https://www.fly63.com/article/detial/896

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

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

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

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

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

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

高级PHP工程师所应该具备的专业素养

初次接触PHP,就为他的美所折服,于是一发不可收拾。很多面试,很多人员能力要求都有PHP高级工程师的字眼,如果您真心喜欢PHP,并且您刚起步

前端工程师自检清单与思考

对于JavaScript,掌握其语法和特性是最基本的,但是这些只是应用能力,最终仍旧考量仍然是计算机体系的理论知识,所以数据结构,算法,软件工程

作为一个web前端工程师,要不断的深入自己的技能

现在,前端工程师终于前所未有的在Web中占有了一席之地。随着多设备、浏览器和Web标准的演变革命,前端正在成为兼顾逻辑、性能、交互、体验的综合性岗位。

一名【合格】前端工程师的自检清单

前端开发是一个非常特殊的行业,它的历史实际上不是很长,但是知识之繁杂,技术迭代速度之快是其他技术所不能比拟的。

写代码这条路,能走多远?工程师能力模型告诉你

职场危机感似乎是每个人在职业生涯都会遇到的话题,我对这种危机处境和自己曾遇到的问题进行了一番思考,参考了其他人的一些结论并结合自身的经历,设计了应对的初步方案。

我放弃了成为一个全栈开发工程师的理想

一提起“全栈开发工程师”,大家的印象肯定是:这号人啊,堪称大神!会很多技术,前端后端都精通,不掌握七八种语言都不好意思出来打招呼,热点技术名词全都知道,也都会点儿;

HTML5开发工程师

HTML5开发工程师是协调HTML5设计师、后端程序员实现网站页面或程序界面,优化交互体验的一个职位。HTML5开发工程师需要掌握哪些职业技能?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!