Fireworks网页切片应用详解(一)

来挑战09

来挑战09

2016-02-19 18:22

下面,图老师小编带您去了解一下Fireworks网页切片应用详解(一),生活就是不断的发现新事物,get新技能~

   我们这里所说的切片(Slice)就是将一幅大图像分割为一些小的图像切片,然后在网页中通过没有间距和宽度的表格重新将这些小的图像没有缝隙的拼接起来,成为一幅完整的图像。这样做可以减低图像的大小,减少网页的下载时间,并且能创造交互的效果,如翻转图像等,还能将图像的一些区域用HTML来代替。Fireworks在网页切片制作方面有很强的优势,今天我们就来仔细看看Fireworks网页切片全攻略。

  一、切片在网页制作中的作用

   在网页上的图片较大的时候,浏览器下载整个图片的话需要花很长的时间,切片的使用使得整个图片分为多个不同的小图片分开下载,这样下载的时间就大大地缩短了,能够节约很多时间。在目前互联网带宽还受到条件限制的情况下,运用切片来减少网页下载时间而又不影响图片的效果,这不能不说是一个两全其美的办法了。

   除了减少下载时间之外,切片也还有其他一些优点:

  * 制作动态效果:利用切片可以制作出各种交互效果。例如前面将的按钮的这种状态其实最后导出的文件实质上就是不同状态的切片。
  * 优化图像:完整的图像只能使用一种文件格式,应用一种优化方式,而对于作为切片的各幅小图片我们就可以分别对其优化,并根据各幅切片的情况还可以存为不同的文件格式。这样既能够保证图片质量,有能够使得图片变小。
  * 创建链接:切片制作好了之后,就可以对不同的切片制作不同的链接了,而不需要在大的图片上创建热区了。


  二、创建切片

   使用Fireworks工具箱上的切片工具可以为已经制作好的图片创建切片。如图1所示,切片工具有两类,分别为“矩形切片”工具(Slice tool)和“多边形切片”工具(Polygon Slice tool)。

   下面我们分别就这两类热区工具的使用作介绍。


图1 两类切片工具


  1. 创建矩形切片

  首先打开图像,选择工具箱上的的切片工具,在图像的适当位置上按下鼠标左键并拖动绘制一个矩形区域,当矩形大小适当时释放鼠标,这样就生成了一个切片,如图2所示。该切片区域被半透明的绿色所覆盖,称为切片对象,另外Fireworks根据切片对象的位置以红色分割线对图像进行了分割,称为切片向导。

图2 绘制矩形切片

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)

   要使切片与对象区域紧密匹配,可以和热点一样先选中要制作成为切片的对象,然后点击“Edit”菜单,选择“Insert”-“Slice”;如果选择了多个对象,则会出现一个如图3所示的对话框,选择“Multiple”按钮,可以创建多个切片,如图4所示。

图3 提示对话框

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com)


图4 制作多个切片

展开更多 50%)
分享

猜你喜欢

Fireworks网页切片应用详解(一)

设计创意
Fireworks网页切片应用详解(一)

Fireworks网页切片应用详解(三)

设计创意
Fireworks网页切片应用详解(三)

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

Fireworks网页切片应用详解(四)

设计创意
Fireworks网页切片应用详解(四)

Fireworks优化网页图像详解(一)

设计创意
Fireworks优化网页图像详解(一)

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

Fireworks优化网页图像详解(三)

设计创意
Fireworks优化网页图像详解(三)

Fireworks优化网页图像详解(二)

设计创意
Fireworks优化网页图像详解(二)

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

道林·格雷的画像海报设计作品

道林·格雷的画像海报设计作品

Maroz创意艺术作品欣赏

Maroz创意艺术作品欣赏
下拉加载更多内容 ↓