姬小光前端兴趣班【第008期】- 真正的切图大法

上一期我们使用了 word 转存大法来生成网页，主要是为了帮助大家理解表格布局的原理。那么今天我们就来学习一下真正的切图大法。

切图大法之真正的切图大法

首先让我们来看一个基本的营销邮件设计稿，设计稿可能是 PSD（PhotoShop自己的文件格式）格式，也可能是 jpg,，png 等其他的图片格式。

一般情况下，我们从设计师手里拿到的都是 PSD 文件，当然，大家也可以随便找一张图片，把它想象成网页设计稿，来模拟今天的课程练习。

注意，上一期我请大家预先安装 PhotoShop，不知道大家有没有安装，虽然其他软件也可以切图，但是学会了 PS，没事还可以 P 个图乐呵一下不是？言归正传，我这里使用的 Adobe PhotoShop CC，其他版本的界面略有差异，不影响使用。

首先选择 文件->打开 ，找到一个 PSD 文件，或者从网上下载一个图片即可。这里我们使用一个示例设计稿（为节省大家流量，图片已缩小）：

在左侧工具栏中找到裁剪工具，或者下图中的一种，并切换到切片工具：

如果你的设计稿是 PSD 文件，建议打开文件后直接 Ctrl+A 全选，Ctrl+Shit+C 合并拷贝，Ctrl+N 新建，Ctrl+V 粘贴，这样就得到了一张合并后的图片，方便切割。

在合并后的图片上，使用切片工具划分区域，你所圈出来的区域，即将成为一张独立的图片，并作为网页的一部分内容存在（可以添加链接，动作等），目前我们先不管需求如何，凭感觉随意切割即可：

图中有编号的部分，就是所谓的切片了。

下面最关键的一步来了，估计有的同学已经想到了，不会又是另存为吧？！对！只差一点点！Ctrl+Alt+Shift+S 或者 文件->存储为 web 所用格式：

这些参数你可以先不用修改，直接点击右下角“存储”：

在 格式 处，选择 “HTML 和图像” 保存到桌面，即可得到一个初步的网页了！

我们双击打开这个网页，你会发现，又一个网页就这样诞生了。

这就是传统的切图方法，也是十年前的页面仔切图仔都在做的事情。目前这种方法在平台型的页面开发中已经完全淘汰了，也没有所谓的“切图”一说了。

不过，在一些邮件营销页面中，为了保持最好的兼容性，还是会使用这种方法来开发页面，此时这个技能就非常有用了。

好了，这节课就到这里。下一节，我们将基于本次课程生成的代码，做一些整理和加工，使之成为真正可以使用的网页。