PS网页设计中切片使用教学教程.docx

《PS网页设计中切片使用教学教程.docx》由会员分享，可在线阅读，更多相关《PS网页设计中切片使用教学教程.docx（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、.PS 网页设计中切片使用教程1 使用切片【切片工具】通常是在设计 Web 页中用来分割页面的工具，就像在Dreamweaver 中绘制表格一样，在 ps 中我们同样可以使用【切片工具】直接在图像上绘制切片线条，或使用图层来设计图形并创立基于图层的切片。ps 中的网页设计工具可以帮助我们设计和优化单个网页图形或整个页面布局。通过使用切片工具可将图形或页面划分为假设干相互严密连接的局部，并对每个局部应用不同的压缩和交互设置。【存储为Web 和设备所用格式】对话框可让我们在存储为一些网页兼容的格式之前，预览不同的优化设置并调整颜色调 板、透亮度和品质设置。固然对图像切割的最大好处就是提高图像的下载

2、速度， 减轻网络的负担。另外，分多块下载的图像，在视觉上，也会给观众以“进展中.” 的感觉，在心理上给人以下载速度快的错觉。虽然在网络上很多图片都进展了切割，但在正常显示状态下，我们完全不能直接看出哪些图片被切割过，而哪些是完整的。因此，切片无疑是一种奇异的、“鱼与熊掌兼得”的解决方案。要确定哪些图片被切割过，可以在网页中的文本区域往图片区域拖曳，假设图片分小块变暗变蓝，则该图片是被切割过的，如图1 所示。图 1切片使用 HTML 表格或 CSS 层将图像划分为假设干较小的图像，这些图像可在网页上重组合成完整的图像。通过划分图像，我们可以指定不同的 URL 链接以创立页面导航，或使用其自身的优

3、化设置对图像的每个局部进展压缩。而在ps 中，供给了“切片工具”和“切片选择工具”两种实现切割图像的工具，如图 2 所示。图 2对于我们设计的网页版面，用户可以考虑手动进展切割，以区分出文本或图像区域。而对于一般用来展现的图像，完全可以进展均匀的简洁切割，这样会更加快速和高效。中选择了“切片工具”后，在图像上单击右键，在快捷菜单中选择“划分切片”命令，如图 3 所示。图 3在弹出的“划分切片”对话框中，设置“水平划分为”和“垂直划分为”两项的纵向切片和横向切片的数量分别为“3”和“6”。可以看到图像上已经消灭了切片的预览，如图 4 所示。图 4除了之前所描述的切片优势外，切片最重要的是区分出网

4、页中哪些是图像区域，而哪些是文本区域，并创立图文并茂的网站界面。使用“切片工具”的方法和使用选区类似，拖曳出期望切片的区域即可，如图 5 所示。图 5除对于有些切片，本身就位于一个独立的图层，那么就更简洁创立切片。首先选择该图层，然后执行菜单“”“”如图 6 所示。图 6可以使用【存储为 Web 和设备所用格式】命令来导出和优化切片图像。ps 将每个切片存储为单独的文件并生成显示切片图像所需的 HTML 或 CSS 代码。 在处理切片时，我们要记住以下几个根本要点： 可以通过使用切片工具或创立基于图层的切片来创立切片。 创立切片后，可以使用切片选择工具选择该切片，然后对它进展移动和调整大小，或

5、将它与其它切片对齐。 可以在【切片选项】对话框中为每个切片设置选项，如内容类型、名称和URL。 可以使用【存储为 Web 和设备所用格式】对话框中的各种优化设置对每个切片进展优化。可以在 ps 和【存储为 Web 和设备所用格式】对话框中查看切片。以下特性有助于识别并区分切片： 切片线条定义切片的边界。实线指明切片是用户切片或基于图层的切片；而虚线指明切片是自动切片。 切片颜色将用户切片和基于图层的切片与自动切片区分开来。默认状况下， 用户切片和基于图层的切片带蓝色标记，而自动切片带灰色标记。 此外，【存储为 Web 和设备所用格式】对话框还使用颜色调整使未选中的切片变暗。这些调整只是出于显示

6、目的，不会影响最终图像的颜色。默认状况下，对自动切片的颜色调整量是用户切片的两倍。 切片编号切片从图像的左上角开头，从左到右、从上而下进展编号。假设更改切片的排列或切片总数，切片编号将更以反映的挨次。2 创立切片2.1 使用切片工具创立切片 选择切片工具。绘制的任何切片都将自动消灭在文档窗口中。 选取选项栏中的样式设置，如图 7 所示：图 7正常在我们拖动的同时来确定切片比例。如图 8 所示：图 8固定长宽比设置高宽比。输入整数或小数作为长宽比。例如，假设要创立一个宽度是高度两倍的切片，请输入宽度 6 和高度 3。如图 9 所示：图 9固定大小指定切片的高度和宽度。输入整数像素值。如图 10

7、所示。图 10在要创立切片的区域上拖动。按住【Shift】键并拖动可将切片限制为正方形。按住【Alt】键拖动可从中心绘制。2.2 基于参考线创立切片向图像中添加参考线。选择切片工具，然后在选项栏中单击【基于参考线的切片】。如图 11 和 12 所示：图 11图 122.3 基于图层的切片基于图层的切片与图层的像素内容相关联，因此移动切片、组合切片、划分切片、调整切片大小和对齐切片的唯一方法是编辑相应的图层，如图 13 所示。除非我们将该切片转换为用户切片。图 13将自动切片和基于图层的切片转换为用户切片:图像中的全部自动切片都链接在一起并共享一样的优化设置。假设要为自动切片设置不同的优化设置，

8、则必需将其提升为用户切片。 使用切片选择工具，选择一个或多个要转换的切片。 单击选项栏中的【提升】。3 切片选择工具【切片选择工具】是在我们使用【切片工具】创立切片后，用来更准确的调整和划分切片用的，我们可以选择某个局部的切片，利用掌握句柄来调整它的大小，也可以利用选项栏中的【划分】按钮来从一个切片中划分出多个切片。我们可以利用键盘中的【K】键来直接选择【切片工具】或【切片选择工具】。选择切片通过使用切片选择工具对图片进展单击选择，按住【shift】键可选择多个切片。移动切片选择切片后，按住鼠标左键不放进展移动，如图 14 所示：图 14调整切片大小对切片大小调整方法有两种，一种通过切片的掌握

9、点进展自由调整，另一种通过双击切片，在选项对话框中进展调整。如图 15 所示：图 15复制切片选择要复制的图片，按住【Alt】键进展移动。组合切片选择要组合的切片，点击鼠标右键，选择【组合切片】选项。更改切片的堆栈挨次选择切片，通过选项栏中的堆叠挨次选项进展更改。如图16 所示。图 16A.置为顶层 B.前移一层 C.后移一层 D.置为底层对齐切片选择切片，通过选项栏的对齐选项按钮进展对齐。如图 17 所示。图 17A.顶对齐 B.垂直居中对齐 C.底对齐 D.左对齐 E.水平居中对齐 F.右对齐分布切片选择切片，通过选项栏中分布按钮进展分布。如图 18 所示。图 18A.按顶分布 B.垂直居

10、中分布 C.按底分布 D.按左分布 E.水平居中分布 F.按右分布删除切片选择【视图】【去除切片】进展删除。如想删除某一个切片，可单击鼠标右键选择【删除】。锁定切片选择【视图】【锁定切片】。留意事项：切片最重要的是区分出网页中哪些是图像区域，哪些是文本区域，并创立图文并茂的网站界面； 切片前,先要认真对设计进展分析,考虑要因设计制宜； 切片时,可不断放大缩小设计观看精准度,可以依据关心线进展切片； 切片后,要对导出的切片进展审核是否符合要求,比方大小颜色图片质量透亮背景与否等,假设不适宜,要重对切片进展优化输出或者重切片。1、 输出背景观看背景：假设是单一颜色的,则不需要切片,网页制作的时候设

11、置背景 RGB 即可； 假设是有规律的图片,那么按最小单位切一条几个像素的切片,单独优化输出,制作时不是插入图片而是作为背景图片可以横向平铺到达设计效果。(为什么不是全部切片完了再输出呢,由于,背景图片上一般还会叠加其他的图片,如 LOGO,就要输出透亮背景的前景图片;有时切片会有重叠现象,所以承受分别输出的方法能到达比较好的效果。)2、前景图片(包括 网站标识,特别字体的标题,导航,中英文切换的文字连接,特别的小图标，特别的边角)观看背景上的网站标识：假设直接插入切片输出会连带背景图案一起输出,那样以后制作也面的时候可能标识局部的图和背景对接不好产生错位.切片的时候隐蔽背景单独优化输出.假设

12、一张网页里面有重复用到的一张图,只需要切一个一次就可以了.3、线假设是直角的单色的边框,可以表格边框设置,就不需要切片假设是不规章角(圆角,图案),可以单单切下框的角,然后观看剩余的线:依据如切片背景图案的方法进展切片.4、切片命名切片单独输出,可以依据其用途重命名,如背景可以为 MAIN_BG.GIF,网站标识为 LOGO.GIF 等,切记不要用中文命名,那样在制作的时候插入图片的图片名可能就是一大串乱码.5 切片保存首页和内容页的切片可以放在同一个站点下的 IMAGE 文件夹下面,但是假设素材图片多时,最好另起一个文件夹单独保存,以便制作和修改的便利.FW 切片导出时设置为“只要切片输出“,假设依据“HTML 和图像“输出会有很多的废代码,所以手动设置布局比较抱负.