建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > FireWorks教程 >

Fireworks蒙版基础教程

更新时间:2017-04-12整理编辑:建站学习网阅读:0

   Fireworks CS3中蒙版的应用

  很多人在学习蒙版的时候会有困惑,不知道蒙版是做什么的,总是觉得蒙版的概念很深奥,不好理解。其实在学习蒙版之前,我们需要首先来了解蒙版都能做什么,知道蒙版的作用以后,再来学习如何创建蒙版就不会觉得那么难以理解了。

  一、蒙版概述

  简单来说,蒙版的作用就是实现透过某个形状看另外一个图形的效果。如图5-62所示。

 

 

 

  图5-62 蒙版的效果

  除了能够把图像显示在任何一种形状内以外,蒙版还能够制作图像渐隐效果,如图5-63所示。

  图5-63 图像渐隐效果

  图像渐隐效果是指图像由清晰到透明的一种过度效果,过度的形式有很多,上面这张图像是图像由右到左的逐渐变透明,在网页设计中经常可以使用图像渐隐效果,使图像逐渐过度到网页的底色上,如图5-64所示。

  图5-64 图像渐隐效果在网页中的应用

  二、Fireworks CS3的蒙版属性

  在Fireworks CS3中创建蒙版之后,【图】面板中的图层会变成两个缩略图,左侧的缩略图为被蒙对象,右侧的缩略图为蒙版,如图5-65所示。

  图5-65 【层】面板中的蒙版缩略图

  选中右侧的蒙版缩略图之后,在【属性】面板中会显示蒙版的属性,如图5-66所示。

  图5-66 蒙版属性

  1. 路径轮廓蒙版

  这种类型的蒙版可以透过路径轮廓清楚的看到被蒙对象,而且跟矢量路径的颜色没有任何的关系,也就是说作为蒙版的路径不管填充了什么颜色,蒙版效果仍旧是非常清晰的。如果选中了“显示填充和笔触“那么可以显示蒙版的边缘路径效果,如图5-67所示。

  图5-67 路径轮廓蒙版效果

  2. 灰度外观蒙版

  这种类型蒙版也是透过路径看到被蒙对象,但是看到被蒙对象的清晰度就会受到路径的填充色和描边色的深浅影响,这种类型蒙版的填充色和描边颜色都为灰度图,如果蒙版的颜色为白色,则蒙版下的图像能够清晰显示。如果蒙版的填充颜色为黑色,则蒙版下的图像则完全透明。如果蒙版的填充颜色为中间的灰色,则蒙版下的图像将以半透明装显示。填充下边的边缘属性中可以设置边缘羽化。

  图5-68 灰度外观蒙版效果

  利用灰度外观蒙版受填充色深浅的影响,我们可以轻松实现图像渐隐效果,其原理就是给用来蒙版的矢量路径填充由黑色到白色的渐变色,这样蒙版后黑色的一边将为透明,白色的一边为清晰的效果,从而实现图像渐隐的效果,如图5-63所示。

  三、 在Fireworks CS3中创建蒙版

  在Fireworks CS3中创建蒙版的很多,但是最终的目的只不过是生成蒙版,所以基本上记住一两种生成蒙版的方法,重点掌握蒙版的属性就足够了,另外再了解蒙版的删除禁用和启用就可以了。

  粘贴于内部

  使用粘贴于内部命令是Fireworks CS3中最简单的创建蒙版的方法,需要注意的是,粘贴于内部创建的蒙版默认是路径轮廓蒙版,所以和作为蒙版的路径颜色无关,下面通过一个具体的实例来给大家进行介绍,具体的操作步骤如下:

  1. 新建一个Fireworks文件。

  2. 在弹出的【新建文档】对话框中设置画布的宽度为“350“像素、高度为“250“像素,背景颜色为白色。如图5-69所示。

  图5-69 新建文档对话框

  3. 把准备好的手机图像素材复制到创建的画布中,并且调整好大小和位置,如图5-70所示。

  图5-70 复制手机素材到画布

  4. 使用【椭圆】工具,在画布的右侧绘制一个正圆,这个正圆要比画布大很多,如图5-71所示。

  图5-71 绘制一个正圆

  5. 打开准备好的素材图像,由于准备的素材图像尺寸大于我们的目标尺寸,所以需要选择【修改】@@【画布】中的【图像大小】命令来缩小图像素材,以适应我们的需求,如图5-72所示。

  图5-72 缩小图像素材的尺寸

  6. 选中缩小后的图像素材,选择【编辑】菜单下的【复制】命令,然后选中刚刚绘制的正圆,选择【编辑】菜单下的【粘贴于内部】(快捷键为:【Ctrl+Shift+V】)命令,这样就可以把图像素材显示在正圆中了,如图5-73所示。

  图5-73 把图像素材粘贴到正圆的内部

  7. 这时图像素材虽然显示到了正圆的内部,但是并不是我们所需要的位置,如果直接使用【指针】工具拖拽的话,是正圆和内部的图像一起移动,如果我们只需要调整正圆内部图像素材的位置,而不希望改变正圆的位置,可以点击【层】面板中的关联图标,取消图像和蒙版之间的关联,这样就可以任意调整图像素材的位置,而不改变正圆的位置了,如图5-74所示。

  图5-74 调整蒙版中图像的位置

  8. 位置调整完毕后,可以把蒙版中图像和正圆的关联继续关联起来,整个图像效果就制作完毕了,最终效果如图5-75所示。

  图5-75 最终完成的效果

  通过掌握【粘贴于内部】命令,我们可以把任何一张图像素材显示到任意一个形状中去。

  组合为蒙版

  使用组合为蒙版,同样可以创建蒙版效果,需要注意的是,组合围蒙版默认创建的是灰度外观的蒙版。下面通过一个简单的实例来给大家进行说明,具体操作步骤如下:

  1. 新建一个Fireworks文件。

  2. 打开准备好的图像素材,如图5-76所示。

  图5-76 打开准备好的图像素材

  3. 复制另外一张鱼类图像素材到画布中来,并且调整好大小尺寸,如图5-77所示。

  图5-77 复制另外一张图像素材到画布

  4. 使用【矩形】工具,在绘制一个和画布一样尺寸的矩形,并且填充线性渐变色。设置渐变色的方向为垂直方向,最上方填充白色,最下方填充黑色,如图5-78所示。

  图5-78 绘制矩形,填充线性渐变色

  5. 同时选中鱼类的图像素材和这个矩形,选择【修改】@@【蒙版】@@【组合为蒙版】命令,得到的效果如图5-79所示。

  图5-79 使用【组合为蒙版】命令后得到的效果

  6. 在【层】面板中选择右侧的矩形蒙版,调整渐变色的范围,适当增加黑色部分所占的面积,这样可以让蒙版下方的透明部分增加,最终得到的效果如图5-80所示。

  图5-80 调整渐变范围后得到的最终效果

 

本文网址:https://www.dedexuexi.com/wysj/FireWorks/2837.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
Fireworks钢笔绘制飘逸的红彩带
« 上一篇2017年04月12日
Fireworks制作青花陶瓷按钮
2017年04月12日下一篇 »
  • Fireworks CS5、CS4、CS3版本功能比较
    0阅读
    Adobe Flash Professional CS5 软件可以完成精彩的交互创作,可用于提供跨个人计算机、移动设备以及几乎任何尺寸和分辨率的屏幕一致呈现的令人痴迷的互动体验。 Adobe Fireworks CS5 软件使用户能为 Web 以及几乎任何设备(比如智能手机、报亭到嵌入式屏幕等)创建...
  • Fireworks教程:轻松制作水晶小图标
    0阅读
  • 利用Fireworks打造石头字效果
    0阅读
    1、素材。烂墙壁照片一张以及胶片照片一张。 2、新建500*350画布,插入背景图片。然后调整亮度和色调如下。 3、拉一个大小为500*350的放射状渐变的矩形。参数设置如下。 4、输入文字影视。字
  • Fireworks教程:制作波尔卡点边框
    0阅读
    效果如下 选择一个图片,用FW打开 在图片上面建立一个层,作一个和图片一样大小的矩形,用白色填充 为这个举行添加效果Edges 具体设置如图 注意Color(颜色填充)这里选择黑色 选中矩形,Ctr
  • Fireworks简单方法设计网页闪字动画效果
    0阅读
    最近网络上很流行一种超炫的闪彩文字及签名,在QQ空间里、论坛签名里、各类回贴和博客都有炫彩闪字的身影,一些具有个性的闪字还相当耀眼,那么这种炫彩字是如可制作出来的呢?其实制作
 
QQ在线咨询