收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 65493|回复: 64

[效果制作] 使用Fireworks 8制作网页效果图[原创教程]

[复制链接]
发表于 2006-8-12 23:51:16 | 显示全部楼层 |阅读模式
北京达美网站形象页面设计

顽主论坛 顽主教程 亚露死苦 版权所有,转载请注明出处,谢谢~! http://www.go2here.net

这里主要介绍的是Fireworks 8的位图工具的使用,如果你用过ps的话,会感觉这两个软件在位图处理中有很多相似的地方,本例是一个以女性化妆品为主打产品的企业宣传网站“北京达美”的形象页面效果图设计。达美公司一直致力于结合科技和自然的化妆品产品的研发。由于达美公司主打自然健康的产品理念,因此在整体的页面设计中以绿色为主要的风格,同时配以女性模特、植物和蝴蝶的素材来体现清新、自然的感觉。如图1.1所示。

图1.1 北京达美公司网站形象页面效果图。
1.新建一个Fireworks文件。
2.在弹出的【新建文档】对话框中设置画布的宽度为760像素,高度为430像素,背景颜色为白色。如图1.2所示。

图1.2 【新建文档】对话框
3.选择绘图工具栏中的【选取框】工具,在【属性】面板中进行相应的设置,如图1.3所示。

图1.3 【选取框】工具的属性设置
4.使用【选取框】工具在画布的右侧绘制一个矩形选区,如图1.4所示。

图1.4 使用【选取框】工具绘制选区
5.选择绘图工具栏中的【渐变】工具 ,这时【属性】面板会自动变成渐变色的调节属性。设置渐变的类型为线性渐变,渐变颜色为白色过度到绿色。如图1.5所示。

图1.5 【渐变】工具的属性设置
6.使用【渐变】工具,在画布右侧的选区中单击鼠标左键,渐变色即可填充到当前选区中。如图1.6所示。填充完毕,按快捷键【Ctrl+D】推出位图编辑模式。

图1.6 给选区填充渐变色
【说明】使用【渐变】工具在选区单击,得到的渐变色方向默认为水平方向,如果希望得到不同方向的渐变色,可以使用【渐变】工具在选区中拖拽填充。
7.在Fireworks 8的新窗口中打开事先准备好的图像素材“花草.jpg”,选择绘图工具栏中的【椭圆选取框】工具,在【属性】面板中进行相应的设置,如图1.7所示。

图1.7 【椭圆选取框】工具的属性设置
8.使用【椭圆选取框】工具在图像“花草.jpg”中绘制一个正圆的选区。如图1.8所示。

图1.8【渐变】工具的属性设置
9.按住键盘的【Shift】键,这时在鼠标指针的右下角会显示一个小【+】号,表示添加选区。使用【椭圆选取框】工具在当前选区的基础上增加一个新的选区。如图1.9所示。

图1.9 使用【椭圆选取框】工具增加选区
10.现在得到的是有点类似于望远镜的两个椭圆连接在一起的选区,如果需要调整选区在图像中的位置,在【椭圆选取框】工具选中的状态下,直接用鼠标移动即可。把选择的像素区域,复制到前面新建立的画布中来。如图1.10所示。

图1.10 把选中的像素区域复制到画布中
11. 在Fireworks 8的新窗口中打开事先准备好的图像素材“模特.jpg”,选择绘图工具栏中的【多边形套索】工具,在【属性】面板中进行相应的设置,如图1.11所示。

图1.11 【多边形套索】工具的属性设置
12.使用【多边形套索】工具,把图像素材“模特.jpg”的人物区域选中,如图1.12所示。在选择的过程中,不需要完全的压边,因为有羽化的设置。同时如果不小心选择错误的话,必须重新绘制选区。

图1.12 使用【多边形套索】工具选择像素区域
13.把选中的像素区域复制到前面新建的画布中,如图1.13所示。

图1.13 复制选中的像素区域到新的文档中
14.选择绘图工具栏中的【椭圆选取框】工具,其属性设置和前面一致。在画布中绘制一个椭圆的选区。如图1.14所示。

图1.14 使用【椭圆选取框】工具绘制选区
15.选择【选择】@@【反选】命令(快捷键为【Ctrl+Shift+I】),对选区进行反选操作,这样选中的就是椭圆选区以外的部分。如图1.15所示。

图1.15 对选区进行反选操作
11.在图层中选择图像素材“模特.jpg”所在的图层,按键盘的【Delete】键,即可删除所选中的像素区域。根据需要,可以适当移动选区,对图像素材“模特.jpg”的边缘部分进行多次删除,最终效果如图1.16所示。

图1.16 删除选中的像素区域
17.选择【修改】@@【变形】@@【水平翻转】命令,改变模特素材的水平方向。并且使用【缩放】工具适当调整图像的尺寸,对齐到相应的位置。
18.打开【属性】面板中的【亮度/对比度】滤镜命令,适当增加其【亮度】和【对比度】属性,使图像素材更清晰明亮。如图1.17所示。

图1.17 对图像素材进行色彩调整
19.使用绘图工具栏中的【直线】工具,在画布中绘制一个十字坐标,并且在【属性】面板中设置其笔触样式为虚线。如图1.18所示。

图1.18 绘制十字坐标
20.在Fireworks 8的新窗口中打开事先准备好的图像素材“向日葵.jpg”,选择绘图工具栏中的【多边形套索】工具,其属性设置和前面一致,把向日葵选择下来,并且复制到当前画布中。如图1.19所示。

图1.19 使用【多边形套索】工具选择像素区域
21.首先把向日葵复制一个,选中复制的向日葵图像,在【属性】面板的【滤镜】菜单中选择【模糊】@@【运动模糊】命令。
22.在弹出的【运动模糊】对话框中设置好相应的属性,效果如图1.20所示。

图1.20 给图像添加【移动模糊】滤镜
23.在【图层】面板中调整模糊后向日葵的排列顺序,拖拽到所有对象的下方,并且同时设置其【透明度】为40。如图1.21所示。

图1.21 调整图像的排列顺序和透明度
24.把另外一张向日葵的图像缩小到适当的尺寸,并且移动到十字坐标上,如图1.22所示。

图1.22 缩小向日葵图像的尺寸,并且移动到相应的位置
25.使用绘图工具栏中的【选取框】工具,选中图像中多余的像素区域,依次删除。如图1.23所示。

图1.23 使用【选取框】工具,删除图像多余的部分
21.最后,在画布中添加文本和网站标志,整个页面效果图就制作完毕了。效果如图1.1所示。



顽主论坛 顽主教程 亚露死苦 版权所有,转载请注明出处,谢谢~! http://www.go2here.net

效果图制作完毕,如何生成网页呢?请看下面的教程:
http://bbs.blueidea.com/thread-2667113-1-3.html

[[i] 本帖最后由 froglt 于 2007-3-13 18:59 编辑 ]
 楼主| 发表于 2006-8-12 23:52:53 | 显示全部楼层

素材看这里

素材1

素材1

素材2

素材2

素材3

素材3
回复 支持 反对

使用道具 举报

发表于 2006-8-13 13:54:06 | 显示全部楼层
不错哦,支持!!!
回复 支持 反对

使用道具 举报

发表于 2006-8-13 17:36:30 | 显示全部楼层
简单的制作。精美的效果。赞!
回复 支持 反对

使用道具 举报

发表于 2006-8-14 13:02:33 | 显示全部楼层
收入, 对新手是不错的教程,
回复 支持 反对

使用道具 举报

发表于 2006-8-14 14:07:26 | 显示全部楼层
支持,感谢ing!
回复 支持 反对

使用道具 举报

发表于 2006-8-15 00:16:43 | 显示全部楼层
哪个向日葵花应该在处理一下明暗度,效果要好一些
不过楼主做的效果总的不错,值得学习!
回复 支持 反对

使用道具 举报

发表于 2006-8-15 09:53:41 | 显示全部楼层
1.22—1.23 那个边缘效果怎么做的啊?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-8-15 11:25:09 | 显示全部楼层
原帖由 [i]冷飞雪 于 2006-8-15 09:53 发表
1.22—1.23 那个边缘效果怎么做的啊?


你是说选择向日葵图片吗?使用多边形套索工具,然后边缘给羽化20即可,选择下来的图像边缘都是羽化的
回复 支持 反对

使用道具 举报

发表于 2006-8-16 16:44:20 | 显示全部楼层
我靠,牛粪!
回复 支持 反对

使用道具 举报

发表于 2006-8-16 17:38:15 | 显示全部楼层
原帖由 [i]froglt 于 2006-8-15 11:25 发表


你是说选择向日葵图片吗?使用多边形套索工具,然后边缘给羽化20即可,选择下来的图像边缘都是羽化的


我说的是这部分





回复 支持 反对

使用道具 举报

发表于 2006-8-16 18:12:47 | 显示全部楼层
12.使用【多边形套索】工具,把图像素材“模特.jpg”的人物区域选中,如图1.12所示。在选择的过程中,不需要完全的压边,因为有羽化的设置。同时如果不小心选择错误的话,必须重新绘制选区。

用路径钩选,最后转为位图载入选区,这样就不怕钩错从头再来了~
回复 支持 反对

使用道具 举报

发表于 2006-8-28 08:29:56 | 显示全部楼层
不错不错,多出点这样的整站效果教程出来就好了!
回复 支持 反对

使用道具 举报

发表于 2006-8-28 11:36:40 | 显示全部楼层
呵呵,效果很好.有时间练练!
回复 支持 反对

使用道具 举报

发表于 2006-8-29 16:29:16 | 显示全部楼层
原帖由 [i]冷飞雪 于 2006-8-15 09:53 发表
1.22—1.23 那个边缘效果怎么做的啊?


俺也想知道~~
回复 支持 反对

使用道具 举报

发表于 2006-9-3 15:59:30 | 显示全部楼层
不错,又学了几招。
回复 支持 反对

使用道具 举报

发表于 2006-9-15 10:01:26 | 显示全部楼层
好教程下来多练练
回复 支持 反对

使用道具 举报

发表于 2006-9-18 08:35:12 | 显示全部楼层
非常值得学习,以后多发表些这方面的教程
回复 支持 反对

使用道具 举报

发表于 2006-10-11 14:39:15 | 显示全部楼层
前辈高人,新手学习ing...
回复 支持 反对

使用道具 举报

发表于 2006-10-11 14:52:54 | 显示全部楼层
非常值得学习,有时间多练练
回复 支持 反对

使用道具 举报

发表于 2006-10-14 10:35:30 | 显示全部楼层
提倡,现在设计,大家都成在一个问题.美工.做得好坏只接影响,观看网页的效果,
我一直在设计上出点问题.希望今后多出这样的贴子.一定会很受欢迎滴
回复 支持 反对

使用道具 举报

发表于 2006-10-14 16:33:02 | 显示全部楼层
原帖由 [i]冷飞雪 于 2006-8-16 17:38 发表








请问下加红圈内那种乱羽毛的效果是怎么做的?

直接有滤镜效果吗?
回复 支持 反对

使用道具 举报

发表于 2006-10-14 17:44:10 | 显示全部楼层
很不错的教程!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2006-10-25 15:00:37 | 显示全部楼层
原帖由 [i]zhaoyang125 于 2006-10-14 16:33 发表





请问下加红圈内那种乱羽毛的效果是怎么做的?

直接有滤镜效果吗?





有的,直接使用Fireworks 8自带的边缘滤镜就可以了,但是步骤麻烦点。
1.绘制一个矩形,填充黑色。
2.使用edges滤镜制作这种边缘效果,具体设置大家自己试试。
3.添加了滤镜以后,的效果如图所示。

1

1

4.把矩形转化为位图,使用魔术棒工具选择图中黑色的部分,删除即可。

[[i] 本帖最后由 froglt 于 2006-10-25 15:01 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2006-10-25 15:34:07 | 显示全部楼层
这个对于教程很不错;如说设计就差那点
回复 支持 反对

使用道具 举报

发表于 2006-10-28 09:32:05 | 显示全部楼层
学习了,谢谢楼主个……
回复 支持 反对

使用道具 举报

发表于 2006-10-31 00:35:26 | 显示全部楼层
学习做了一个,只是那个十字线没有做出来,还是我的技术有限啊!还要多向各位朋友学习啊!
回复 支持 反对

使用道具 举报

发表于 2006-11-1 15:18:31 | 显示全部楼层
非常受益,学到不少东西,谢谢楼主
回复 支持 反对

使用道具 举报

发表于 2006-11-6 11:39:38 | 显示全部楼层
边上的那根虚线
我画的时候里面的小线段很长的,怎么弄短一点
回复 支持 反对

使用道具 举报

发表于 2006-12-22 18:35:57 | 显示全部楼层
非常不错。谢谢啊。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-7-11 10:26 , Processed in 0.171442 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表