Web前端工程师必备的PS技能之切图
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前端工程师必备的PS技能之切图相关推荐
- 前端工程师必备的PS技能——切图篇
Photoshop界面设置 移动工具快捷键--v 注意自动选择选项 智能参考线--视图->显示 标尺--Ctrl+R 窗口->信息(面板选项中,第二种颜色信息模式为RGB颜色,标尺单位为像 ...
- 优秀web前端工程师必备_优秀的Web工程师的技能和素质
优秀web前端工程师必备 In this one-on-one episode of the Versioning Show, Tim and David talk about what makes ...
- Web前端工程师需要掌握的技能有哪些？
Web前端工程师需要掌握的技能有哪些?Web前端开发技术包括HTML.CSS.Js,随着时代的发展前端开发技术逐渐演变成html5,css3,JQuery.Web前端开发工程师要与交互设计师.视觉设计 ...
- 优秀的web前端工程师需要哪些软技能
做为一名web前端工程师(http://www.maiziedu.com/course/web-px/),往往我们可能只专注于修炼自己的内功,而忽视了软技能.硬技能决定你是否能得到工作,而软技能能够表 ...
- 前端工程师使用adobe XD软件下载切图和测量距离的方法
在之前公司做前端时,基本都是直接跟蓝湖打交道,UI设计师会将设计好的PS文件,通过蓝湖提供的切图插件进行标记,然后整体画板上传到蓝湖项目中,然后前端通过蓝湖进行查看下载切图和测量间距等,而且蓝湖会自动 ...
- 月薪过万的web前端工程师必备的5大核心技能！
Web前端开发所涉及的内容主要包括W3C标准中的结构.行为和表现,那么这三项中我们需要掌握的核心技能是什么呢? 1.开发语言 HTML发展历史有二十多年,历经多次版本更新,HTML5和CSS3 ...
- 一个优秀的前端工程师应具备哪些技能？
作为一名前端工程师,产品的内外兼优才能体现它的完美,前端工程师需要学习的技能远远超过设计师. 那么一名优秀的WEB前端工程师应具备哪些技能呢,我在这里分享一下,供大家参考: 第一:HTML超文本标记语 ...
- Web前端工程师就业前景怎么样？整体薪资待遇好不好？
Web前端并不算新兴行业,在国内也已经发展好些年了,随着互联网电商项目的不断发展,让企业越来越重视用户体验,而Web前端开发工程师正是实现这样一切的关键. Web前端工程师已成为目前行业内最紧俏的职位 ...
- 前端工程师需要学习ps 吗_转行web前端，新手需要学习什么？
7天免费试听,0基础入门,高薪就业,推荐就业,小班面对面授课 一.前端工程师的主要职责 前端工程师在不同的公司工作内容不同,但工作性质大体相似: 1.网站设计与网页界面开发 2.设计.开发.数据 3. ...
最新文章
- 使用 qrcodejs 生成二维码的几个问题
- ASP.NET MVC：Cookie 的过期时间在服务器端是获取不到的
- centos7 mysql 1064_【mysql报错】1064 - You have an error in your SQL syntax;
- 几个方便编程的C++特性
- java水印图片_JAVA实用案例之图片水印开发
- Linux网络转发和端口映射的笔记
- zplane函数怎么用m文件调用_matlab中cla用法
- Linux---进程的基本概念
- c++中的Debug版本和Release版本的区别
- 将SpringBoot项目打包并部署到云端 -- jar、war、tomcat
- QT学习笔记——06-Day15_C++_QT
- matlab中phantom函数,matlab官网上下的phantom3d不对
- 计算机无法识别荣耀9,华为荣耀9连接不上电脑端华为手机助手怎么处理？
- Geserver SLD 线标注注意事项
- 分享一个代码合并工具
- Android设置图标背景透明
- 整除理论与线性丢番图方程相关
- pip版本更新的问题
- android 通知栏歌词,状态栏歌词插件下载
- SSM学生选课管理系统项目中问题总结(未完待续)