网页设计中的图像切割技巧

网页设计中的图像裁剪技巧

在制作网页的过程中，需要时不时的裁剪图片。以下是我为你整理的网页设计中的图像裁剪技巧。请参考~

随着网络的飞速发展，网页制作技术也迅速崛起。目前，国内外计算机行业对网页制作的研究很多。但是由于初学者个人风格和操作技巧的影响，网页制作存在各种各样的问题。而裁剪图像也是网页制作中的一个难题。基于此，本文探讨了网页设计中图像裁剪的技巧，并提出了一些相关的技巧，相信对图像裁剪的工作有所帮助。

1切割技术

裁剪是指在网页制作过程中，图形图像处理软件提供的切片工具，将美工设计的网页效果图的大尺度图像分割成一系列小图像，称为原始大尺度图像的切片。一张图片可以有很多裁剪方案，但并不是所有的都适合后期的网页制作。所以需要在众多的裁剪方案中找出适合后期网页编程的最佳裁剪方案。本文所说的切割技术是指实现最佳切割方案的切割技术。因为它遵循一定的切割原理和技巧，可以达到最佳的切割方案。

由于裁剪图片时，图像的最小单位是像素，所以矩形的对边的像素数量应该相同，或者圆角应该锐化。但是，在手动操作期间，像素数可能会改变，或者拐角可能会产生后退角。所以在切图的时候，把原图放大300%以上再切。将整个大图切割后，选择所有一系列切片，然后使用软件中的图像优化工具，即菜单栏中的“窗口”下拉菜单“优化”命令，对所有小切片进行优化，即可解决上述问题。然后使用文件菜单下的“导出”命令生成HTML网页和图片。最后在网页制作软件DREAMWEAVER中搭建一个网站，将导出的网页和小图片放到网站上。无法使用导出的网页文件。因为网站的页面大小要求统一。所以接下来的工作就是在网页制作软件中制作表格。用区块的思路看整个网页的布局。一个积木就是一张桌子。把一个网页想象成许多独立的表格。将导出的图片插入单元格。日常工作中常用的图形图像处理软件有Photoshop、Flash、Firework等。这些软件都有切片工具，但在制作网页时，图形图像处理软件首选使用Firework。只要在DREAMWEAVER中双击图像，系统就会自动调用Firework软件。

2裁剪图片的原则

一张地图可以有多种相关的裁剪方案，但并不是所有的裁剪方案都适合网页编程。所以在切图中要保证实现最佳的切图方案，所以在切图中也涉及到切图的原理和技巧。

2.1块和片的概念

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

2.2分块原则1:将相关内容作为一个块。

根据原图中的相关内容，确定整体的分割策略，即分割要有分块的思想，把整个网页看成多个分块，每个分块就是一个表格，一个分块中的每一个细节都是表格中一个单元格内的内容。即整个网页被认为是由多个表格组成，然后指定每个表格考虑如何裁剪。必须强调的是，要把整个网页看成多个独立的块，切片就是块的内容。按照这个思路，把图片剪下来，然后在网页制作软件中插入多个表格。块对应网页中的表格，切片对应表格中的单元格内容。剪切一张图片时，同一区块内的内容是完整的，也就是说要保证完整的部分在一个区块内，比如某个区域的标题文字、网页的LOGO、网页的广告、网页的导航区等。可以是一个独立的块，方便以后的网页编程和修改。

2.3分块原则二:尽量分成大线，平行切割。

当网页中有大量内容时，显示网页时会有时间差。此时，要求内容显示从上到下、从左到右逐行显示网页内容，决不允许一个网页上的内容乱蹦乱跳。所以分区的时候也要贯穿逐行分区的原则。把画面切的尽量平行，也就是说分成大线，然后一行一行的切。如果一个网页的显示页面是由多个表格组成的，这样做的目的是当客户端浏览一个网页时，因为是由多个表格组成的，客户端和网页服务器会产生多个请求请求，多个表格同时下载信息，所以网页下载速度会比较快。避免把一个网页的整个页面当成一个块，然后把块分成块，导致块中有嵌套的块。因为这种结构是由切片转化为网页的，所以存在表格的嵌套，表格的嵌套影响客户端网页的浏览速度。

2.4切片原则:基于相同的属性。

一般切割原则是:属性相同的区域适合划分为一个切片。相同属性主要是指颜色和形状没有变化，或者X或Y方向没有变化。属性梯度区域适合划分为一个切片。渐变有两种形式:颜色渐变和形状渐变。

3剪图片的技巧

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

3.1减少切片数量。

网页上的文字和图片信息都存储在web服务器上，一个切片就是一个小图片。根据点阵显示原理，对于同一个大图像，当切片数减少时，这个图像存储在web服务器上的信息量减少，也就是说web服务器上的空空间减少。因此，当切片的背景为单色且切片的文字没有影响时，可以采用这种特殊的处理方法来处理该切片。也就是说，可以扔掉颜色单一、文字无效的切片，在DREAMWEAVER中打开站点，插入表格，在对应的单元格中，设置DREAMWEAVER软件提供的单元格背景色，直接从键盘输入文字内容。这种方法实现了切片的效果，同时可以减少存储在web服务上的切片数量。以“JD”的网页为例。COM商城销售新品”为例。实验中，在保证相同网页效果的情况下，减少切片数和不减少切片数，可以得到下表中的数据。从下表的数据可以看出，两种处理方式的结果如下:切片数减少时，图像总容量为102MB，但切片数减少后，图像总容量为40.3MB，显然前后图像总容量变化较大，值得提倡。

3.2减小切片尺寸

对于颜色或形状相同的大面积拼贴，只需从原始图像中剪切出一个像素的切片，然后在DREAMWEAVER中进行拼贴，即可形成所需的图像。

;