动态网站制作指南 [  QQ表情  ]
[ 投票调查 ]
[ 企业邮箱 ]
[ 网站空间 ]
网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
ASP源码 | .Net源码 | PHP源码 | JSP源码 | JAVA源码 | CGI源码 | VB源码 | C++源码 | Delphi源码 | PB源码 | VF源码 | 汇编 | 服务器
电脑书籍下载:程序设计书籍 | 数据库教程书籍 | 平面与多媒体书籍 | 网络通讯书籍 | 系统管理书籍 | 网络安全书籍 | 认证考试书籍
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 图形图象 > Fireworks教程
图形图象:Photoshop,Fireworks,CorelDraw,Flash,3Dmax,AutoCad,Maya,Director,Authorware,Illustrator,相关软件
文章搜索服务
邮件订阅
输入你的邮件地址,
你将不会错过任何关于:
[ Fireworks教程 ]的信息



本月文章推荐
.Fireworks MX之旅:耳目一新的界面.
.FW MX和Flash MX的亲密合作.
.Fireworks优化网页图像详解.
.Fireworks常见问题解答(3).
.下拉菜单全攻略之Fireworks篇.
.Fireworks制作精细PC图标.
.Fireworks 制作 IE 浏览器图标.
.Fireworks4制作超酷金属字.
.制作扇形效果<2>.
.Fireworks MX2004之Shapes工具组.
.Fireworks MX制作下拉菜单.
.Fireworks简单制作残破边缘技巧.
.Fireworks MX 之 初体验5-2.
.Fireworks描绘七夕牛郎织女古典卷.
.Fireworks巧绘水晶葡萄.
.利用图层混合模式和通道抠图.
.Fireworks动画制作基本类型.
.Fireworks MX之旅:GIF动画.
.圆环相切效果的制作.
.撕纸边缘效果制作方法详解<1>.

使用Fireworks 8制作网页效果图

发表日期:2008-5-19 |


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

使用Fireworks

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

使用Fireworks


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

使用Fireworks


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

使用Fireworks


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

使用Fireworks


  图1.5 【渐变】工具的属性设置

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

使用Fireworks


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

使用Fireworks


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

使用Fireworks


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

使用Fireworks


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

使用Fireworks


  图1.10 把选中的像素区域复制到画布中

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

使用Fireworks


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

使用Fireworks


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

使用Fireworks


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

使用Fireworks


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

使用Fireworks


  图1.15 对选区进行反选操作

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

使用Fireworks


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

使用Fireworks


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

使用Fireworks


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

使用Fireworks


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

使用Fireworks


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

使用Fireworks


  图1.21 调整图像的排列顺序和透明度

  24.把另外一张向日葵的图像缩小到适当的尺寸,并且移动到十字坐标上,如图1.22所示。

使用Fireworks


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

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

 

素材:

使用Fireworks


使用Fireworks


使用Fireworks
使用Fireworks

上一篇:教你用Fireworks制作Logo 人气:1705
下一篇:Fireworks CS4的新增面板 人气:928
浏览全部Fireworks的内容 Dreamweaver插件下载 常用网页广告代码全集
  最新网站源码 最新软件下载
2008-7-8 ECShop v2.6.0 Build 20080707(G
2008-7-8 动网论坛PHP版 v2.0++ Build 080
2008-7-8 中国IT总舵 v9.0 UTF版
2008-7-8 凹丫丫新闻发布系统 v4.6 Build
2008-7-8 topview数据查询 v3.0
2008-7-8 Z-Blog v1.8 Spirit Build 80708
2008-7-8 Z-Blog v1.8 Spirit Build 80708
2008-7-8 凹丫丫新闻发布系统 v4.6 Build
2008-7-8 新动软万能网站内容管理cms系统
2008-7-5 AgileMessenger即时通讯工具 v1.
2008-7-5 GoodCalculator2.0版固件计算器
2008-7-5 RepoName源地址搜索工具 v1.21b
2008-7-5 AgileMessenger即时通讯工具 v1.
2008-7-5 TouchCopy多媒体管理软件 v3.13完
2008-7-5 VideosTone视频铃声 v1.1汉化破解
2008-7-5 TouchPad触摸板 v4.44破解版
2008-7-5 VideosTone破解补丁 v1.0
2008-7-5 Feeds GoogleReader客户端 v0.4.3


  发表评论
姓 名: 验证码:
内 容:
[ 汉字翻译拼音 ] [ 广告代码 ] [ 符号对照表 ] [ 进制转换 ] [ 经典小工具 ] [ 个税计算 ] [ 汉字简繁转换 ] [ 普通单位换算 ] [ 公制单位换算 ]
[ 生辰老黄历 ] [ 国内电话区号 ] [ 国家代码与域名缩写 ] [ 文字加密解密 ] [ 健康查询 ] [ 万年历 ] [ 手机号码查询 ] [ ip搜索 ] [ Google PR查询 ]
业务联系 | 广告刊登 | 频道合作 | 投稿荐稿 | 联系方式 | 加入收藏 | RSS订阅
Copyright © 2000-2008 www.knowsky.com All rights reserved | 网络实名:动态网站制作指南 | 沪ICP备05001343号
ホームページ制作 不動産検索システム 求人情報