aio网页设计系统教程(三).docxVIP

AIO 网站设计系统教程（三） 作者： anylee 来源： webres.cn 第二节： Fireworks 入门 Fireworks?什么软件？你印象中并不熟悉，你只知道 photoshop?没错，PS 的确很强大、无所不能。我曾经听过这样一句话： “只有你想不到的，没有 photoshop 做不到的！”，我并不反对，而且十分认同。但是请静下来听我发表一 下我的个人看法：我使用 fireworks 设计效果图已经有八年多了，我并没有觉得 FW有什么地方比不上PS,至少在web界面设计方面还是很相当出色的。智能的 自动建层、快捷精确的绘图、简单易用的内置常用效果、操作方便的渐变效果。 这些操作起来比photoshop方便，这就是我一直使用FW原因，正所谓小鸟胜雄 鹰嘛！ 心得体会：其实用什么软件并不重要，重要的是它能否实现你想要的效果， 最大限度的提高你的工作效率！ （ Tips:开始学习之前，设置软件工具。“窗口” -“工具栏” -“主要”， “窗口” -“属性”， “窗口” -“工具”。 ） Fireworks 软件核心，根据“形式主义”我大致分为以下几部分: 一、造型（形状） 1、常规图形 一般用到的造型有矩形、圆形、星星、多边形等。在左侧工具栏的矢量面板 里如图 （形状工具 ）。 如图: 3.1 A* i◎o A * i ◎ o ；嚅雲IM （Pl 『矢量路包工鼻（P） ?暑昭IS （P） mA I 爲? □ “距形”王具（U） O ° 暫圆ZM（U） O哆边形”工具（U） F L形 CJ圆角距形 占紙面垣形 ☆星形 O智显边形 舉 形 ?面陸形 O饼形 2、钢笔工具 一般用来绘制非常规造型，通过节点调节 如图：3.2 3、字体工具 用来输入界面上用到的字体或者模拟内容。 字体本身填充选项里带有渐变填 充，可以方便实现渐变字体 如图：3.3 A 迭择文本工具A ,输入文本，左属性面板选择颜色填充,打开颜色选择面板。点击”填充选项目蒯，下一步。 text effect | #009999 pfg ▼屋性 填充选项… 文本 文本 ^Anai ▼ …■ B av o T loo 岂％ ▼ x E* w 觅：6 X: 128 左0 ■ Wo 於 0 ▼］庄消除tg齿 ▼ 喜：19~ Y: 307 a 100% p0 0 上自动调整宇距 第一个下拉选【页迭拓渐雯?第二个下拉迭啖迭择驾性?。 点击下一步。 ffectj 浙袞 ▼ 肉性 ▼ ▼编辑… 谶: text effect A? 0 y X 100 冋[ % ▼ !5： 242 X: 106 ?: 54 丫： 68 桂0 a 100% ▼ 0 迭择斬娈颜色? #O0CCCC?#00999痢癸。调节新贸空杆.知道 符台要求。 text effect ▼思住 文本 text effect 奴理： 消除馆齿 ▼ 0 DNA ▼ 0% ▼ 匚透明 □ 厂日■ (E小 X图鼻s s 强力消除糖齿 丿自动调整宇距 Anai ▼ 刃卜■ OU u B 100 I』正常 ▼ 」 AV 0 T 100 ▼][% ▼ X (冒寿奁臺互 滤樓：匕 -￡ 0 . ,w o t Zl 勸消除锯齿 ▼ V O投影 d 100% J自动调整手距 ［壌充迭项二 竟:242 X: 106 鬲：54 Y: eg 点击遲性湎板右侧的宠锻”，选择湖豹和牺T》“投影= 设置価： text effect 文本 ▼ so 1- H IBl / u I text effect A V 0 T 100 ▼ 竟：242 X: 106 桂0 ，w o T 力强消除据齿 ▼ 嘗：54 Y: 68 △ 100% - 十0 j J自动调整宇距 ▼盘住 【去底色 4、切割工具 在web界面设计过程中很多时候需要对绘制的图形进行切割，以实现某种 视觉效果。选中对象，用切割工具切割。 如图：3.4 迭中对象（这里用绘制口圆圈），选择切割工具按頤你想要的图形进行切割。 迭中对象（这里用绘制口圆圈），选择切割工具 按頤你想要的图形进行切割。 5、组合路径和改变路径 组合路径，也就是组合图形，把一个或者多个图形组合成特定图形。 打开菜 单“修改”-“组合路径” 如图：3.5.1 组合路径” ?选择“修改- “组合路径? “接合” ? CTRL+J； “拆分 “，CTRUSKIFT+J。 选择两个组合对象 接合”后效果 “联合”，把两个对象联合-起。 选择两个组合对象 〃联合后效果 “交集，把两个对繚遊行交集，获得两者的公共部分。 选择两个组合对敏 交集”后效果 “打孔，把两个对象进行打孔，下面的对象狱上面的对象打孔。 选择两个组合对數 打孔”后效果 紀栽IT，和塔交集的效果差不多。 选择两个组合对欽 ’裁勢’后效果 Copy by Des