实战网页图形效果一则

图形|网页

关于使用FW系列软件制作一些图形效果的教程,相信我们已经林林总总的看到了不少,当然,我们知道这些教程的中心点大部分都是为了网页设计来服务的,毕竟我们感觉FW系列软件似乎就是为了服务网络工作而专门存在的,所以我们今天就来实战看看如何制作一款现在网上比较流行的Banner效果。图例如下:

点击这里下载源文件

  1、新建文件,文件大小随意,这里采用的是非正规的Banner尺寸:500*200像素大小。首先导入需要体现的位图图像,然后选取工具箱的Shapes工具组的园角矩形绘制工具,在编辑区绘制一个园角矩形,关于园角矩形的园角大小的调整,可以通过拖动位于四个角的黄色的菱形框来进行调整,如下图:

  注:园角矩形的形状大小及其位置摆放可以通过调整Properties属性面板的Info区域的数值来实现,具体设置参看下图:

  2、在编辑区绘制一个大的矩形对象,宽度要以能覆盖住上侧的园角矩形对象为准,位置摆放如下图所示。同时选定两个矩形对象,执行菜单命令“Modify -- Combine Paths -- Punch(修改--联合路径--打孔)”。

3、在执行打孔命令后生成的园角矩形对象下方绘制一个矩形对象,高度以达到位图对象高度约2/3处为准(此处凭个人感觉可自行决定),为了便于今后叙述我们把矩形的填充颜色变为淡黄色。选取工具箱的超级选择工具(白色箭头),在黄色矩形的任意一个顶点处单击鼠标,选定该路径节点(如果在单击顶点时弹出对话框的话,点击确定即可),然后选取工具箱的钢笔工具,在黄色矩形框的下方路径上单击以增加路径节点,增加的路径节点如下图所示,位置差不多即可。

  4、仍然是选取钢笔工具,开始逐一调整增加的两个路径节点。首先选定左侧的路径节点,单击鼠标,但是不要松开鼠标,此刻我们就可以通过旋转鼠标或者上下拖动鼠标来显示该路径节点的调节手柄了,如下图所示:

  5、按照上面步骤的方法,对右侧增加的路径节点来进行调整,如下图所示:

  6、通过对两个路径节点的调节手柄的调节,拖动,可以使得原本水平的底面产生如下图所示的波浪形。其实我们通过使用钢笔工具使得两个路径节点的调节手柄显现出来后,剩下的调整工作就可以使用超级选择工具来进行了,这样比钢笔调整更轻松些,各位自行试验吧!

7、最终调节的波浪效果如下图所示了。

  8、选定调整结束后的黄色路径对象,执行两次快捷键“Ctrl+Shift+D”,原地克隆两个相同的路径对象,此刻层面板的对象显示如下图所示:

  9、选定最上层的路径对象,选取工具箱的超级选择工具,将黄色路径对象的下方两侧的路径节点分别向下方拖动一段距离,同时将刚才增加的右侧的路径节点向下方拖动一定的距离,具体的操作可以先凭感觉来,然后再进行调整,调整后的路径对象如下图所示:

  10、便于随后的操作,我们把再次调整后的黄色路径对象的填充颜色变为橙色,此刻层面板的对象排列如下:

  11、执行快捷键“Ctrl+Shift+D”,原地克隆一个橙色路径对象,同时将位于下层的一个黄色路径对象拖放到最上层,具体的层面板的排列如下图所示:黄色对象和橙色对象此刻各两个。

12、同时选定位于上两层的橙色对象和黄色对象,隐藏下方的四层对象执行菜单命令“Modify -- Combine Paths -- Punch(修改--联合路径--打孔)”,编辑区就会出现如下图所示的飘带效果的图形对象了!这也是很多朋友想知道的一个效果的制作方法了,此刻想必我们应该要清楚些了吧?!好了,取消其他各层的隐藏吧!

  13、此刻层面板的对象排列如下图所示:

  14、同时选定最下方的园角矩形对象和位图对象,执行快捷键“Ctrl+Shift+D”,分别原地克隆相同的对象,层面板显示目前编辑区具体的操作对象如下:

  15、选定一个园角矩形对象,执行快捷键“Ctrl+X”,进行剪切操作,然后选定任意一个位图对象,执行菜单命令“Modify--Mask--Paste as Mask”(修改--遮罩--粘贴为遮罩);选定橙色路径对象,执行快捷键“Ctrl+X”,进行剪切操作,然后选定剩下的位图对象,仍然执行菜单命令“Modify--Mask--Paste as Mask”,此刻层面板的对象排列如下所示:

  16、回头来看看编辑区什么样吧?呵呵,位图对象居然不见了!没关系,我们还要调整一下。

17、回到层面板,将黄色路径对象拖放到最底层,再看看编辑区是不是已经基本上恢复正常了?层面板对象此刻的排列请看下图:

  18、头部被挡住了?选中园角矩形对象,直接在属性面板的Effect效果区域调整其所在层的透明度即可了,具体操作请看下图:

  同样对飘带路径对象的透明度也进行调整,具体的数值大小请自行设定,以达到体现目的为最终目标!调整结束后的编辑区对象如下:

  结束语:钢笔工具的灵活运用对飘带图形效果的生成起了关键的作用,遮罩效果的综合运用对总体的图形效果生成也起了主要作用,还有各种工具的配合使用,都是我们本节教程所需要注意的!好了,具体的背景调整、文字设置,请大家自由发挥吧!

时间: 2024-09-05 03:47:06

实战网页图形效果一则的相关文章

webview-通过后台传的坐标可以实现webvi网页那种效果吗?

问题描述 通过后台传的坐标可以实现webvi网页那种效果吗? 通过后台传送每个模块的具体坐标,可以实现像webview加载网页端的形式吗?如果可以怎么实现?(具体说明一下或帮忙写个例子研究一下).欢迎大神们来解答.... 解决方案 ????没明白意思,使用android布局实现吗?如果是的话就用动态布局的方法做,在程序中拼接界面 解决方案二: 你是指碎片化布局吗,用fragment组成一个主要布局,就能实现你说的效果. 解决方案三: 可以的.你把每个控件先写好,可以wrapcontent.然后动

铬金图形效果制作

图形 很多朋友可能在使用PS来进行图形处理的过程中会进行一些铬金特效的制作,在FW中直接对图形进行铬金特效的制作是不现实的,即使你已经安装了完整的Eye Candy 4000的滤镜,但是换一种思路来思考问题的话,我们发现有些不可能也变成了可能,本节教程我们就来学习如何使用FW来制作铬金图形特效,首先还是先来看下图所示已经制作完成的效果图. [制作步骤] 1.按"Ctrl+R"组合键导入需要进行图形特效处理的图片,本例导入图片如下图所示, [注意]为了便于随后操作步骤的讲解,大家可以直接

网页问卷响应情况的影响因素和网页问卷效果的衡量标准

网页制作Webjx文章简介:总结网页调研问卷的入口设计. 近几年电子商务.SNS迅速发展,并且已经成为人们生活中越来越重要的组成部分.被他们牵绊着的人不免会感受到一些变化,无论是新产品的诞生,还是老产品的换新貌,似乎这些变化越来越符合我们的需求.而对于用户研究人员来讲,为了使产品越来越满足人们的需求,在这个过程中我们常常使用的一个调研方法是问卷调研. 提到问卷调研,就不得不回忆下几年前问卷调研是如何进行的.相信大家都还记得我们常看到街头有那么一群人,手里拿着厚厚的资料,遇到路人就拦截下来请其帮忙

FLASH实现滚动条+网页书签效果

书签|网页 在网页中司空见惯的滚动条及网页书签效果在FLASH中如何实现呢?首先让我们来看看效果图: 上图中,右边的文字既可通过右边的滚动条实现上下自由滚动,又可通过点击左边的文字菜单滚动到指定位置.下面我们就来逐步介绍其实现方法.声明:1> 本文主要介绍AS脚本的实现,画图部分大家可以下载源文件后自己研究:2> as部分如果有不了解的命令.函数,大家可以查阅as相关书籍或actionscript字典,本文不对每一段代码进行解释:3> 由于本人的as水平有限,做出来的东西一定有很多有待改

Ajax风格的一款网页Loading效果

 本篇文章主要是对Ajax风格的一款网页Loading效果的实例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 现在比较流行的一款Ajax风格的网页Loading,多见于一些大量使用Ajax技术的网站中,页面加载时会自动显示提示信息,带载入动画效果,网页加载完自动消失,是一款正在具有Loading功能的网页进度条.     <html></P> <P><head> <title>Loading</title> <s

PhotoShop利用自由变换工具制作梦幻翅膀图形效果教程

本文教大家用PhotoShop制作梦幻翅膀图形效果,主要用自由变换工具来制作,喜欢的同学可以学习一下! 效果图: 第一步,画出如图所示大概的路径,如果不会画请戳: ctrl+回车得到选区,新建一个图层,填充白色 分类: PS入门教程

Photoshop结合DW设计超酷的网页相册效果教程

  本教程适用对象:有一定的PS基础,最好有网页设计制作基础,那样在PS处理好后可以在DM里面做一个后期的CSS以及布局方面的处理,当然,DM&FW也可做图片批处理并生成相册,不过我个人认为PS&DM的效果比较好. PS的批处理功能是很强大的,如果利用好可以做为我们做很多工作.今天我想讲的是"PS批处理设计制作图片展示" 开始吧 一.准备好自己要做相册的素材,产品展示啦,案例展示了,照片展示了都可以,统一将这些图片放在一个文件夹下,我这里将这个文件叫做"Res

css3-求点击按钮 div层飞进网页的效果代码..急求

问题描述 求点击按钮 div层飞进网页的效果代码..急求 如题 我做了一个计算器 计算器在层上面 点击按钮隐藏层 我想点击按钮 让层飞进来网页的效果 这样的代码 如何写 求大神指教 解决方案 http://www.3464.com/Data/wangyetexiao/Html/Html_301.asp 解决方案二: 网页飞入效果http://www.xker.com/js/code/117534.html

关东升的《iOS实战:图形图像、动画和多媒体卷(Swift版)》上市了

    关东升的<iOS实战:图形图像.动画和多媒体卷(Swift版)>上市了        承蒙广大读者的厚爱我的<iOS实战:图形图像.动画和多媒体卷(Swift版)>京东上市了,欢迎广大读者提出宝贵意见..http://item.jd.com/11760249.html 欢迎关注关东升新浪微博@tony_关东升. 关注智捷课堂微信公共平台,了解最新技术文章.图书.教程信息 更多精品iOS.Cocos.移动设计课程请关注智捷课堂官方网站:http://www.zhijieket