h5页面如何切图_PS-前端切图教程（切jpg图和切png图）

ps：多日后的补充说明

部分看了文章的设计师，来找我说怎么切图。sorry？在我的理解，这就是切图啊，但是他们所指的“切图”是，怎么把设计图制作成html页面。

在我看来，现在人们对于前端都是有误区的。认为前端是切图的，(也确实是这么叫的，本人情感上很不愿意听前端被叫做“切图的”)所以也会误认为我的这篇文章是写给设计师的。

其实不然，这篇文章适用于计算机出身的前端甚至后端、对于ps等设计软件没有基础的人使用的，用来把设计师交于前端工程师的设计图稿或者psd源文件提取、整理，转化成布局页面时使用的图片。

再者，前端这个职业，很不希望被人认为是切图的，现如今的前端工作，并不是单纯的切一下ps图那么简单的事情。

本篇文章所展示的也只是前端工作中的沧海一粟、九牛一毛。。。

——————————————————————正文分割线——————————————————————————————

微微一运功，把家底都抖出来了。

不过，作为一个设计出身的前端来说，摸ps就和摸键盘一样了

所以可能教程中还是有没用过ps的人看不懂的地方，

欢迎加群讨论：613512106。。。

———————--------------------------------------------------------------------PS切图步骤说明————————————————————————————————

一共分两大项：切jpg图、切png图。

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

一、切JPG图

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

2．选择左边工具栏里的“切片工具”

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

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