多语言展示
当前在线:650今日阅读:60今日分享:41

前端开发之切图

有的时候可能需要的东西没有切出来,那么我们就要自己切图,所以不如自己学一些切图方法
方法/步骤
1

1.打开下载的psd文件,打开后,我们要放大图片到合适的大小。 放大图片:”CTRL” +“+” 缩小图片:“CTRL”+ “-”,然后我们来认识下photoshop中的一些工具

2

2.修改参考线,我们可以看到我们的图片中很多条蓝色的参考线,这些线是设计人员用来设计用的,有的文件中的线会直接把我们需要切的东西给包裹出来,很多我们都不需要,所以我们先把这些参考线都清除掉。,删除参考线:选择移动工具,然后把要删除的参考线往标尺上拖,往上或者往左都可以,没有参考线的可能是参考线被隐藏了,通过“CTRL”+ “;”就可以显示出来

3

3.选择要切的图标,①选择工具栏第一个“移动工具” 。,②然后查看上面选项栏“自动选择”有没有被选中,没有被选中点击选中,将它旁边的“组”改为“图层”,这样我们点击图标的时候,右下角的图层面板就能自动的选中对应的图层 。,③点击我们要切的图标,然后到右下角的图层面板,点击当前选中的这个图层旁边的小眼睛来隐藏当前图层,通过显隐来确定是不是我们要切的图标,④确定我们要切的图标后,分别从水平标尺和竖直标尺的地方拉取参考线来把图标给包裹住。因为我们当前选中的就是我们要切的图层,所以当参考线拖过去的时候会自动吸附到图标的边缘。4.切需要的图标,①选择切片工具,左边工具栏从上往下数第五个,然后右键就可以找到,然后选中,②然后找到我们刚才用参考线包裹的图标,从左上角一直拖到右下角,因为有参考线的帮助,所以软件能够自动吸附到参考线上,所以只要大概找准左上角和右下角就可以选取出来 ,用同样的方法把剩下的都选取出来5.将切片存储为图片,①选择 “文件% 导出“存储为Web所用格式”,②调整缩放比例,让图片能完整的在窗口显示,④存储为png-24格式

推荐信息