学习Fireworks CS3的切片和优化功能
2010-01-07 16:09:54 作者：网友 来源：互联网
1、在Fireworks CS3中打开制作好的网页效果图，如图1所示。
图1 在Fireworks CS3中打开制作好的效果图
效果图中的辅助线是在效果图设计之初就添加完毕的。
2、选择Fireworks CS3中的【切片】工具，对效果图进行切片，切片完成后的效果如图12所示。
图2 Fireworks CS3切片完成后的效果
【说明】切片的时候，尽量保证所有的切片和被切片的图像尺寸一致，不要切片大于或者小于被切片的图像，同时切片之间尽量保持不要重叠。
3、几个特别需要注意的地方来详细给大家说一下，首先是在内容区域，文本的前方有小的黑色三角箭头，这是用图像来制作的，所以必须要切片，但是由于所有文本前方的箭头图标都是一样的，所以只需要切一张即可。如图3所示。
图3 Fireworks CS3切片小图标
4、同样的道理，在这个效果图中，有很多的圆角效果，但是在切片的时候同样的效果仍旧只切片一张即可。如图4所示。
图4 Fireworks CS3切片圆角图像
5、切片完成后，选择Fireworks CS3中的【2幅】窗口，如图5所示。在这个窗口的左侧，是可编辑的原图，而在这个窗口的右侧，则是优化以后的图像。在这个窗口的下方，可以看到详细的关于每一个切片的文件量和下载时间等信息。
图5 Fireworks CS3的【2幅】窗口
- 栏目搜索>>分类导航
-
Flash幻灯
jQuery幻灯
JS幻灯
Flash相册
jQuery相册
图片特效
导航菜单
广告代码
在线客服
表单按钮
其它特效
-
HTML
CSS
JavaScript
Dreamweaver
Fireworks
设计分享
-
建站教程
网站运营
实用工具
网页模板
网页素材
- CSS酷站 网上购物 设计团队 设计博客
- 教程排行榜
- 如何用Fireworks制作水晶效果的导航条？
- Fireworks教程：制作闪光掠过的GIF动画
- Fireworks教程：GIF动画效果的BANNER制作过程
- 用Fireworks打造光芒四射背景的图片效果
- 用Fireworks合成设计制作一个化妆品网站首页
- Fireworks CS5抢先报道--值得期待的四大亮点！
- 用Fireworks打造超酷质感的网页按钮
- Fireworks新手教程：制作五彩炫光效果
- 手把手教你用Fireworks CS3对图标进行细节刻画
- Fireworks轻松制作渐隐线条
- Abode Fireworks CS5、CS4、CS3版本的功能比较(图示)
- FireWorks教程：外发光效果的几种应用
- Fireworks教程:立体质感水晶的制作图解
- 用EyeCandy插件来制作3D旋转GIF动画
- Fireworks图解教程：打造碳纤维风格图标
- 学习Fireworks CS3的切片和优化功能
- 下载排行榜
- 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码
- 半透明立体质感的宽屏flash+xml焦点幻灯代码
- 简洁效果多图切换flash幻灯焦点图代码
- 带标题和数字导航的JS焦点幻灯特效代码
- 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码
- 31款简单实用的CSS+JS下拉菜单脚本
- 3D立体效果金字塔环形旋转的flash+xml相册代码
- 基于jQuery实现的瀑布流布局列表特效代码
- 透明质感上下滑动带小图预览5屏JS焦点图幻...
- 超酷的3D摩天轮flash+xml相册幻灯图片代码
- 能沿多个方向滑动切换的jquery幻灯代码
- 自带多种幻灯效果支持缩略图导航的jquery画...
- 可改图片尺寸和张数的flash幻灯轮换代码
- 很好看的带缓冲效果CSS下拉菜单导航代码
- 基于jquery很有趣的360度全景图片预览特效
- 6屏幻灯上下滑动式带缩略图和文字介绍的fla...