推广 热搜: ACF胶  回收ACF  收购ACF  200*16防溢裙板  济宁防溢裙板  求购ACF  挡尘帘  @2022已最新(今日/知乎)  AH0.6/12矿用按钮箱  GLD2200/7.5/S甲带给煤机 

fireworks制作签名操作(Fireworks详细解析网站设计稿之切割技术)

   日期:2023-07-19     浏览:51    评论:0    
核心提示:今天给大家讲解一下,如何把一个设计好的页面切割成一个可以在IE中浏览的页面。我为为大家介绍如何用Fireworks(以后简称FW)去切图,因为我习惯用FW切图。我们就用上次那个译文中的设计稿做例子讲解

今天给大家讲解一下,如何把一个设计好的页面切割成一个可以在IE中浏览的页面。我为为大家介绍如何用Fireworks(以后简称FW)去切图,因为我习惯用FW切图。我们就用上次那个译文中的设计稿做例子讲解吧。

第一步:用FW打开上次设计好的网站设计稿。

注:一般没有特殊效果的PS设计稿,都可以用FW打开,而且在效果上不会有差异。

如果FW和PS有字体不相认的情况出现的时候,FW会提问是否替换字体,我们选择维持外观,不要替换字体。

fireworks制作签名操作(Fireworks详细解析网站设计稿之切割技术)(1)

第二步:再切图之前我们要看下这个设计稿哪些部分要切成图片。如下图是我所解析出的哪些要切成图片的内容。

1.header部分

2.Nav部分

Nav部分还有一个色块,这个色块我们不用切成图片,完全可以用背景色彩代替。此项将在网页生成篇讲到。

3.main部分

这就是页面的正文部分

fireworks制作签名操作(Fireworks详细解析网站设计稿之切割技术)(2)

上图所说的渐变条这我在补充一下,如果每个栏目中的渐变条是一样的,我们切出一个渐变条即可,如果渐变的高度不同,那么我们要切出多个渐变条。这个例子我们采用一个渐变就可以。

在这个页面中还有一个虚线, 我没有采用图片,在生成网页时我会用CSS定义成虚线。

下图为此虚线。

所绘切片图如下:

fireworks制作签名操作(Fireworks详细解析网站设计稿之切割技术)(3)

第三步:下面我们开始用FW将切片导出为图片了。

1.选中第一个Logo部分所绘的渐变切片。

2.按Ctrl Shift X,打开导出预览对话框。如果默认的格式为GIF,我们就要和下面操作一样转换成jpeg的。有多色彩和多渐变的图像都要导出为jpeg的格式。只有单色的可以导出为gif格式的。

fireworks制作签名操作(Fireworks详细解析网站设计稿之切割技术)(4)

用以上这几步操作把其它几个切片导出为图片。

注:还有一种方法就是为各个切片命名,命名后只要格式相同可以一起导出。比如:选中第一个按钮的切片,在属性下面的切片,案例网站风格那里将名称换成button01

fireworks制作签名操作(Fireworks详细解析网站设计稿之切割技术)(5)

朱丹丹

,
原文链接:http://www.hzciic.com/news/show-49638.html,转载和复制请保留此链接。
以上就是关于fireworks制作签名操作(Fireworks详细解析网站设计稿之切割技术)全部的内容,关注我们,带您了解更多相关内容。
 
打赏
 
更多>同类资讯
0相关评论

推荐资讯
网站首页  |  VIP套餐介绍  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  手机版  |  SITEMAPS  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报