用Fireworks合成设计制作一个化妆品网站首页

2010-03-13 20:30:25   作者:网友   来源:蓝色理想

本例向朋友介绍运用Fireworks合成设计制作一个化妆品网站首页,在本例中我们将学习到Fireworks位图工具的应用、合理运用素材设计网页设计稿的方法,希望能给朋友们带来帮助~~

本例是一个以女性化妆品为主打产品的企业宣传网站的形象页面效果图设计。该公司一直致力于结合科技和自然的化妆品产品的研发,主打自然健康的产品理念,因此在整体的页面设计中以绿色为主要的风格,同时配以女性模特、植物和蝴蝶的素材来体现清新、自然的感觉。如图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 给选区填充渐变色

【说明】使用【渐变】工具在选区单击,得到的渐变色方向默认为水平方向,如果希望得到不同方向的渐变色,可以使用【渐变】工具在选区中拖拽填充。


栏目搜索>>分类导航
Flash幻灯 jQuery幻灯 JS幻灯 Flash相册 jQuery相册 图片特效 导航菜单 广告代码 在线客服 表单按钮 其它特效

HTML CSS JavaScript Dreamweaver Fireworks 设计分享

建站教程 网站运营 实用工具 网页模板 网页素材

CSS酷站 网上购物 设计团队 设计博客

教程排行榜
如何用Fireworks制作水晶效果的导航条?
Fireworks教程:制作闪光掠过的GIF动画
Fireworks教程:GIF动画效果的BANNER制作过程
用Fireworks打造光芒四射背景的图片效果
用Fireworks合成设计制作一个化妆品网站首页
Fireworks CS5抢先报道--值得期待的四大亮点!
用Fireworks打造超酷质感的网页按钮
Fireworks新手教程:制作五彩炫光效果
手把手教你用Fireworks CS3对图标进行细节刻画
Fireworks轻松制作渐隐线条
Abode Fireworks CS5、CS4、CS3版本的功能比较(图示)
FireWorks教程:外发光效果的几种应用
Fireworks教程:立体质感水晶的制作图解
Fireworks图解教程:打造碳纤维风格图标
用EyeCandy插件来制作3D旋转GIF动画
学习Fireworks CS3的切片和优化功能
下载排行榜
jQuery图片特效代码 带缩略图和文字标题简...
仿淘宝商城天猫首页jQuery多格焦点幻灯图特...
仿QQ商城焦点图jquery幻灯特效代码
宽屏flash+xml焦点幻灯图特效代码
效果媲美flash的jQuery幻灯代码支持多种切换效果
3D立体效果的flash+xml照片墙相册展示代码
带标题和数字导航的JS焦点幻灯特效代码
31款简单实用的CSS+JS下拉菜单脚本
漂亮的jquery+Lightbox灯箱效果图片展示特效代码
基于mootools有7种效果的Gallery(画廊)幻灯相册代码
超酷HTML5图片特效代码支持全屏显示
漂亮的jquery画廊相册特效支持缩略图和键盘...
可自动展开和折叠收起的QQ在线客服代码
半透明立体质感的宽屏flash+xml焦点幻灯代码
基于jQuery的首页自动收缩全屏广告代码
超酷3D摩天轮flash+xml幻灯相册特效源码