fireworks怎么切图 怎样切圆

来源：蜘蛛抓取(WebSpider) 时间：2015-04-29 00:13 标签： fireworks切图教程
当前位置: >
教你Fireworks使用切片工具
阅读工具：字体：
　　在fireworks或者是photoshop中设计好的网页效果图，需要导入到Dreamweaver中进行排版布局。在导入到Dreamweaver之前，可以使用Fireworks对效果图进行切片和优化，然后才能够把优化好的切片输出到Dreamweaver的站点中进行布局。切片的目的是为了获得图像素材，也就是说能够通过写XHTML语言脚本实现效果的部分，就不需要切片，而必须用图像的地方，则一定要切片。下面通过一个实例来给大家介绍一下Fireworks CS3的切片和优化功能，具体操作步骤如下：
　　1、在Fireworks CS3中打开制作好的网页效果图，如图1-23所示。
　　图1-23 在Fireworks CS3中打开制作好的效果图
　　【说明】效果图中的辅助线是在效果图设计之初就添加完毕的。
　　2、选择Fireworks CS3中的【切片】工具，对效果图进行切片，切片完成后的效果如图1-24所示。
　　图1-24 切片完成后的效果
　　【说明】切片的时候，尽量保证所有的切片和被切片的图像尺寸一致，不要切片大于或者小于被切片的图像，同时切片之间尽量保持不要重叠。
　　3、几个特别需要注意的地方来详细给大家说一下，首先是在内容区域，文本的前方有小的黑色三角箭头，这是用图像来制作的，所以必须要切片，但是由于所有文本前方的箭头图标都是一样的，所以只需要切一张即可。如图1-25所示。
　　图1-25 切片小图标
　　4、同样的道理，在这个效果图中，有很多的圆角效果，但是在切片的时候同样的效果仍旧只切片一张即可。如图1-26所示。
　　图1-26 切片圆角图像
　　5、切片完成后，选择Fireworks CS3中的【2幅】窗口，如图1-27所示。在这个窗口的左侧，是可编辑的原图，而在这个窗口的右侧，则是优化以后的图像。在这个窗口的下方，可以看到详细的关于每一个切片的文件量和下载时间等信息。
　　图1-27 fireworks的【2幅】窗口
　　6、按快捷键【F6】，打开Fireworks CS3的【优化】面板，使用【指针】工具，在【2幅】窗口的左侧依次选择切片，然后在【优化】面板中进行相应的优化操作，最终优化后的图像效果，可以在【2幅】窗口的右侧进行观察，如图1-28所示。
　　图1-28 对切片进行优化
　　7、对每一张切片进行优化后，就可以导出所有的图像素材了。选择【文件】@@【导出】命令(快捷键为【Ctrl+Shift+R】)，会弹出Fireworks CS3的【导出】对话框，如图1-29所示。
　　图1-29 Fireworks CS3的【导出】对话框
　　8、在【导出】对话框中的【导出】下拉列表中选择【HTML和图像】选项，这样可以激活面板右下角的【选项】按钮，单击【选项】按钮，打开【HTNL设置】对话框，如图1-30所示。
　　图1-30【HTML设置】对话框
　　9、切换到【文档特定信息】选项卡，设置导出后所有切片的命名规则，可以使用文档名称加切片序号的方式来命名，这样做的目的是为了尽量让切片的名称变得简短，如果切片名称太长，在网页中写脚本的时候字符数量就会增加，网页文件的文件量也就会随之增加，如图1-31所示。设置完毕后，点击【确定】按钮，返回【导出】对话框。
　　图1-31 在【HTML设置】对话框中选择【文档特定信息】选项卡
　　10、更改【导出】对话框中的【导出】类型为【仅图像】。这样导出以后只会根据切片来生成图像而不会生成网页，在【文件名】文本框中输入希望的文件名称，建议命名规则简单易记，如图1-32所示。
　　图1-32 Fireworks CS3的【导出】对话框
　　11、在【保存在】下拉列表中选择需要保存的位置，习惯上我们会把所有切片生成的图像保存到站点的图像文件夹内。在【切片】下拉列表中选择【导出切片】，但是不要勾选下方的【包含无切片区域】和【当前页面】复选框，如图1-32所示。
　　12、全部设置完毕后，点击【保存】按钮即可把这个页面中的所有切片导出到Dreamweaver的站点中去了，生成的图像如图1-33所示。
　　图1-33 导出到站点中的切片
　　所有的切片生成以后，就可以使用这些图像素材，在Dreamweaver CS3中进行排版布局了。
(责任编辑：大宝库)
------分隔线----------------------------
亲们，本作品为原创，使用Fireworks8完成。 新增：PSD源文件（已闭眼，打开后145MB）...
制作软件（制作工具）：FW (Fireworks) gif文件： png文件： 作品名称：《Beating For...
案例欣赏 人的面部可以表现出成千上万、不计其数而又十分微妙的表情，而且表情的变化...
上次跟大家介绍了在魔秀在线制作iPhone手机主题的方法，得到了不少朋友...
很久以来，Fireworks一直因为没有通道功能，为不少惯用photoshop抠图的用户诟病，经过...
用Fireworks 8，我们可以轻松打造滑动菜单，为网页增添一点酷酷的特效。 先看一下最后...
赞助商链接
赞助商链接急 谁又fireworks切片教程 详细点的 谢谢_fireworks吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：16,091贴子：
急 谁又fireworks切片教程 详细点的 谢谢收藏
快试试吧，可以对自己使用挽尊卡咯~◆◆
给个网址 谢过了
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或感谢您对问说网的支持，提出您在使用过程中遇到的问题或宝贵建议，您的反馈对我们产品的完善有很大帮助。
您的反馈我们已收到！
感谢您提供的宝贵意见，我们会在1-2个工作日，通过您留下的联系方式将处理结果反馈给您！在fireworks中,如何使用切片工具_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
在fireworks中,如何使用切片工具
上传于||文档简介
&&在​f​w​中​,​如​何​使​用​切​片​工​具
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢Fireworks如何三等分一个圆形
Fireworks如何三等分一个圆形
　　　　首先任意画出一个圆（配合SHIFT键），颜色无所谓（最好不要是绿色，因为辅助线的颜色默认色为绿色！），因为稍候我们还要变动的。分别从上侧标尺和左侧标尺拖曳出一条绿色的定位线（补充介绍：首先要显示标尺&view--&rules&然后在标尺处将鼠标单击，鼠标变成带有双向箭头的形式，这时候点住鼠标不要松开，向下或者向右就会分别拖曳出相应的辅助线。）将两条辅助线相交在圆的中心点（注意：可以参考圆周的四个路径节点） 。　　（小技巧：画好圆后，你可以使用超级选取工具来拖曳出辅导线，效果会更理想，你可以自己试试看！）　　　　选中工具箱的矩形工具组的多边形工具，并且在&option&面板做相应的设定。&shape&选择&Star&，&Sides=3&，&Angle=1 or 2&。一切设定ok后，将鼠标放到辅助线的中心，按下鼠标，同时配合按住&SHIFT&键，将鼠标向上方拖动，直到三角星的末端距圆的边缘有大约 10px 为止。　　这个时候其实你已经将这个圆三等分了！：）　　　　接下来，选择菜单项& Edit--& Select All&全选(或者Ctrl+A也可以)，然后是&Modify--& Combine--& Punch&。但是，现在用鼠标点击，圆还是一个整体啊？不要着急，还有最后一步，也是最关键的一步呀！选择菜单项&Modify--& Split&。呵呵，看到什么，三个扇形被均匀的切割开来。　　因为我们刚才使用三角星来做切割时，不可避免的在中心产生了空隙，这时候我们需要做细微的调整，将空隙排除，不然就太难看了:( 。这时，我们有一个非常简单的方法，可以将图形放大几倍来操作，比如在400%的视图下来进行操作，选中工具箱的超级选择工具，在中心部分选中每个扇形的中心点分别向中心拖动&&呵呵，一切都看起来那么完美了！　　 　　好了，分别填充上你喜爱的颜色，最后，记得全选，然后&modify--&group&，不然你辛辛苦苦搞的工作被你不经意的鼠标挥舞会搞的七零八落的&&呵呵 ：）　　加一句废话：其实这个东东用来做一个统计图是最为合适的了！
&&&主编推荐
H3C认证Java认证Oracle认证
基础英语软考英语项目管理英语职场英语
.NETPowerBuilderWeb开发游戏开发Perl
二级模拟试题一级模拟试题一级考试经验四级考试资料
港口与航道工程建设工程法规及相关知识建设工程经济考试大纲矿业工程市政公用工程通信与广电工程
操作系统汇编语言计算机系统结构人工智能数据库系统微机与接口
软件测试软件外包系统分析与建模敏捷开发
法律法规历年试题软考英语网络管理员系统架构设计师信息系统监理师
高级通信工程师考试大纲设备环境综合能力
路由技术网络存储无线网络网络设备
CPMP考试prince2认证项目范围管理项目配置管理项目管理案例项目经理项目干系人管理
Powerpoint教程WPS教程
电子政务客户关系管理首席信息官办公自动化大数据
职称考试题目
就业指导签约违约职业测评
招生信息考研政治
网络安全安全设置工具使用手机安全
3DMax教程Flash教程CorelDraw教程Director教程
Dreamwaver教程HTML教程网站策划网站运营Frontpage教程
生物识别传感器物联网传输层物联网前沿技术物联网案例分析
互联网电信IT业界IT生活
Java核心技术J2ME教程
Linux系统管理Linux编程Linux安全AIX教程
Windows系统管理Windows教程Windows网络管理Windows故障
组织运营财务资本
视频播放文件压缩杀毒软件输入法微博
数据库开发Sybase数据库Informix数据库
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&

我要回帖

更多关于 fireworks切图教程 的文章

 

随机推荐