前端必备切图ps篇

前言：当设计师通过photoshop工具设计完设计稿导出psd文件时，我们前端工程师该如何进行切图转换成网页的所需的图片呢，接下来讲讲如何利用photoshop工具快速简洁的切图，因为ps工具用到的行业很多，涉及到的各个行业，所以有一些快捷的面板可以隐藏掉。前端工程师只显示适合面板和元素就可以了。

一：首先：先了解大致了解一下，当前流行的设计稿尺寸以及工具，如下对应表

渠道UI 设计工具基础尺寸

app（安卓） sketch 720px

微信，IOS sketch,ps 640px

pc ps 1920px,1600px.，1024px..

基于Photoshop设计，会输出psd文件，用ps进行切图。

二：ps切图原则

前端网页切图应用尺寸单位一般px像素，RGB的颜色模式,屏幕显示一般是RGB

三：ps合适的预设

文件-新建--：初始化预设设置1920x2000，72分辨率，8位色图，背景透明色然后保存起来。后续可以选择新建模版
视图/显示/智能参考线以及视图/字符，这两个都要选上；
编辑/首选项/单位与标尺【标尺：像素；文字：像素，其他默认不用改动】
ps界面中有菜单栏、属性栏、工具栏、面板、工作区：
面板选择：图层、历史记录、信息、字符. 这四个，点击信息面板那一个小三角，打开面板选项/标尺单位：像素；两个像素模式：RGB颜色；文档尺寸选上，然后确定信息面板：坐标改为像素，颜色改为RGB。比如面板显示信息，当我们点击该图片时，对应的信息高宽等都可以直接显示。很方便
加上辅助智能参考线标尺等；首选项设置为像素