首页 > 软件应用 > 用Fireworks制作圆角图片

用Fireworks制作圆角图片

话说Fireworks装在电脑里N久,而我至今还没学过多少实质性的技术。电脑里的Photoshop也如此,基本处于闲置状态。我平时还是习惯用FW编辑简单的图片,比如打个水印什么的,还有尝试过用FW制作网页,折腾了很久,发现做出来的网页也不至于太难看。

今天讲的这个图片圆角制作方法是以前我在网上看到的。具体在哪也忘了。当时是为制作博客顶部header图片的圆角效果,特意在网上找的相关教程。找到后自己折腾了一番,搞定了。虽然我的处理比较粗糙。

昨天趁断电时间截了一些图片,写下一个简单的教程。供和我一样的新手朋友参考。我的FW版本是CS5的绿色精简版本,我用过FW8.0,方法是一样的。

一、这是我用作例子的图片和我的FW

fw_yj01

二、首先选择矩形中的圆角矩形

fw_yj02

三、画一个和你要编辑的图片大小相同的圆角矩形,圆角参数可以自己调整。

fw_yj03

四、按CTR+A组合键全选,点修改–蒙版–组合为蒙版

fw_yj04

五、这是组合后的效果。我圆角部分现实透明了。

fw_yj05

六、点文件–图像预览–进行导出设置

fw_yj06

七、一般选择GIF动态图片。选择Alpha透明,然后导出。

fw_yj07

这个是导出后的效果,GIF格式的。缩小后貌似有锯齿。

fw_yjok

通过以上方法导出的图片采用的是Alpha透明,听说在IE6下无效,因为电脑上没有IE6所以我不太了解。不过你可以根据网页颜色设置同样的颜色。如下:

比如我的网页是绿色,那么我选择绿色的颜色,这样在网页中的效果也是圆角了。我的博客header图片就是用这种方法的。要知道背景的准确颜色可以使用颜色拾取软件,我以前写过的《用颜色拾取器获取你需要的颜色 》一文提过相应的软件。貌似PS等软件也可以,但我没试过,不了解。

fw_yj08

下图是jpg格式的,就是采用这个方法,适合我的网页背景。

fw_yjok1

想小小DIY图片圆角的朋友可以试试这个方法,很简单,很容易学会。

附Fireworks CS5绿色简体中文版下载网址:http://www.itopdog.cn/index.php/design/1818.html

丢失20号晚上8点30分至21号早上的几条评论,无法重新导入了。




分类: 软件应用 标签: , ,
  1. 2010年6月20日15:13 | #1

    为什么 我导出的 不够透明 有点灰白色

    [回复]

    朵未 回复: Firefox 3.6.4 Firefox 3.6.4 Windows XP Windows XP

    额,最好用jpg格式的。把图片背景设为网页的背景。

    [回复]

  2. 2010年6月20日15:00 | #2

    这样确实很简单 这个问题困扰了一段时间了 只是没好好摸索 之前用工具或ps搞 非常感谢 很容易就学会了 :mrgreen:

    [回复]

    朵未 回复: Firefox 3.6.4 Firefox 3.6.4 Windows XP Windows XP

    这个是挺简单。很高兴对你有所帮助。 :smile:

    [回复]

  3. 2010年6月20日09:32 | #3

    我一般喜欢出jpg或者png格式的,考虑到很多用户还使用ie6的,而ie6不能png透明,只好把背景做成和自己背景一样的,以便让用户完美体验。嘎嘎~
    gif会失真的,所以我不喜欢这个格式的。

    [回复]

    朵未 回复: Firefox 3.6.4 Firefox 3.6.4 Windows XP Windows XP

    是啊。还是jpg用的多。png我用的很少。

    [回复]

  4. 2010年6月20日00:58 | #4

    最近我给自己做了一个主题,自认为挺好看的。也是圆角。

    [回复]

    朵未 回复: Firefox 3.6.4 Firefox 3.6.4 Windows XP Windows XP

    是现在在用的这个吗?你厉害。俺不知道要什么时候才会。 :smile:

    [回复]

  5. 2010年6月20日00:20 | #5

    我只会用PS~
    FW不会用。 :grin:
    看了楼主的文章,感觉简单实用,好东西。
    问一下,你有几个博客?似乎刚才又见了一个博客的博主也叫朵末?

    [回复]

    朵未 回复: Firefox 3.6.4 Firefox 3.6.4 Windows XP Windows XP

    PS好啊。we2.org.ru也是我的。那个是双人博客。 :smile:

    [回复]

  6. 2010年6月19日23:07 | #6

    做GIF时用过FW~

    [回复]

    朵未 回复: Google Chrome 6.0.425.0 Google Chrome 6.0.425.0 Windows XP Windows XP

    我觉得FW做网页好,与DW合作,天下无双。

    [回复]

  7. yx
    2010年6月19日15:40 | #7

    想当年Adobe收购Macromedia时,我曾以为PS和FW会合并,不过至今仍未。

    [回复]

    朵未 回复: Google Chrome 6.0.425.0 Google Chrome 6.0.425.0 Windows XP Windows XP

    PS和FW还是有蛮大的区别的。何并了反而不好。

    [回复]

  8. 2010年6月19日15:16 | #8

    刚刚开始学做图片的时候用的是fw,后来好长事件没弄过了,现在居然忘记了,只会用ps了

    [回复]

    朵未 回复: Google Chrome 6.0.425.0 Google Chrome 6.0.425.0 Windows XP Windows XP

    我以后也要学学ps。但FW也不会放弃,因为他在网页设计方面有优势。

    [回复]

  9. 2010年6月19日14:58 | #9

    直接在图片上拉出一个圆角矩形,然后一切就OK了啊

    [回复]

    朵未 回复: Google Chrome 6.0.425.0 Google Chrome 6.0.425.0 Windows XP Windows XP

    最关键是组合蒙版那一步。 :smile:

    [回复]

  10. 2010年6月19日14:27 | #10

    FIREWORKS没用过 :???:

    [回复]

    朵未 回复: Google Chrome 6.0.425.0 Google Chrome 6.0.425.0 Windows XP Windows XP

    呵呵,PS懂吧?

    [回复]

  11. 2010年6月19日13:26 | #11

    还是先等我学PS吧。哈哈····

    [回复]

    朵未 回复: Google Chrome 6.0.425.0 Google Chrome 6.0.425.0 Windows XP Windows XP

    呵呵,学吧。不过没必要等。

    [回复]

  12. 2010年6月19日12:50 | #12

    我喜歡直接用圓角軟件。。哈哈

    [回复]

    朵未 回复: Google Chrome 6.0.425.0 Google Chrome 6.0.425.0 Windows XP Windows XP

    请问你是用什么圆角软件的?推荐一个。 :smile:

    [回复]

  13. 2010年6月19日10:35 | #13

    :!: 最近还想这样处理图片呢,好看。 :grin:

    [回复]

    朵未 回复: Google Chrome 6.0.425.0 Google Chrome 6.0.425.0 Windows XP Windows XP

    有些地方用用还不错啊。

    [回复]

  14. 2010年6月19日10:13 | #14

    强势围观。。

    [回复]

    朵未 回复: Google Chrome 6.0.425.0 Google Chrome 6.0.425.0 Windows XP Windows XP

    欢迎围观。 :razz:

    [回复]

  15. 2010年6月19日10:08 | #15

    这个还真没有用过,一直用PS做

    [回复]

    朵未 回复: Google Chrome 6.0.425.0 Google Chrome 6.0.425.0 Windows XP Windows XP

    PS 我不会啊。所以就用用这个。 :smile:

    [回复]

  16. 2010年6月19日00:33 | #16

    怎么没有提供一个下载地址呢?

    [回复]

    朵未 回复: Google Chrome 6.0.425.0 Google Chrome 6.0.425.0 Windows XP Windows XP

    因为我觉得网上下一个这个应该方便就没想过留一个了。我补充一个上去好了。 :smile:

    [回复]

  17. 2010年6月19日00:03 | #17

    我用过FW,也用过这个圆角,是学习一个教程做的动态图片 :oops:

    [回复]

    朵未 回复: Google Chrome 6.0.425.0 Google Chrome 6.0.425.0 Windows XP Windows XP

    我也是以前专门看到学会的。 :smile:

    [回复]

  18. 2010年6月18日23:58 | #18

    刚刚留言就断网~~晕~~

    [回复]

    朵未 回复: Google Chrome 6.0.425.0 Google Chrome 6.0.425.0 Windows XP Windows XP

    呵呵,你的这个时候俺们学校早断网了。 :smile:

    [回复]

    Junan 回复: 360Safe Explorer 360Safe Explorer Windows XP Windows XP

    :grin: 昨晚星期5~~~两不断~~ :mrgreen:

    [回复]

    朵未 回复: Google Chrome 6.0.425.0 Google Chrome 6.0.425.0 Windows XP Windows XP

    是啊。今晚也不断。 :mrgreen:

    [回复]

    Junan 回复: 360Safe Explorer 360Safe Explorer Windows XP Windows XP

    :sad: 明天要考试~~

    [回复]

  19. 2010年6月18日23:40 | #19

    这个可要学习了。对于我这样的菜牛来说。这可是技术贴。

    [回复]

    朵未 回复: Google Chrome 6.0.425.0 Google Chrome 6.0.425.0 Windows XP Windows XP

    呵呵,这个简单,看下自己就可以搞定了。

    [回复]

  20. 2010年6月18日23:21 | #20

    嗯,PS也可以,很简单的。 :grin:

    [回复]

    朵未 回复: Google Chrome 6.0.425.0 Google Chrome 6.0.425.0 Windows XP Windows XP

    俺改天也学学看。 :smile:

    [回复]

评论分页
  1. 本文目前尚无任何 trackbacks 和 pingbacks.