PS网页设计中切片使用教程Word下载.docx

PS网页设计中切片使用教程Word下载.docx

《PS网页设计中切片使用教程Word下载.docx》由会员分享，可在线阅读，更多相关《PS网页设计中切片使用教程Word下载.docx（11页珍藏版）》请在冰豆网上搜索。

而在ps中，提供了“切片工具”和“切片选择工具”两种实现切割图像的工具，如图2所示。

图2

对于我们设计的网页版面，用户可以考虑手动进行切割，以区别出文本或图像区域。

而对于普通用来展示的图像，完全可以进行均匀的简单切割，这样会更加快速和高效。

当选择了“切片工具”后，在图像上单击右键，在快捷菜单中选择“划分切片”命令，如图3所示。

图3

　　在弹出的“划分切片”对话框中，设置“水平划分为”和“垂直划分为”两项的纵向切片和横向切片的数量分别为“3”和“6”。

可以看到图像上已经出现了切片的预览，如图4所示。

图4

除了之前所描述的切片优势外，切片最重要的是区分出网页中哪些是图像区域，而哪些是文本区域，并创建图文并茂的网站界面。

使用“切片工具”的方法和使用选区类似，拖曳出希望切片的区域即可，如图5所示。

图5

除对于有些切片，本身就位于一个独立的图层，那么就更容易创建切片。

首先选择该图层，然后执行菜单“”“”如图6所示。

图6

可以使用【存储为Web和设备所用格式】命令来导出和优化切片图像。

ps将每个切片存储为单独的文件并生成显示切片图像所需的HTML或CSS代码。

Ø

在处理切片时，我们要记住以下几个基本要点：

可以通过使用切片工具或创建基于图层的切片来创建切片。

创建切片后，可以使用切片选择工具选择该切片，然后对它进行移动和调整大小，或将它与其它切片对齐。

可以在【切片选项】对话框中为每个切片设置选项，如内容类型、名称和URL。

可以使用【存储为Web和设备所用格式】对话框中的各种优化设置对每个切片进行优化。

可以在ps和【存储为Web和设备所用格式】对话框中查看切片。

下列特性有助于识别并区分切片：

切片线条定义切片的边界。

实线指明切片是用户切片或基于图层的切片；

而虚线指明切片是自动切片。

切片颜色将用户切片和基于图层的切片与自动切片区分开来。

默认情况下，用户切片和基于图层的切片带蓝色标记，而自动切片带灰色标记。

此外，【存储为Web和设备所用格式】对话框还使用颜色调整使未选中的切片变暗。

这些调整只是出于显示目的，不会影响最终图像的颜色。

默认情况下，对自动切片的颜色调整量是用户切片的两倍。

切片编号切片从图像的左上角开始，从左到右、从上而下进行编号。

如果更改切片的排列或切片总数，切片编号将更新以反映新的顺序。

2创建切片

2.1使用切片工具创建切片

选择切片工具。

绘制的任何切片都将自动出现在文档窗口中。

选取选项栏中的样式设置，如图7所示：

图7

正常在我们拖动的同时来确定切片比例。

如图8所示：

图8

固定长宽比设置高宽比。

输入整数或小数作为长宽比。

例如，若要创建一个宽度是高度两倍的切片，请输入宽度6和高度3。

如图9所示：

图9

固定大小指定切片的高度和宽度。

输入整数像素值。

如图10所示。

图10

在要创建切片的区域上拖动。

按住【Shift】键并拖动可将切片限制为正方形。

按住【Alt】键拖动可从中心绘制。

2.2基于参考线创建切片

向图像中添加参考线。

选择切片工具，然后在选项栏中单击【基于参考线的切片】。

如图11和12所示：

图11

图12

2.3基于图层的切片

基于图层的切片与图层的像素内容相关联，因此移动切片、组合切片、划分切片、调整切片大小和对齐切片的唯一方法是编辑相应的图层，如图13所示。

除非我们将该切片转换为用户切片。

图13

将自动切片和基于图层的切片转换为用户切片:

图像中的所有自动切片都链接在一起并共享相同的优化设置。

如果要为自动切片设置不同的优化设置，则必须将其提升为用户切片。

使用切片选择工具，选择一个或多个要转换的切片。

单击选项栏中的【提升】。

3切片选择工具

【切片选择工具】是在我们使用【切片工具】创建切片后，用来更精确的调整和划分切片用的，我们可以选择某个部分的切片，利用控制句柄来调整它的大小，也可以利用选项栏中的【划分】按钮来从一个切片中划分出多个切片。

我们可以利用键盘中的【K】键来直接选择【切片工具】或【切片选择工具】。

选择切片通过使用切片选择工具对图片进行单击选择，按住【shift】键可选择多个切片。

移动切片选择切片后，按住鼠标左键不放进行移动，如图14所示：

图14

调整切片大小对切片大小调整方法有两种，一种通过切片的控制点进行自由调整，另一种通过双击切片，在选项对话框中进行调整。

如图15所示：

图15

复制切片选择要复制的图片，按住【Alt】键进行移动。

组合切片选择要组合的切片，点击鼠标右键，选择【组合切片】选项。

更改切片的堆栈顺序选择切片，通过选项栏中的堆叠顺序选项进行更改。

如图16所示。

图16A.置为顶层B.前移一层C.后移一层D.置为底层

对齐切片选择切片，通过选项栏的对齐选项按钮进行对齐。

如图17所示。

图17

A.顶对齐B.垂直居中对齐C.底对齐D.左对齐E.水平居中对齐F.右对齐

分布切片选择切片，通过选项栏中分布按钮进行分布。

如图18所示。

图18

A.按顶分布B.垂直居中分布C.按底分布D.按左分布E.水平居中分布F.按右分布

删除切片选择【视图】—【清除切片】进行删除。

如想删除某一个切片，可单击鼠标右键选择【删除】。

锁定切片选择【视图】—【锁定切片】。

注意事项：

切片最重要的是区分出网页中哪些是图像区域，哪些是文本区域，并创建图文并茂的网站界面；

切片前,先要仔细对设计进行分析,考虑要因设计制宜；

切片时,可不断放大缩小设计观察精准度,可以根据辅助线进行切片；

切片后,要对导出的切片进行审核是否符合要求,比如大小颜色图片质量透明背景与否等,如果不合适,要重新对切片进行优化输出或者重新切片。

1、输出背景

观察背景：

如果是单一颜色的,则不需要切片,网页制作的时候设置背景RGB即可；

如果是有规律的图片,那么按最小单位切一条几个像素的切片,单独优化输出,制作时不是插入图片而是作为背景图片可以横向平铺达到设计效果。

（为什么不是全部切片完了再输出呢,因为,背景图片上一般还会叠加其他的图片,如LOGO,就要输出透明背景的前景图片;

有时切片会有重叠现象,所以采用分别输出的方法能达到比较好的效果。

）

2、前景图片

（包括网站标识,特殊字体的标题,导航,中英文切换的文字连接,特殊的小图标，特殊的边角）

观察背景上的网站标识：

如果直接插入切片输出会连带背景图案一起输出,那样以后制作也面的时候可能标识部分的图和背景对接不好产生错位.切片的时候隐藏背景单独优化输出.

如果一张网页里面有重复用到的一张图,只需要切一个一次就可以了.

3、线

如果是直角的单色的边框,可以表格边框设置,就不需要切片

如果是不规则角（圆角,图案）,可以单单切下框的角,然后观察剩余的线:

按照如切片背景图案的方法进行切片.

4、切片命名

切片单独输出,可以按照其用途重新命名,如背景可以为MAIN_BG.GIF,网站标识为LOGO.GIF等,切记不要用中文命名,那样在制作的时候插入图片的图片名可能就是一大串乱码.

5切片保存

首页和内容页的切片可以放在同一个站点下的IMAGE文件夹下面,但是如果素材图片多时,最好另起一个文件夹单独保存,以便制作和修改的方便.

FW切片导出时设置为"

只要切片输出"

如果按照"

HTML和图像"

输出会有很多的废代码,所以手动设置布局比较理想.