姬小光前端兴趣班【第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 和图像” 保存到桌面,即可得到一个初步的网页了!

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

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

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

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

原文发布于微信公众号 - 姬小光(hi-laser)

原文发表时间:2015-07-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小特工作室

WinForm中播放视频示例(含源码)

1背景 这几天一老友要求我做个小软件,在WinForm播放视频.印象中微软有个WM控件直接可以使用,晚上研究下 2实现方式 2.1微软草根 最简单的方式,是...

2276
来自专栏Material Design组件

Human Interface Guidelines —— Popovers

37211
来自专栏杨俊标的专栏

【HTML插件】帮你100%还原设计

Contrast.js插件主要用于检验移动端Web重构还原度,由于大部分设计稿是基于iPhone6以上(1334 x 750)设计的,所以该插件比较适合用iPh...

2292
来自专栏破晓之歌

vue的video插件vue-video-player

在线视频文件格式转化工具:https://cloudconvert.com/wmv-to-mp4

1.1K3
来自专栏angularejs学习篇

angularjs学习第五天笔记(第二篇:表单验证升级篇)

您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指...

1041
来自专栏偏前端工程师的驿站

CSS3魔法堂:认识@font-face和Font Icon

一、前言                                过去我们总通过图片来美化站点的LOGO、标题、图标等,而现在我们可以通过@font-f...

2558
来自专栏技术小黑屋

Android UI之自定义Window Title样式

Android提供了很多控件便于开发者进行UI相关的程序设计。但是很多时候,默认的一些UI设置不足以满足我们的需求,要么不好看,要么高度不够,亦或者是与应用界面...

2141
来自专栏互联网杂技

20个为前端开发者准备的文档和指南7

1. DevTools Challenger 它是一个交互式的站点,演示了如何在Firefox开发者版本里使用其拥有的新的相关动画功能。 ? 2. The HT...

3675
来自专栏IT派

5月份GitHub上最热门的JavaScript项目

本篇文章为大家盘点了5月份最热门的 JavaScript 项目,一起来看看你都知道哪些,或者有哪些你已经在使用的了。

1312
来自专栏ionic3+

【技巧】ionic3视频播放

一般视频的展示方式有两种:缩略图和直接播放,分别对应下面两种效果(可参考直播应用和今日头条视频):

2793

扫码关注云+社区

领取腾讯云代金券