导语

前面五期，建站要用的东西已经铺开了：写代码用 Notepad++（第一期），本地跑站用 phpStudy（第二期），看别人页面结构用 仿站扒皮（第三期），管内容用 迅睿CMS（第四期），给网站挂小图标用 比特虫（第五期）。轮到页面上那些图了。Banner、按钮、栏目配图，不能原图直接往站上扔，太大加载慢，切得不对也难排版。本期介绍一个专门服务网页图片的老工具：Adobe Fireworks。

软件介绍

Fireworks 最早由 Macromedia 开发，后来归到 Adobe。它不是拿来替代 Photoshop 做精修的，定位更明确：做网页和屏幕上的图。位图、矢量可以放在同一个文件里处理，按钮、图标、页面配图都能做，导出时还能控制格式和体积。

它真正让做站的人离不开的，是切片、热点和导出。一张整页效果图，可以按区域切开，分别导出 jpg、png 或 gif；文字区域、重复背景、按钮状态也能分开处理。对还在用传统模板拼页面的人来说，这一步比在大图软件里来回裁切省事。

下载与使用方法

Fireworks 需要安装后使用。本期安装包放在百度网盘，提取码一并给出：

网盘地址：https://pan.baidu.com/s/1jPVyxWau3BT3XAV-KvKahA
提取码：1xl2

上手可以按这个顺序：

1. 先定画布。网页图按实际显示尺寸来做，不要先做一张超大图再硬缩。Banner、按钮、图标分开建文件，后面替换更干净。

2. 按图层整理。背景、文字、按钮、图标分层放。以后只换一句文案或一个按钮，不用把整张图重做。

3. 需要切开再切片。整页效果图里，照片、渐变大图用 jpg；图标、透明底、文字边缘要求干净的部分用 png。切片时顺着模块边界切，别切到文字中间。

4. 导出前看体积。同一张图多试两档压缩，肉眼看不出差别就用更小的那档。网页加载速度，往往就卡在这几张图上。

5. 按钮可以做状态。正常、悬停、按下，用它的状态来管理，不用另存三张对不齐的图。

主要特点

• 为网页图而生。做 Banner、按钮、图标、页面配图比较顺手，不像通用修图软件那样功能铺得太开。

• 位图和矢量能一起处理。照片、形状、图标不用拆到两个软件里来回倒。

• 切片和热点直接服务页面。整图可以按区域切开，也能给图片区域加链接热点。

• 导出格式贴着网页走。jpg、png、gif 都能出，导出时能平衡清晰度和文件大小。

• 适合传统建站流程。对还在切图、套模板、改静态页面的人，它的工作方式和页面结构是对得上的。

知也的几个使用提醒

工具能用，但有几件事得先说清楚，免得下载回去才发现跟预期不一样：

1. 它已经停止功能更新。Adobe 在 2013 年停止了 Fireworks 的后续功能开发。它现在适合处理传统网页图片，不适合拿来追新的设计规范或新系统特性。

2. 安装前先看系统。网盘里的安装包要先确认是 Windows 还是 Mac，也要看清自己的系统版本。旧软件不是下下来就一定能在新系统上正常打开。

3. 切片别切得太碎。早年追求“整页切片”现在已经不划算。现在更实用的做法是：大图、图标、按钮分开导出，页面结构交给 HTML 和 CSS，不要把所有文字都压进图片里。

4. 文字尽量别做死在图上。栏目名、按钮文字、活动价格这些会改的内容，放进网页文字里更好。图片只承担装饰和展示，后期改字不用重新导图。

5. 透明底用 png，照片用 jpg。图标和 logo 用 jpg 容易出白边或脏边；大照片用无损 png 又会让页面变慢。格式选对，比后期反复压缩有用。

为啥不推荐别的

做网页图当然也能用 Photoshop，它修图强，图层和滤镜也更全。但只为了切一张 Banner、做一个按钮、导出几个图标，Fireworks 更轻，路径也更短。在线制图工具适合临时出图，一旦要管理切片、按钮状态和反复修改，本地文件还是更稳。

所以我把它放在建站工具里，不是因为它比所有新工具都先进，而是它做传统网页图片仍然顺手。你要做照片精修、品牌视觉或持续更新的大型设计项目，Photoshop 更合适；要做页面上的图、按钮和图标，Fireworks 够直接。

小结

Fireworks 是一款面向网页的图片制作辅助工具，能在同一文件里处理位图和矢量，适合做 Banner、按钮、图标，也能切片、加热点、控制导出体积。它已经停止功能更新，不适合追新，但处理传统建站里的网页图片仍然实用。安装包在百度网盘，提取码是 1xl2。下载前先确认系统版本，导出时记得把清晰度和文件大小一起看。

码字不易，多谢点赞支持！