第一步:用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
朱丹丹