返回首页

Photoshop中使用切片工具的技巧详解

时间:2012-07-04 17:07来源:知行网www.zhixing123.cn 编辑:麦田守望者

Photoshop切片工具主要是用来将大图片分解为几张小图片,这个功能用在网页中比较多。现在的网页中图文并茂,打开一个网页比较耗时,为了不让浏览网页的人等待时间太长,所以将图片切为几个小的组成部分。打开网页时,多个小图片会同时下载,可以明显提高网页刷新的速度。
  几乎所有的图象处理软件都包括切片功能,并能方便地输出切片和包括切片的html文件。当使用大图作网页,需要把它们切成多个图片(切片)时,可以借助这些软件的帮助,而无须用插入表格的方法。
  下面举例说明如何在Photoshop中切割图片:


  1.打开一张图片,选择工具栏上的“切片工具”,有三种样式选择。
  2.选中“切片工具”后,按住左键拖拽一个方形,就出现一个切片。如果在样式中设置了固定大小,在图片上任意点击一下左键,也出现一个切片。
  3.切片选择工具
  ①如果需要变换切片的位置和大小,直接用左键按住某个已选中的切片,就可以随意挪动切片位置;用左键按住切片四周的小黑点,也可随意伸展或收缩切片大小。
  ②如果有多个切片,选取不同的切片,就需要选择工具栏上的“切片选择工具”。
  ③如果在某个切片上单击右键,弹出的菜单上可以选择删除切片或者编辑切片。
  4.切片块的层次顺序:①置为顶层②前移一层③后移一层④置为底层


  5.切片选项:这一项是对切片块进行细致的设置,切片类型分为图像和无图像。
  ①图像,表示这个切片块为原图,就是显示这个切片块原来的图像。
   名称:这个块的名字。
   URL:单击这个块时它所链接的网址。
   目标:表示是在原窗口打开链接,还是在新窗口中打开链接,即html中的target属性。
   信息文本:鼠标移到这个块时浏览器左下角显示的内容。
   Alt标记:图片的属性标记,鼠标移到这个块时显示在鼠标旁的文本信息,当图片不能正常显示时可告诉浏览者这个图片的信息。
   尺寸:设置块的x、y轴坐标,W、H块的精确大小,这个用于需要设置十分精确的切片块。
   切片背景类型:切片块的背景信息设置。
  ②无图像,显示的不是切片块的原图,若不设置文本或背景色就是空白。
   显示在单元格中的文本:显示在这个块的文本信息。
   尺寸:设置块的x,y轴坐标,W,H块的精确大小,这个用于需要设置十分精确的切片块。
   切片背景类型:切片块的背景信息设置。


  6.提升到用户切片:图片中暗的切片块是我们切片时自动生成的,左键单击选中,单击“提升到用户切片”可以让它变亮,变成用户切片。


  7.划分切片:可以把某个切片智能细分成更多小切片。
  选择工具栏上的“切片选择工具”,选中某个切片,单击顶上的“划分切片”按钮,可以按切片个数等分划分,也可以按精确像素划分。


  8.隐藏自动切片:把不是用户手动切片的块隐藏起来。


  9.文件-->存储为Web所用格式(快捷键Ctrl+Shift+Alt+S)。
  ①如果选择“双联”,左侧为图片原稿,右侧为将来在网页上出现的图像,可以用鼠标选中右侧任意一个切片,设置每个小切片图片的类型等等,同时可以设置图片品质用于压缩图片大小。
  ②保存完成后,电脑上就会出现一个名叫index.html的web文件和一个名叫images的图片目录,切分后的图片就保存在这里。index.html就是用切分后的小图片组成的网页文件。
  
  下面介绍保存单个切片的方法:
  ①执行-->存储为Web所用格式
  ②在打开的“存储为web格式”对话框中,选中要单独保存的切片,然后执行存储。
  ③在存储对话框的下面有四个选项:第一个是文件名,自己任意起;第二个是存储图片类型,一般是仅限图像(*jpg);第三个是默认设置,不变;第四个,一定要选择“选中的切片”。
  ④这样单个一张切片图就保存好了。
  注意:当图片较大,切片较多时,可能会只看到上面几张切片,看不到下面的切片,这时只需点击左下角的显示比例,默认100%,你将100%改为50%或者25%即可看到全部切片了。
  
  其它几个问题
  1.还可以使用选区(PhotoshopCS8.0)或从参考线创建切片,并且可以在ImageReady中从选区创建切片。
  “基于参考线创建切片”这一项一直是暗的,是因为画布中没有参考线,视图-->标尺(ctrl+R)可以将参考线显示出来。从参考线创建切片时,将删除所有现有切片。
  注:无法划分基于图层的切片。


  2.如果切片不显示,视图-->显示-->切片,可以将切片显示出来。
  
  3.打开一张图片或新建一个图层的时候,总是默认显示有切片标记符号如01,按快捷键Ctrl+H(不显示额外内容)就可以取消。
  
  4.用户切片和自动切片:保存PS切片后,会自动生成许多小的碎切片(差一个像素都会现成一个图片)。使用“划分切片”对话框以便沿水平方向、垂直方向或同时沿这两个方向划分切片;不论原切片是用户切片还是自动切片,划分后的切片总是用户切片。
  
  5.切片把图片分割成几个部分,如果丢掉其中一个部分,系统会自动给这一部分填充上纯色的。

------分隔线----------------------------
标签(Tag):photoshop photoshop龙8国际平台入口 Photoshop技巧 photoshop源代码 photoshop基础教程
------分隔线----------------------------
推荐内容
  • Photoshop 磁性套索工具的使用方法

    1、打开一张海星图片 2、在工具箱中点选磁性套索工具 3、在选项栏中就会显示如图所...

  • 学好PS,你必须造的实用技巧!

    技巧不多,但都万里挑一,非常实用,不仅有快速隐藏图层的方法,还有帮新手快速抠图 ...

  • Photoshop CC 2015 激活图解详细教程

    1. 激活前,请确保软件至少打开过一次; 2. 下载激活工具后,解压,进入补丁,找到自...

  • Photoshop CC 2015 安装图解详细教程

    1. 断网,全程保持断网状态。 2. 下载完成后,解压,双击运行 Set-up: 3. 如果出现遇...

  • PS二维码快速制作方法 EVEnXQRCode二维码插件免费下

    有不少小伙伴询问ps二维码插件下载地址,以及插件下载之后如何使用等问题。现小编整理...

  • Photoshop 裁切时自动填补空白 功能使用龙8国际平台入口

    Adobe 宣布Photoshop 将会推出新功能Content-Aware Crop(裁剪感应),即在裁切图片时...

  • 猜你感兴趣
  • 教育技术学动态
  • 教育技术学论文
  • 理论研究
  • 应用研究
  • 资源收藏
  • 百家观点
  • 英文文献
  • 中国电化教育
  • 电化教育研究
  • 中国远程教育
  • 开放教育研究
  • 现代教育技术
  • 远程教育杂志
  • 现代远距离教育
  • 中国教育信息化
  • 中国信息技术教育
  • 中小学信息技术
  • Flash龙8国际平台入口
  • Photoshop龙8国际平台入口
  • 3DMAX龙8国际平台入口
  • AutoCAD龙8国际平台入口
  • CorelDRAW龙8国际平台入口
  • Matlab龙8国际平台入口
  • 其他龙8国际平台入口
  • .Net龙8国际平台入口
  • Asp龙8国际平台入口
  • Php龙8国际平台入口
  • Jsp龙8国际平台入口
  • Ajax龙8国际平台入口
  • Android教程
  • 其他龙8国际平台入口
  • Word教程
  • Excel教程
  • PowerPoint教程
  • Ubuntu教程
  • 其他教程
  • 课件下载
  • 软件下载
  • 视频教程下载
  • 其他下载
  • 教案大全
  • 试题大全
  • 课件大全
  • 其他大全
  • 人像摄影
  • 风光摄影