网页设计切图(网页设计切图规范)

网页设计中图像切图技巧

网页设计中图像切图技巧

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

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

　　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里面，用切片平铺形成所需要的图。

;

网页设计好后的切图是什么意思呢

切图就是把用设计软件设置好的图片切成相应的大小，切图后再把图片上传就可以可以加快显示速度，不用等整个图片都下载以后显示。

PS切图步骤：

1、打开PS，然后点击切片工具。

2、点击切片工具后，就可以把图片切成需要的大小。

3、切好图片后，点击导出web所用格式。

4、进入导出web所用格式页面，按住shift键把所有切片都选中。

5、导出格式设置为JPEG。

6、最后点击存储就可以了。

网页切图怎么做? 网页设计切图

网页切图怎么做，网页设计切图的方法。

如下参考：

1.打开PS，点击切片工具，如下图所示。

2.点击切片工具，可以将图片切割成所需的大小，如下图所示。

3.剪切图片后，点击导出特殊网页使用的格式，如下图所示。

4.输入属导出web的格式页面，并按住shift键选择所有部分。

5.导出格式设置为JPEG，如下所示。

6.最后，单击save存储，如下图所示。

网页设计好后的切图是什么意思呢

网页设计好后的切图是将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面，有利于交互，形成良好的视觉感。通俗来讲，把一张设计图利用到切片工具，把自己所需的切成一张张小图，然后用DIV+CSS完成静态页面书写，完成CSS布局。

设计好的网页都需要切图，主流的是dreamweaver、photoshop软件，还有sketch、firework等，低端QQ切图，网页切图等。切图为后端编程者带来方便，提高效率，让网页稿有了交互性，实现平时看到的各种各样的功能，画面浏览速度快，有利于优化。

扩展资料：

一般我们从设计师那得到的都是psd文件，里面有几十或者上百个图层，一般会根据内容分好文件夹，有文字有图片，有的只在特殊情况下显示的，这时候就需要根据自己的需要导出不同的图。

切图的时候也会有许多考虑，比如把哪些内容压缩成一张图片，什么时候用透明背景PNG，什么时候用CSS Sprite（把琐碎的小图比如按钮、logo复制到一张透明背景的图上然后保存为一张图，再用background position去提取。）文字是切成图片，还是复制到HTML里。

一般情况下都不会把文字切成图，除非用到比较特殊的字体或者变形等等，然后即使是photoshop保存为web格式导出的图，有时候尺寸也是很大的，特别是PNG，这时要使用一些专业压缩工具进行二次压缩。

当然有些有前端经验的设计师会把切好的图片发给你，这样就可以直接开始写HTML和CSS了，但是建议还是尽量自己切，掌握熟练的切图技巧也是一个前端应该有的技能。

参考资料来源：百度百科-切图

百度百科-静态页切图

在网页设计中如何用PS切图

1、在Photoshop中打开设计稿，如下图：

2、选择工具板上的slice切片工具，大面积的色块单独切成一块，尽可能的保持在水平线上的整齐，切好的图如下所示：

3、在PhotoShop中选择file-save for web...来输出，这里要注意一些参数的选择：

4、接下来在Dreamweaver里建立站点：

5、在图示左边的site name中为站点起一个名字，如example然后在下面的local root folder中选择刚才导出的站点的文件夹：

6、重新制作页面表格，通常在photoshop中直接导出的htm文件是不可以直接使用的，因为有些地方在实际运用时要作调整：

7、根据这个页面表格所示，在新的页面中建立一个三行一列的表格，把cellpadding,cellspacing,border三项值设为0，不然会有空隙，最后选择表格，背景添加图片即可。

网页美工切图技巧

网页美工切图技巧

　　如何做好网页美工设计，对于新手而言，这还有些小小的难度，尤其是当网页美工设计由几个人接手的时候。在网页美工切图设计之前，我们先基于ps进行新建文件设置，在设置的时候需要注意以下几点：

　　1.一定要做好网页宽度的设置设计，一般网页宽度有760PX、900PX、1000PX等，最好不要超过1200PX的宽度，高度没有限制。大多数做网站的公司都有一个比较合理的标准。

　　2.作为网页背景、网页图标的要清晰，在网站设计的时候比较注重。所以在切图的时候不要切出来的效果与设计的效果相差太大。

　　3.有特效地方，有必要设计出特效样式，以便DIV CSS制作的时候切图使用。

　　4.在做成网页后可改变的文字，需要使用宋体、黑体无需修饰

　　5.细节一定要对齐

　　美工图设计好后要注意的两点：

　　1.导出JPGGIFPNG等格式观察效果。

　　2.不要合层，尽量保持每个文字图标图片都有独立图层，这样在DIV CSS切图时方便隐藏显示切图。

　　在新建设置之后，就要开始进行网页美工设计了，在网页美工设计的过程中要注意：

　　1. 注意页面的分块，着手设计一个页面的时候，你必须根据所掌握的内容，以及其风格，对页面的整体进行分块。分块是一个非常必要且难以掌握的技巧。对于一般杂志来说，它们是有边的，这意味着杂志美工设计师有边可循，依靠边来形成立体感，依靠边来产生未尽的意韵;但是对于web页面，边的概念被淡化了，屏幕可以上下左右的拖动。所以此时分块显得非常必要，目的也就是产生的效果。

　　分块可以用不同着色的色块、框、细线、排列整齐的英文等等，还可以混合使用，但是注意不要过于醒目，因为页面的重点在内容，而不在其他。

　　2、色彩的平衡与呼应。

　　1)色彩的平衡。色彩在页面中可以形成很多的`效果，通过强烈的对比，可以突出页面的重点。还可以通过色彩调配，达到页面稳重度的改变。一般的情况下，页面上方的颜色总是很重，这样才能压住下面的颜色，如果不采取这种办法，整个页面将显得很不稳重，底下的文字图片，有飘出的意味。因此，要使整个页面显得很平衡，必须要有能镇住其他颜色的色彩。

　　2)色彩的呼应。一种比较突出的色彩，如果很突兀地放在页面中，无论你是突出重点也好，还是logo图标，都给整个页面带来了副作用。为此，你必须在相对称的位置加上该色系(对于页面并不醒目)的色彩以呼应，这样可以弱化这种视觉的冲击。

　　3、精确到1个像素

　　如果你是一个成功的页面设计者，你至少会在做出页面前已经把整个页面构思好了;如果你很宽容地对待图片中1个像素的差别，那说明你还不是很合格。

;