现在的位置: 网页制作教程网站制作经验 >正文
美文欣赏

如何在Photoshop中切割图片

发表于2017/2/21 网站制作经验 0条评论 ⁄ 热度 1,103℃

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.切片把图片分割成几个部分,如果丢掉其中一个部分,系统会自动给这一部分填充上纯色的。

  • 暂无评论