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

《PS网页设计中切片使用教程.docx》由会员分享，可在线阅读，更多相关《PS网页设计中切片使用教程.docx（15页珍藏版）》请在三一办公上搜索。

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

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

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

4、些是文本区域，并创建图文并茂的网站界面。使用“切片工具”的方法 和使用选区类似，拖曳出希望切片的区域即可，如图5所示。I歉谴术中心除对于有些切片，本身就位于一个独立的图层，那么就更容易创建切片。首先选 择该图层，然后执行菜单“” “”如图6所示。羿1写艺视线17|E31921 E3 8戏鸵创远向全国摄景 胃影作品，选中的11 出现在华艺创远编样正常不搓明度:100%A锁定： / + 19 埴充:100%A图层X |通道|路径|F名吉年书$去家张良 亍生为书籍提词，并 岳有兴致的参观.利润就是企业的生命戏,访市场部总经理i娇T 华艺创远向国摄影师、击臭一华艺但远软件开发有限公司标志与名片d Ad

5、ob e数字艺术大赛校园行活动已回谶结束 华艺创远全程报道郑州-拉-2007飞行天|郑州范茹秀婴儿摄有专家招聘女摄影U币和.IT世界网，华艺色1远-视频教程商业化的先华艺由1远招聘资亍策网页设十师、插画和动n的Adob e数字艺术校园行走进*可南省广播电Mob电数字艺术校园行走进郑州航空管理学电梯I辱图层is首页联系我们;司标志与名片 行活动已圆满结束 飞行天路萝想之旅 &画和动画设计师 进省广播电视大学 进郑州航院 进河南农业大学 进工业贸易学校rA, .o -i Tf _ 夫田b 司 元城弟M &cr om电di痛收购可以使用【存储为Web和设备所用格式】命令来导出和优化切片图像。ps将每

6、 个切片存储为单独的文件并生成显示切片图像所需的HTML或CSS代码。 在处理切片时，我们要记住以下几个基本要点：可以通过使用切片工具或创建基于图层的切片来创建切片。创建切片后，可以使用切片选择工具选择该切片，然后对它进行移动和调整 大小，或将它与其它切片对齐。 可以在【切片选项】对话框中为每个切片设置选项，如内容类型、名称和 URL。可以使用【存储为Web和设备所用格式】对话框中的各种优化设置对每个 切片进行优化。可以在ps和【存储为Web和设备所用格式】对话框中查看切片。下列特性 有助于识别并区分切片：切片线条定义切片的边界。实线指明切片是用户切片或基于图层的切片；而 虚线指明切片是自动切

7、片。切片颜色将用户切片和基于图层的切片与自动切片区分开来。默认情况下， 用户切片和基于图层的切片带蓝色标记，而自动切片带灰色标记。 此外，【存储为Web和设备所用格式】对话框还使用颜色调整使未选中的 切片变暗。这些调整只是出于显示目的，不会影响最终图像的颜色。默认情 况下，对自动切片的颜色调整量是用户切片的两倍。切片编号切片从图像的左上角开始，从左到右、从上而下进行编号。如果更 改切片的排列或切片总数，切片编号将更新以反映新的顺序。2创建切片2.1使用切片工具创建切片选择切片工具。绘制的任何切片都将自动出现在文档窗口中。选取选项栏中的样式设置，如图7所示：* u国书土盘右娜垃.刑岑-3登茗包远

8、计牛F宸都枝司标志与名.评而尊鄂忌M 玮 W赋血 财g 做 畔箱岫岫宕t嫁不嫩祖;：1?% _上fis ESfit -中国电力出帜吐折占勃瞎通说计标. , 2.11 r li %prrrvj图7正常在我们拖动的同时来确定切片比例。如图8所示:I p? ooi-pSd loos (MM麻系我们华艺视枝I图书光02! S-03 回毕聚职敝字琶术中心Ana. | 遍M，0#4g GrHt#图8固定长宽比设置高宽比。输入整数或小数作为长宽比。例如，若要创建一个宽度是高度两倍的切片，请输入宽度6和高度3。如图9所示：2I塞手荐走泼的汗才0fl埋定邸kk .首瓦联聿靠门华艺莪罪11国书殊君11授Ki代暮1

9、样式：El定妥置比v猫度图书光盘/在线联程Met*玦。比小卬L.用新倒切瞧成碱FFT律汤M一里吝惟r上.中-下，Fhet官如p I：&蜃峰从八门到亮如 中X、n . u 新的非期为美刊W略芝术嘛方卖的一曲和注标吉划;FC只心，三芟MH在字冗却1酒|.皆节）祯#M IRv.lfftalR 7,叶用僭惨般证此 f卯r芯蔺巷菟琳耕第匚二十一翰Ft嗥“队中W魂制安耳车有卜修）小稿发其标嘶* 叫.ma吕虹C?c评寂功能 其国定 沿理Mm 8渤蚌惟受垃哉秋 三1】、- J-1 I 口：蓄其污发， ?K：K乾3莆括铸专t 临如t衍至.K的亍菸四稼 H a g 特性云平洋君稿（；七振） FhbUlhpp潼灵点

10、踱晚详解仇秉） 寻匚，：-J1IV II I V- rJ i 世哇,丸MZ聂夕T皂/I? 13$图9固定大小指定切片的高度和宽度。输入整数像素值。如图10所示。p： 001-psd 0 100S （首页联系我们华艺视绣 In江牧字艺氟啪ms杭所有就&纪KUdoB e Photoshop CS2志制作实例教程附2CIHUdebe Fhsteship C5E新特性详解即学即会#附匹Mash FrofeinoRal &中文版新特性详解附况DTAdobe Fhci toskcip CS3斯特性枢竟（BatQFlashS转场敏果剖析Ct、中、下）Fhotshp妥图层从人门到高/ （共5集）Adobe C

11、aptiinte W新功能初探关于A dot.也数字芝术解决方案的一些想洼标志制作3而三菱五环百事日回郑用商业银行）Adobe After Effects T, 口十大新特性概述Photo shop如动态画笔基础教学U 一集）Pltoloshop匚史绘制宝马车标十集图10在要创建切片的区域上拖动。按住【Shift】键并拖动可将切片限制为正方形。按住【Alt】键拖动可从中心绘制。2.2基于参考线创建切片向图像中添加参考线。选择切片工具，然后在选项栏中单击【基于参考线的切片】。如图11和12所示：样式;正常宽度:局度:图1112图2.3基于图层的切片基于图层的切片与图层的像素内容相关联，因此移动切

12、片、组合切片、划分 切片、调整切片大小和对齐切片的唯一方法是编辑相应的图层，如图13所示。 除非我们将该切片转换为用户切片。17|E321 E 8单g创远向全国摄詈 旅影作品，选中的四 出现在华艺创远端博阕层X |通道I路径，100%100%AV不透明度;利润就是企业的生命线，访市场部总经理3 华艺由1远软件开发有限公司标志与名片设i AdoL e数字艺术丈赛校园行活动已圆满结束 华艺立1远全程报道郑州45-2007飞行天8 郑州范茹秀婴儿摄影专家招聘女摄影U币和F IT世界网，华艺色1远-视频教程商业化的先 华艺但1远招聘资F策网页设十师、插画和动1! Adc数字艺术校园行走进袒I南省广播电

13、视正常:口拼+ 埴充:、司标志与名片 行活动已圆满结束 飞行天路梦想之旅 &画和动画设计师 进省广播电视大学 进郑州航院 进河南农业大学 进工业贸易学校F名吉年书法家张良H生为书籍提词，并 彳有兴致的参观.圭由真廿口h曲管甘1寻政对M：elK om edi :泊勺收购Adob e数字艺术校园行走进郑州航空管理学院图13将自动切片和基于图层的切片转换为用户切片：图像中的所有自动切片都链接在一起并共享相同的优化设置。如果要为自动 切片设置不同的优化设置，则必须将其提升为用户切片。使用切片选择工具，选择一个或多个要转换的切片。单击选项栏中的【提升】。3切片选择工具【切片选择工具】是在我们使用【切片工

14、具】创建切片后，用来更精确的调 整和划分切片用的，我们可以选择某个部分的切片，利用控制句柄来调整它的大 小，也可以利用选项栏中的【划分】按钮来从一个切片中划分出多个切片。我们 可以利用键盘中的【K】键来直接选择【切片工具】或【切片选择工具】。选择切片通过使用切片选择工具对图片进行单击选择，按住【shift】键可选 择多个切片。移动切片选择切片后，按住鼠标左键不放进行移动，如图14所示：字昔漫中山华艺祖域 V授权代理著g务任书法家半快毕三三0元可登国捍梨陆顿特征案 网物并品.逸中的住嵩样恒击索捋% r文椅牛酬43.跑图14调整切片大小对切片大小调整方法有两种，一种通过切片的控制点进行自由 调整，

15、另一种通过双击切片，在选项对话框中进行调整。如图15所示:华艺爆域3%、 宜骨:T 59M/43.2M土也国毕芝Ei主漏挟豹卸X-?J远肯全氐摄肾策 植特智泛.先生为书箱提闭,井抻飘中心著名吉任书法家聚艮复制切片选择要复制的图片，按住【Alt】键进行移动。组合切片选择要组合的切片，点击鼠标右键，选择【组合切片】选项。更改切片的堆栈顺序选择切片，通过选项栏中的堆叠顺序选项进行更改。如图 16所示。A B C D图16A.置为顶层B.前移一层C.后移一层D.置为底层对齐切片选择切片，通过选项栏的对齐选项按钮进行对齐。如图17所示。图17A.顶对齐B.垂直居中对齐C.底对齐D.左对齐.水平居中对齐F

16、.右对齐分布切片选择切片，通过选项栏中分布按钮进行分布。如图18所示。3玷吐仙2A E C DEF图18A.按顶分布B.垂直居中分布C.按底分布D.按左分布.水平居中分布F.按右分布删除切片选择【视图】一【清除切片】进行删除。如想删除某一个切片，可单击 鼠标右键选择【删除】。锁定切片选择【视图】一【锁定切片】。注意事项:切片最重要的是区分出网页中哪些是图像区域，哪些是文本区域，并创建图 文并茂的网站界面；切片前，先要仔细对设计进行分析，考虑要因设计制宜；切片时，可不断放大缩小设计观察精准度，可以根据辅助线进行切片；切片后，要对导出的切片进行审核是否符合要求，比如大小颜色图片质量透明 背景与否等

17、，如果不合适，要重新对切片进行优化输出或者重新切片。1、输出背景观察背景：如果是单一颜色的,则不需要切片，网页制作的时候设置背景RGB即可；如果是有规律的图片，那么按最小单位切一条几个像素的切片，单独优化输 出，制作时不是插入图片而是作为背景图片可以横向平铺达到设计效果。（为什么不是全部切片完了再输出呢，因为，背景图片上一般还会叠加其他的 图片，如LOGO,就要输出透明背景的前景图片;有时切片会有重叠现象，所以采用 分别输出的方法能达到比较好的效果。）2、前景图片（包括网站标识，特殊字体的标题，导航，中英文切换的文字连接,特殊的小图标，特 殊的边角）观察背景上的网站标识：如果直接插入切片输出会

18、连带背景图案一起输出，那样以后制作也面的时候 可能标识部分的图和背景对接不好产生错位.切片的时候隐藏背景单独优化输出.如果一张网页里面有重复用到的一张图，只需要切一个一次就可以了.3、线如果是直角的单色的边框，可以表格边框设置，就不需要切片如果是不规则角（圆角，图案），可以单单切下框的角,然后观察剩余的线:按照如 切片背景图案的方法进行切片.4、切片命名切片单独输出，可以按照其用途重新命名，如背景可以为MAIN_BG.GIF，网站 标识为LOGO.GIF等,切记不要用中文命名，那样在制作的时候插入图片的图片 名可能就是一大串乱码.5切片保存首页和内容页的切片可以放在同一个站点下的IMAGE文件夹下面,但是如 果素材图片多时，最好另起一个文件夹单独保存，以便制作和修改的方便.FW切片导出时设置为只要切片输出”,如果按照HTML和图像输出会有很多 的废代码，所以手动设置布局比较理想.