切图的原则有哪些,切图的方法

网页设计中图像切图技巧

网页设计中图像切图技巧

在网页的制作过程中，不时需要将图像进行切图处理。下面是我为大家整理的网页设计中图像切图技巧，欢迎参考~

网页制作技术伴随着网络的快速发展而快速兴起，目前，国内外计算机行业对于网页制作的研究较多，但是由于受到初学者个人风格和操作技巧的影响，在网页制作中普遍存在不同程度的问题。而对图像进行切图处理也是一个存在网页制作中的问题。基于此，本文就网页设计中图像切图技巧进行了探讨，并提出了一些有关的技巧，相信对图像切图的工作能有一定的帮助作用。

1 切图技术

切图就是指在网页制作过程中，用图形图像处理软件提供的切片工具，将美工设计的网页效果图这种大幅图像，分割成为一系列小的图像，这些小图像称为原大幅图像的切片。一张图可以有多种切图方案，但不是所有的切图方案都适合后期的网页制作的。因此需要在众多切图方案中，找出一种适合后期网页编程的最佳切图方案。本文中所说的切图技术，就是指的实现最佳切图方案的切图技术。由于它遵循一些切图原则和技巧，所以它能够实现最佳切图方案。

由于切图时，图像的最小单位是像素，矩形对边上的像素个数应该是相同，或者遇到圆角应该是锐化的。但是在人工操作时，可能会发生像素个数的变化，或者圆角产生顿挫角。因此，在切图时，将原图采用300%以上的放大倍数切图。切完整个大图后，把一系列的切片全部选中，接着利用软件中的图像优化工具，即菜单栏中“窗口”下拉菜单“优化”命令对所有的小切片进行优化来解决以上问题。然后利用文件菜单下的“导出”命令生成HTML网页和图像，最后在网页制作软件DREAMWEAVER中建立站点，将上面导出的网页和小图像都放在网站里。导出的网页文件是不能用的。因为一个网站的页面大小要求统一。因此，接下来的工作是在网页制作软件中制作表格。用分块的思想来看整个网页的布局，一个块就是一个表格。把网页看成是多个独立的表格组成的。将导出的图片插入到单元格中。日常工作中常用的图形图像处理软件有Photoshop、Flash、Firework等，这些软件中都有切片工具，但是在网页制作时，图形图像处理软件首选使用Firework。因为DREAMWEAVER中只要对图像双击，系统会自动调用Firework软件。

2 切图原则

一张图可以有多种相关的切图方案，但不是所有的切图方案都是合适网页编程的。所以在切图技术中，应该保证实现的是最佳切图方案，因此切图技术中还涉及了切图的原则和切图的技巧。

2.1 块与切片的概念

在本文中所说的一个块与切片概念是不同的。块和切片都是网页中的一部分，但是块指的范围比切片大。块中可以包含一个或多个切片。块是指在网页上内容相关的'区域范围。切片是从图中相关范围中分割出来的一小图形。如果转换成网页后，块对应了网页中的表格，而切片对应的是表格中的单元格。

2.2 分块的原则一：以相关内容为一块

根据原图中相关内容，确定整体的切分策略，即切分要有分块的思想，把整个网页看成是多个块构成的，每个块就是一个table，块中每一个细节内容就是table中单元格中内容。即将整个网页看成是由多个table组成的，然后在具体到每个table，去考虑里面应该如何切。必须强调的是，应该把整个网页看成是多个独立的块构成，切片是块中的内容。依据这种思想去切图，然后在网页制作软件中，插入多个表格。块对应成了网页中的表格，切片对应成表格中的单元格内容。在切图时，同一块中的内容是完整的，也就是说，要保证完整的一部分在一个块内，例如某区域的标题文字，网页的LOGO，网页的广告，网页的导航区等可以分别是一个独立的块，这样做的目的是方便日后网页编程和修改。

2.3 分块的原则二：尽量分成大行，平行的切

当一个网页的内容比较多时，在显示网页时是有时间差的，这时要求内容的显示是从上而下从左到右逐行显示网页的内容，决不允许一个网页上的内容杂乱的跳出来。因此，在分块时也应该贯穿逐行分块的原则。切图的时候要尽量平行的切，也就是说，分成大行，然后再逐行的切。如果一个网页的显示页面是由多个表格构成的，这样做的目的是当客户端浏览一个网页时，由于它是由多个表格构成的，因此，客户端与网页服务器会生成多个request请求，多个表格同时下载信息，因此网页下载的速度就会相对快。避免出现把网页整个页面看成一个块，然后块里又分块，出现块中嵌套块。因为这种结构在由切片转换成网页后就出现了表格的嵌套，表格的嵌套影响了客户端网页浏览的速度。

2.4 切片的原则：以属性相同为依据

一般切图原则是：属性相同的区域适合分为一个切片。属性相同主要是指颜色和形状都没有变化，或者在X或在Y方向上没有变化。属性渐变的区域适合分为一个切片，渐变有两种表现形式颜色渐变，形状渐变。

3 切图的技巧

切图也有技巧。构成一张图片的信息量是非常大的，因此在服务器中存储一张图片时占的容量也是很大的，同时从服务器里下载图片到客户端也需要时间也就相当长。因此，在利用切片转换成网页时，可以利用一些技巧，即减少切片个数和减小切片的大小，可以解决以上存在的问题。

3.1 减少切片的个数

网页上的文字与图片信息都是存储在网页服务器上的，一个切片就是一张小的图片。根据显示的点阵原理可以知道，对于同一张大图像来说，切片数减少，存储在网页服务器上这张图的信息量也就减少了，也就是说在网页服务器上占的空间减少。所以当切片的背景是单一颜色，切片的文字没有效果，这时就可以采取这种特殊的处理方式对此切片进行处理。即可以将单一颜色和文字没有效果的切片丢掉，在DREAMWEAVER中打开站点，插入表格，在对应的单元格中，利用DREAMWEAVER软件提供的设置单元格的背景色，直接从键盘上输入文字内容。这种做法实现了切片的效果，同时可以使网页服务上存储的切片数减少了。以“京东商城特卖新”网页页面为例，在实验中保证网页页面效果相同的情况下，采用减少切片个数和未采用减少切片个数方法，可以得到下面表中的数据。从下面表中的数据可以看出两种处理办法造成的结果是：未采用减少切片个数方法时，图片总容量为102MB，而采用减少切片个数方法后，图片总容量为40.3MB，明显前后图片的总容量变化很大，值得提倡这种做法。

3.2 减小切片大小

大面积的颜色相同的，或者形状相同图块，可以只从原图中切出一个像素的切片，然后DREAMWEAVER里面，用切片平铺形成所需要的图。

;

点九图切图规范

本文以微信社交对话框为例进行说明如何切点九图，其原则如下：

1.保留对话框周边四个圆角；

2.保留对话框右边的指向“三角”；

3.指定横向（水平）、纵向（垂直）内容范围区域；

整个图片在拉伸过程中，四个圆角和指向“三角”保持不变，这样才能保证对话框不变形、不模糊。指定内容区域范围，是为了避免内容溢出在对话框圆角和指向三角区域内。

具体步骤如下所示：

第一步：画好我们需要的对话框样式；

第二步：将对话横向距离减小到两圆角之间为10PX（可以更小）间距，并用铅笔工具在对话框上部中间（水平）标注1*1PX矩形黑点（#000000，100%）；该黑点表示，该对话框可以横向拉伸该区域致想要尺寸大小。

上图最终切图为放大图，方便说明（黑点、黑线、间距）更清晰。

注意，黑点与对话框之间保留1PX空白间距。

第三步：同样的道理，用铅笔工具在对话框的左侧标注1*1PX矩形黑点（#000000，100%）；该黑点表示，该对话框可以纵向拉伸该区域致想要尺寸大小。如下图所示。

注意，黑点位置纵向高度低于右边指向“三角”下部，说明该对话框纵向向下拉伸（单方向）。

如果想要对话框纵向双向对称拉伸，指向“三角”保持在中间位置。则，需要左侧纵向标注两个黑点，且距离三角距离相同。如下图所示。

第四步：指定对话框内文本纵向占位范围。用铅笔工具在对话框的右侧标注宽为1PX矩形黑线（#000000，100%）；该黑线表示对话框内文本垂直范围。如下图所示。

第五步：指定对话框内文本水平占位范围。用铅笔工具在对话框的下侧标注宽为1PX矩形黑线（#000000，100%）；该黑线表示对话框内文本水平范围。如下图所示。

总结：通过以上五步，该对话框的点九切图完毕。

如果没有指定文本范围区域，就会出现以下情况。如下图所示。

切记，黑点、黑线一定要与对话框之间保留 1PX 间距。切出来的图片命名为： “*.9.png”

切图注意什么？把图片转化成div+css的html文件。切图时，有什么原则？

真正的优化，只能一点点的切，边切边做；

对于能够连续的背景，切尽量小的图；

分块去切图；切图时考虑到生成页面时的方便性；

fireworks切图的技巧

切图时基本原则就是尽可能的少用图，网页里面多用文本和单色背景。这样做不光是为了显示速度快，也是为了后期做SEO优化。

还有就是很多人喜欢把图一次性切好，然后全部导出图片。个人觉得这样做不便于后期静态页的制作。我是一边切图一边做静态页，切出一张立即用掉，这样的好处一是不用找图，刚切出来的就是我要用的;二是一边切一边可以思考下面的布局，不用临时又去找原图看。