新闻 | 天津 | 民生 | 广电 | 津抖云 | 微视 | 读图 | 文娱 | 体育 | 图事 | 理论 | 志愿 | 专题 | 工作室 | 不良信息举报
教育 | 健康 | 财经 | 地产 | 天津通 | 旅游 | 时尚 | 购物 | 汽车 | IT | 亲子 | 会计 | 访谈 | 场景秀 | 发布系统

"津云"客户端
  您当前的位置 : 北方网  >  IT浪潮  >  滚动新闻
关键词:

Fireworks CS3切片工具的使用简述


http://www.enorth.com.cn  2007-08-06 09:52

  引:最近看到很多朋友对网页设计稿“切”成网页的操作有一些疑虑,所有又写了一个简单的关于切片的教程,希望对大家有所帮助,这个教程主要就是介绍了一下切片的流程,写得不细,大家参考一下。

  最近看到很多朋友对网页设计稿“切”成网页的操作有一些疑虑,所有又写了一个简单的关于切片的教程,希望对大家有所帮助,这个教程主要就是介绍了一下切片的流程,写得不细,大家参考一下。原文链接

  在Fireworks或者是PhotoShop中设计好的网页效果图,需要导入到Dreamweaver中进行排版布局。在导入到Dreamweaver之前,可以使用Fireworks对效果图进行切片和优化,然后才能够把优化好的切片输出到Dreamweaver的站点中进行布局。切片的目的是为了获得图像素材,也就是说能够通过写XHTML语言脚本实现效果的部分,就不需要切片,而必须用图像的地方,则一定要切片。下面通过一个实例来给大家介绍一下Fireworks CS3的切片和优化功能,具体操作步骤如下:

  1.在Fireworks CS3中打开制作好的网页设计效果图,如图所示。

  

  在Fireworks CS3中打开制作好的效果图

  【说明】效果图中的辅助线是在效果图设计之初就添加完毕的。

  2.选择Fireworks CS3中的【切片】工具,对效果图进行切片,切片完成后的效果如图所示。

  

  切片完成后的效果

  【说明】切片的时候,尽量保证所有的切片和被切片的图像尺寸一致,不要切片大于或者小于被切片的图像,同时切片之间尽量保持不要重叠。

  3.几个特别需要注意的地方来详细给大家说一下,首先是在内容区域,文本的前方有小的黑色三角箭头,这是用图像来制作的,所以必须要切片,但是由于所有文本前方的箭头图标都是一样的,所以只需要切一张即可。如图所示。

  

  切片小图标

  4.同样的道理,在这个效果图中,有很多的圆角效果,但是在切片的时候同样的效果仍旧只切片一张即可。如图所示。

  

  切片圆角图像

  5.切片完成后,选择Fireworks CS3中的【2幅】窗口,如图1-27所示。在这个窗口的左侧,是可编辑的原图,而在这个窗口的右侧,则是优化以后的图像。在这个窗口的下方,可以看到详细的关于每一个切片的文件量和下载时间等信息。

  

  Fireworks的【2幅】窗口

  6.按快捷键【F6】,打开Fireworks CS3的【优化】面板,使用【指针】工具,在【2幅】窗口的左侧依次选择切片,然后在【优化】面板中进行相应的优化操作,最终优化后的图像效果,可以在【2幅】窗口的右侧进行观察,如图所示。

  

  对切片进行优化

编辑:赵国栋  蓝色理想
[进入IT论坛]
请您文明上网、理性发言并遵守相关规定,在注册后发表评论。
 北方网精彩内容推荐
无标题文档
天津民生资讯
天气交通 天津福彩 每月影讯 二手市场
空气质量 天津股票 广播节目 二手房源
失物招领 股市大擂台 天视节目 每日房价
热点专题
北京奥运圣火传递和谐之旅 迎奥运 讲文明 树新风
解放思想 干事创业 科学发展 同在一方热土 共建美好家园
2008天津夏季达沃斯论坛 《今日股市观察》视频
北方网网络相声频道在线收听 2008高考招生简章 复习冲刺
天津自然博物馆馆藏精品展示 2008年天津中考问题解答
带你了解08春夏服饰流行趋势 完美塑身 舞动肚皮舞(视频)
C-NCAP碰撞试验—雪佛兰景程 特殊时期善待自己 孕期检查
热点新闻排行 财经 体育 娱乐 汽车 IT 时尚 健康 教育

Copyright (C) 2000-2021 Enorth.com.cn, Tianjin ENORTH NETNEWS Co.,LTD.All rights reserved
本网站由天津北方网版权所有