Ps切片工具的简单使用

203 阅读1分钟

简单说两句

据说,切图在这个时代几乎都是设计师在做,前端开发者自己切图比较少。这里只是简单提一下Ps手动切图方法。

开始

需要的工具:Photoshop (版本无所谓,简单的切图而已,只要不是“侏罗纪版本”就ok)

① 随便拖一张图片到ps中打开

2021-03-13_214946.png

② 假如我们要切中间那朵小花,直接动手,切下来的图片是不精准的,我们需要辅助线,按快捷键“Ctrl+R”打开标尺,鼠标放在标尺上,点击右键,将单位切换到像素,这才是前端开发需要的单位

2021-03-13_215645.png

③ 鼠标从标尺上按住往图片上拖动,会出现辅助线,用辅助线把我们要切的部分框起来,要精准的框起来

2021-03-13_215922.png

④ 选择ps左边工具栏中的切片工具,此时鼠标移动到图片上就变成了一把小刀,我们从正方形小框的左上角开始按住鼠标左键往正方形的右下角拖动,鼠标会自动吸附刚才的辅助线,结束之后如图

2021-03-13_220248.png

⑤ 按快捷键“Ctrl+Shift+Alt+S”,保存为Web所用格式,窗口右上角的格式选择PNG-24,透明度默认就是选中的

2021-03-13_220500.png

⑥ 点击储存,弹窗中选择 仅选中的切片,继续保存。完成了!

2021-03-13_220831.png

⑦ 去刚才的路径,找到切完的图片

2021-03-13_221951.png

结束