前言:当设计师通过photoshop工具设计完设计稿导出psd文件时,我们前端工程师该如何进行切图转换成网页的所需的图片呢,接下来讲讲如何利用photoshop工具快速简洁的切图,因为ps工具用到的行业很多,涉及到的各个行业,所以有一些快捷的面板可以隐藏掉。前端工程师只显示适合面板和元素就可以了。
目标:自己能够使用photoshop从设计师提供的psd中获取网页前端开发过程中所需要的资源
一:首先:先了解大致了解一下,当前流行的设计稿尺寸以及工具,如下对应表
渠道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。比如面板显示信息,当我们点击该图片时,对应的信息高宽等都可以直接显示。很方便
-
加上辅助智能参考线标尺等;首选项设置为像素
四:前端切图快捷工具
1:ctrl +; 隐藏参考线 显示参考线
2:导出切片:alt+shift+ctrl+s(文件-存储为web所用格式)
3:移动工具,任何时候按v,就可以回到移动工具
4:移动工具快捷键(v)
5:选框工具快捷键(m)
五:推荐的压缩图片网站 png 图片推荐用tinypng压缩,超级无损。
?,结束。thx.若有不懂可以联系本文作者我啦。