首页 新闻 搜索 短信 分类 聊天 企业
上移动梦网
赢手机大奖

新浪首页 > 科技时代 > 网上学园 > 主页制作 > 正文
用Fireworks MX制作圆角矩形六法

http://www.sina.com.cn 2002/08/06 10:29 赛迪网--中国电脑教育报

  文/温传伟

  网页制作中经常用到圆角矩形——两角圆弧形、两角直角形(如图1),笔者总结了六种简便、实用的制作方法,现介绍如下:

  一、菜单命令

  1、选取工具箱的圆角矩形绘制工具,绘制一个圆角矩形;


图1

  2、绘制一个直角矩形,放置到圆角矩形需要产生直角的那一端,位置摆放如图2所示;


图2

  3、同时选定两个对象,执行菜单命令“Modify→Combine Paths→Punch”,效果已经出现了,请看图3。


图3

  二、修改圆角矩形角度

  1、绘制一个圆角矩形;

  2、选定该圆角矩形,按下快捷键“Ctrl+Shift+D”,原地克隆一个相同的圆角矩形,将克隆对象向下拖动一段距离(如图4);


图4

  3、选定克隆对象,在下方的Properties(属性)面板中,将Rectangle Roundness的数值调整至“0”把该圆角矩形的角转变为直角,这样,圆角矩形就变成了直角矩形;

  4、按下快捷键“Crtl+A”同时选定编辑区的两个对象,执行菜单命令“Modify→Group”,将两个矩形组合在一起,这样圆角矩形就制作成功了。

  换一种思考方式,如果首先绘制的是一个直角矩形,采用相同的操作步骤,调整角的度数由直角变为圆角,同样实现圆角矩形的制作。

  三、使用工具箱的Knife

  1、绘制一个圆角矩形;

  2、选定圆角矩形对象,然后选取工具箱的Knife工具,沿着水平方向对圆角矩形进行切割(如图5);


图5

  3、切割完毕,可以清楚地看到,圆角矩形已被分成两大部分了,从路径节点的显示情况就可以说明这一点了;

  4、使用“选取工具”将两个部分分别拖开,需要的部分留下,不需要的部分当然喀嚓掉了——删除!

  四、利用Mask(遮罩)工具

  1、绘制一个圆角矩形;

  2、选取矩形工具再绘制一个直角矩形,以能够覆盖住圆角矩形的一半大小为佳,如图6所示;


图6

  3、选定直角矩形,按下快捷键“Ctrl+X”剪切它,再选定圆角矩形,然后执行菜单命令“Edit→Paste as Mask”,这样我们需要的效果就已经出现了。

  五、利用圆角矩形与直角矩形的组合

  1、绘制一个圆角矩形和一个直角矩形,两个矩形的宽度一样;

  2、调整两个矩形的位置,使两个矩形交错重叠,圆角矩形在上部,直角矩形在下部(如图7);


图7

  3、按下快捷键“Ctrl+A”同时选定两个矩形,再按下快捷健“Crtl+G”将两个矩形组合在一起,这样圆角矩形就制作成功了。

  前面介绍的五种方法,简便、实用性强,比较而言,下面介绍的第六种方法更具代表性,是最简单的一种。

  六、利用工具箱的Crop工具

  1、绘制一个圆角矩形;

  2、选择工具栏中的“Crop工具”,将图像的上半部分选中,调整好大小(如图8):


图8

  3、双击选中部分进行剪切,大功告成。

  上述六法,各具特点,或简单,或复杂,分别应用了不同的命令,达到了相同的目的,实属殊途同归,启发我们遇到问题多加思考,一定能够找到解决的办法。

  (责任编辑龙哥)


  


发表评论】【初学者园地】【科技聊天】【关闭窗口

新 闻 查 询

 相关链接
【学园专题】网页图象制作新锐-FireWork轻松入门
用Fireworks MX制作立体感相片(2002/07/23 11:38)
用Fireworks也可以制作精美的动画(2002/07/17 11:26)
用Fireworks MX制作立体感相片 (2002/07/23 11:38)
初识Fireworks MX系列之面板接触 (2002/05/15 09:28)


科技时代意见反馈留言板 电话:010-82612286 或 010-82628888-5488   欢迎批评指正

新浪简介 | 用户注册 | 广告服务 | 招聘信息 | 中文阅读 | Richwin | 联系方式 | 产品答疑

Copyright © 1996 - 2002 SINA.com, Stone Rich Sight. All Rights Reserved

版权所有 四通利方 新浪网