 您现在的位置： 达达派 >> 教程中心 >> FireWorks教程 >> 网页篇 >> 教程正文 |
|
| 网站设计稿之切割技术 |
|
| 作者：lina 文章来源：设计联盟 点击数： 更新时间：2006-8-10 11:18:29 |
| 教程录入：carcass 责任编辑：carcass 添加到雅虎收藏+ |
|
|
|
|
|
|
今天给大家讲解一下，如何把一个设计好的页面切割成一个可以在IE中浏览的页面。我为为大家介绍如何用Fireworks（以后简称FW）去切图，因为我习惯用FW切图。我们就用上次那个译文中的设计稿做例子讲解吧。
第一步：用FW打开上次设计好的网站设计稿。
注：一般没有特殊效果的PS设计稿，都可以用FW打开，而且在效果上不会有差异。
如果FW和PS有字体不相认的情况出现的时候，FW会提问是否替换字体，我们选择维持外观，不要替换字体。
第二步：再切图之前我们要看下这个设计稿哪些部分要切成图片。如下图是我所解析出的哪些要切成图片的内容。
1.header部分
2.Nav部分
Nav部分还有一个色块，这个色块我们不用切成图片，完全可以用背景色彩代替。此项将在网页生成篇讲到。
3.main部分
这就是页面的正文部分
上图所说的渐变条这我在补充一下，如果每个栏目中的渐变条是一样的，我们切出一个渐变条即可，如果渐变的高度不同，那么我们要切出多个渐变条。这个例子我们采用一个渐变就可以。
在这个页面中还有一个虚线， 我没有采用图片，在生成网页时我会用CSS定义成虚线。
下图为此虚线。
所绘切片图如下：
第三步：下面我们开始用FW将切片导出为图片了。
1.选中第一个Logo部分所绘的渐变切片。
2.按Ctrl+Shift+X，打开导出预览对话框。如果默认的格式为GIF,我们就要和下面操作一样转换成jpeg的。有多色彩和多渐变的图像都要导出为jpeg的格式。只有单色的可以导出为gif格式的。
用以上这几步操作把其它几个切片导出为图片。
注：还有一种方法就是为各个切片命名，命名后只要格式相同可以一起导出。比如：选中第一个按钮的切片，在属性下面的切片，案例网站风格那里将名称换成button01
按上图，将其它按钮的切片以次命名为button02、button03、button04。这样我们就可以一起选中四个按钮切片（按Shift键多选切片），一起导出图片，导出图片使命名为button，而后按钮都会一起保存，而且是按button01、button02、button03、button04一起保存的。 |
|
上一篇教程： Fireworks 制作透明的苹果按钮
下一篇教程： Fireworks 8制作精美网页效果图 |
| 【字体：小 大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 |
最新更新
