enter image description here

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

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

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

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

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

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

enter image description here

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

enter image description here

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

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

enter image description here

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

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

enter image description here

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

enter image description here

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

enter image description here

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

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

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

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

enter image description here