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

  本例向朋友介绍运用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 给选区填充渐变色

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

  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 对选区进行反选操作

  16.在图层中选择图像素材“模特.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所示。

时间: 2016-08-09

用Fireworks合成设计制作一个化妆品网站首页的相关文章

Fireworks设计制作化妆品网站首页

  本例向朋友介绍运用Fireworks合成设计制作一个化妆品网站首页,在本例中我们将学习到Fireworks位图工具的应用.合理运用素材设计网页设计稿的方法,希望能给朋友们带来帮助~~ 本例是一个以女性化妆品为主打产品的企业宣传网站的形象页面效果图设计.该公司一直致力于结合科技和自然的化妆品产品的研发,主打自然健康的产品理念,因此在整体的页面设计中以绿色为主要的风格,同时配以女性模特.植物和蝴蝶的素材来体现清新.自然的感觉.如图1.1所示. 1.1 效果图 素材如下 设计过程: 1.新建一个F

手把手教您制作一个完整网站(内附教程)

手把手教您制作一个完整网站(内附教程) 1.搞个简单的策划先. 至少应该有一个大概的方向吧,先确定网站的类型,是地区门户.行业门户,还是下载.电影.论坛等等.然后基本确定网站的名称. 2.找一个合适的域名. 域名注册.com(国际域名)和.cn(国内域名)为宜,域名最好不要太长.且有一定的意义.容易记,现在好的域名已经不多了,你可灵活的使用数字.英文单词.拼音等的组合,在域名的前.后加上i.e.51.ok.hao.88.163等,可以灵活的组合出许多好的域名.域名注册信息查询 http://ww

如何制作一个企业网站建设网站开发流程详细介绍

第一步:客户提出需求 客户通过电话.电子邮件或在线订单方式提出自己网站建设方面的"基本需求". 涉及内容包括:1.公司介绍: 2.栏目描述: 3.网站基本功能需求: 4.基本设计要求 第二步:设计建站方案 首先,根据企业的要求和实际状况,设计适合企业的网站方案.是选择虚拟主机服务,还是自己购置服务器:根据企业风格度身定制:一切根据企业的实际需要选择,最合适的才是最好的. 第三步:查询申办域名 根据企业的需要,决定是 国际域名还是国内域名.域名就是企业在网络上的招牌,是一个名字,并不影响

如何制作一个营销网站快速提高知名度

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 当前很多的生意人通过网络创造了一个又一个神话,这让很多以前怀疑和观望中的人不禁跃跃欲试,但结果就可想而知了.因为任何一个行业都不是新人的行业,当一个生意或方法连老百姓都知道时,这个生意已经不是生意了,方法也已经不是有效的方法了. 如何通过网络打造自己的事业呢?要想通过网络创富,有一个自己的网站平台还是必须的,但有了网站并不代表就一定会盈利,首

Photoshop制作漂亮笔记本网站首页模板

Photoshop制作漂亮的笔记本电子商务网站首页模板教程,效果确实很好. 1.在PS中新建一个文档,768*800px,并填充#1e2528. 2.添加LOGO,在左上角,并给它新建一个图层. 3.新建一个图层.并使用图层样式为其添加一个渐变效果. 4.使用减淡工具,并设置10%的不透明度,给图像加个高光.如图: 5.现在加入菜单文字.使用文字工具并设置如图,颜色#444b44. 6.在文字下面加入下划线.也在菜单上面加入一条线,来做区分用. 7.在头部加个产品图像和产品介绍. 8.来看一下如

使用PhotoShop打造一个企业网站首页设计制作全过程

先整理好需要做的内容至一个文件夹中. 打开photoshop新建一个空白面板. 选择矩形工具绘制一个980*auto的图形. 结果如下: 分类: PS入门教程

Fireworks教程设计制作红酒酒瓶实例

  最终效果 看上去精致漂亮的葡萄酒瓶,其实制作起来非常简单,用fireworks只需几步,就能轻松打造. 首先,用形状工具画出相应的形状,通过这些形状的组合,我们能够得到一个瓶身. 接着,我们开始制作瓶颈,用钢笔工具勾画出半个瓶颈的形状,通过复制-水平翻转,得到右边半个,这样制作的瓶颈看起来对称平整,比完整勾勒的更好.用路径面板中的组合路径拼合他们. 把制作完成的瓶身和瓶颈组合起来,得到完整的葡萄酒瓶子,这里由于在做包装纸的时候我需要用瓶颈部门形状,所以暂时不需要把他们合并路径. 添加高光是很

NodeJs——(16)用Nodejs 4.X版本,制作一个微博网站(多图,详细步骤)

(填坑中,预计7月底完成) 最后更新时间7/28晚, 更新页面基本样式已有 范例网址:121.41.66.68 [0]涉及到的框架.引擎.数据库: ① express 4.X ② jade ③ mysql 5.6.x   注: ①内容较长,我会尽力把整个框架.结构.顺序.思考方式说明白. ②基础是<node.js开发指南>这本书,作者:BYVoid.但他书的版本较老,很多东西现在已经无法应用,故进行更新,使用目前普遍的express 4.x版本(原书似乎是2.X版本),mysql(原书是mon

PS设计制作一个神秘的雨夜场景教程

墙壁.窗户.血溅.血溅2.空调 1.首先创建一个900*700像素大小的,300分辨率的新图片,如图所示. 2.打开墙壁素材,并复制到我们的新图片中,复制4次并调整每个图层的大小,组合成下图所示的效果.最后合并这4个图层并命名为"墙壁". 3.选择"墙壁"图层,接下Shift+Ctrl+U进行去色,然后在菜单栏中选择"图层-调整-色阶"设置参考下图所示. 4.使用加深工具在图的右下角位置涂抹一些阴影,如图所示 分类: PS入门教程