ps切图的正确方式(前端小白的切图技巧,看完你也是PS高手啦)

100次浏览     发布时间:2024-11-20 08:45:26    

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

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

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

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

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

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

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

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

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

小图标,如果有蒙版可以新建图层合并来处理,创建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

-前台页面

-其他单独文件

相关文章:

三分钟看完宋朝的五大名窑,一起来看看吧 06-17

南宋五大名窑,一起来看看吧 06-17

北宋的雁门关在哪里?位置非常的重要,是北宋的生死存亡之地 06-16

宋代北宋有哪些比较稀少的古钱币呢? 06-16

宋朝第八位皇帝是谁?人们记住了他是因为他的绘画 06-15

明朝服饰发型是什么样的?民间女子和贵妇其实差别很大 06-15

盘点唐朝的7位传奇女人,不仅有女皇帝,而且还有个女宰相 06-14

从历史视角看,北宋“积贫积弱”吗? 06-14

各个朝代的诗人 《古代诗人名录》10856位大全集 卷一(1—900位) 06-13

宋朝出名的皇帝有哪些?北宋九位皇帝排名,赵匡胤无悬念排第一,著名书法家排倒数第二 06-13