我一开始是不会切图的,面试的时候心里也没有底气,但是之前也知道一点切图的知识,只是没有那种疯狂的天天做切图,所以一直也不敢说自己会熟练的切图,经过近一个月的切图经历之后,今天来分享一下纯纯的小白切图基础。

作为一个小白出身的前端来说,教程中可能有我想不到、小白还不太懂的细节问题,所以看不懂的地方欢迎留言。有问题的地方,也恳请指正。

我用的是PS CC 版本,教程中用到的除了界面和摆放位置不一样外,其他应该和低版本的都一样了。

1.打开ps导入图片的步骤是铁定的了

2.选择左边工具栏里的"切片工具"

前端切图难吗 前端小白的切图技巧(1)

事先自己没用过或上一次ps工具使用时没有使用过"切片工具"的,打开ps工具栏里默认是"裁剪工具"的图标"裁剪工具"的图标

前端切图难吗 前端小白的切图技巧(2)

你可以鼠标左键点住"裁剪工具"不松手,他会在右边展开(我这是工具栏在ps界面左侧的情况下)这一组的所有工具,在里边选择"切片工具"即可

前端切图难吗 前端小白的切图技巧(3)

我图中之所以框选了两个工具,是因为后期还要用到"切片选择工具",这里先认识一下他的位置在哪。

切图一定要拉参考线,计算精确的像素大小(现在发现一个快速测量的办法,因为设计师一般也是以整数为主,所以用矩形选框工具一拉,就能看到大小,误差几个像素一本都能猜到)

小图标,如果有蒙版可以新建图层合并来处理,创建sprit图,可以拉好参考线,自己清楚像素大小,不要有白边。

保存图片时,PNG用24,JPG用品质非常高(80)。

文件中只有一个图层,(需要先复制图层新建文件)单独图层选择裁切就可以按图层实际大小来保存,主要在有阴影效果的图层实用。

上面的情况也可以先将图层转化为智能对象然后选择整个图层,用选框工具选中图层,再新建文件(ctrl n),这时可以看到新建的文件的大小是按该图层的实际大小的新建的,最后ctrl v就可以将图层复制到新文件中,保存即可。

如何知道矩形圆角半径(选中图层–选择圆角矩形工具–在工作区上方会有显示半径及具体的矩形大小,不用去猜了,不过经过实践,发现上面显示的半径会太大,不如猜的一般5px更符合实际大小)

快捷键

1.选中图层用ctrl 鼠标左键,快捷键(文字T,移动V,吸管I,矩形选框M,),按住h,同时移动鼠标可以快速选择相应区域并局部放大。

2.ctrl 放大 -缩小

3.ctrl r出现标尺

4.ctrl h隐藏所有的参考线

5.v鼠标移动工具,h,鼠标移动文件,t文字工具,i吸管工具

其他

1.自动化切图,文件–脚本–图层保存为文件(这个时候要注意之前的保存为web格式文件时是保存了所有切片,而不是仅用户切片,不然会导致一直搜索过滤图层,半天没反应,而且一直谭警告窗,要一直点)

一般网站文件目录

PSD切图(项目文件目录)

project:

-admin(后台)

-static(所有资源)

-css(所有子文件都可以分子文件夹,方便管理,层级不建议太多)common.css/reset.css/yemian.css

-images(可以按页面主题来)

-js(预定义的,引入的,common.js)

-font

-pulgs

-前台页面

-其他单独文件

,