用Fireworks制作圆角图片
话说Fireworks装在电脑里N久,而我至今还没学过多少实质性的技术。电脑里的Photoshop也如此,基本处于闲置状态。我平时还是习惯用FW编辑简单的图片,比如打个水印什么的,还有尝试过用FW制作网页,折腾了很久,发现做出来的网页也不至于太难看。
今天讲的这个图片圆角制作方法是以前我在网上看到的。具体在哪也忘了。当时是为制作博客顶部header图片的圆角效果,特意在网上找的相关教程。找到后自己折腾了一番,搞定了。虽然我的处理比较粗糙。
昨天趁断电时间截了一些图片,写下一个简单的教程。供和我一样的新手朋友参考。我的FW版本是CS5的绿色精简版本,我用过FW8.0,方法是一样的。
一、这是我用作例子的图片和我的FW
二、首先选择矩形中的圆角矩形
三、画一个和你要编辑的图片大小相同的圆角矩形,圆角参数可以自己调整。
四、按CTR+A组合键全选,点修改–蒙版–组合为蒙版
五、这是组合后的效果。我圆角部分现实透明了。
六、点文件–图像预览–进行导出设置
七、一般选择GIF动态图片。选择Alpha透明,然后导出。
这个是导出后的效果,GIF格式的。缩小后貌似有锯齿。
通过以上方法导出的图片采用的是Alpha透明,听说在IE6下无效,因为电脑上没有IE6所以我不太了解。不过你可以根据网页颜色设置同样的颜色。如下:
比如我的网页是绿色,那么我选择绿色的颜色,这样在网页中的效果也是圆角了。我的博客header图片就是用这种方法的。要知道背景的准确颜色可以使用颜色拾取软件,我以前写过的《用颜色拾取器获取你需要的颜色 》一文提过相应的软件。貌似PS等软件也可以,但我没试过,不了解。
下图是jpg格式的,就是采用这个方法,适合我的网页背景。
想小小DIY图片圆角的朋友可以试试这个方法,很简单,很容易学会。
附Fireworks CS5绿色简体中文版下载网址:http://www.itopdog.cn/index.php/design/1818.html
丢失20号晚上8点30分至21号早上的几条评论,无法重新导入了。
为什么 我导出的 不够透明 有点灰白色
[回复]
朵未 回复: Firefox 3.6.4 Windows XP
6月 20th, 2010 at 4:57 下午
额,最好用jpg格式的。把图片背景设为网页的背景。
[回复]
这样确实很简单 这个问题困扰了一段时间了 只是没好好摸索 之前用工具或ps搞 非常感谢 很容易就学会了
[回复]
朵未 回复: Firefox 3.6.4 Windows XP
6月 20th, 2010 at 4:56 下午
这个是挺简单。很高兴对你有所帮助。
[回复]
我一般喜欢出jpg或者png格式的,考虑到很多用户还使用ie6的,而ie6不能png透明,只好把背景做成和自己背景一样的,以便让用户完美体验。嘎嘎~
gif会失真的,所以我不喜欢这个格式的。
[回复]
朵未 回复: Firefox 3.6.4 Windows XP
6月 20th, 2010 at 4:55 下午
是啊。还是jpg用的多。png我用的很少。
[回复]
最近我给自己做了一个主题,自认为挺好看的。也是圆角。
[回复]
朵未 回复: Firefox 3.6.4 Windows XP
6月 20th, 2010 at 4:54 下午
是现在在用的这个吗?你厉害。俺不知道要什么时候才会。
[回复]
我只会用PS~
FW不会用。
看了楼主的文章,感觉简单实用,好东西。
问一下,你有几个博客?似乎刚才又见了一个博客的博主也叫朵末?
[回复]
朵未 回复: Firefox 3.6.4 Windows XP
6月 20th, 2010 at 4:54 下午
PS好啊。we2.org.ru也是我的。那个是双人博客。
[回复]
做GIF时用过FW~
[回复]
朵未 回复: Google Chrome 6.0.425.0 Windows XP
6月 19th, 2010 at 11:23 下午
我觉得FW做网页好,与DW合作,天下无双。
[回复]
想当年Adobe收购Macromedia时,我曾以为PS和FW会合并,不过至今仍未。
[回复]
朵未 回复: Google Chrome 6.0.425.0 Windows XP
6月 19th, 2010 at 4:08 下午
PS和FW还是有蛮大的区别的。何并了反而不好。
[回复]
刚刚开始学做图片的时候用的是fw,后来好长事件没弄过了,现在居然忘记了,只会用ps了
[回复]
朵未 回复: Google Chrome 6.0.425.0 Windows XP
6月 19th, 2010 at 4:08 下午
我以后也要学学ps。但FW也不会放弃,因为他在网页设计方面有优势。
[回复]
直接在图片上拉出一个圆角矩形,然后一切就OK了啊
[回复]
朵未 回复: Google Chrome 6.0.425.0 Windows XP
6月 19th, 2010 at 4:08 下午
最关键是组合蒙版那一步。
[回复]
FIREWORKS没用过
[回复]
朵未 回复: Google Chrome 6.0.425.0 Windows XP
6月 19th, 2010 at 2:36 下午
呵呵,PS懂吧?
[回复]
还是先等我学PS吧。哈哈····
[回复]
朵未 回复: Google Chrome 6.0.425.0 Windows XP
6月 19th, 2010 at 2:24 下午
呵呵,学吧。不过没必要等。
[回复]
我喜歡直接用圓角軟件。。哈哈
[回复]
朵未 回复: Google Chrome 6.0.425.0 Windows XP
6月 19th, 2010 at 2:23 下午
请问你是用什么圆角软件的?推荐一个。
[回复]
最近还想这样处理图片呢,好看。
[回复]
朵未 回复: Google Chrome 6.0.425.0 Windows XP
6月 19th, 2010 at 2:23 下午
有些地方用用还不错啊。
[回复]
强势围观。。
[回复]
朵未 回复: Google Chrome 6.0.425.0 Windows XP
6月 19th, 2010 at 2:23 下午
欢迎围观。
[回复]
这个还真没有用过,一直用PS做
[回复]
朵未 回复: Google Chrome 6.0.425.0 Windows XP
6月 19th, 2010 at 2:22 下午
PS 我不会啊。所以就用用这个。
[回复]
怎么没有提供一个下载地址呢?
[回复]
朵未 回复: Google Chrome 6.0.425.0 Windows XP
6月 19th, 2010 at 2:20 下午
因为我觉得网上下一个这个应该方便就没想过留一个了。我补充一个上去好了。
[回复]
我用过FW,也用过这个圆角,是学习一个教程做的动态图片
[回复]
朵未 回复: Google Chrome 6.0.425.0 Windows XP
6月 19th, 2010 at 2:19 下午
我也是以前专门看到学会的。
[回复]
刚刚留言就断网~~晕~~
[回复]
朵未 回复: Google Chrome 6.0.425.0 Windows XP
6月 19th, 2010 at 2:19 下午
呵呵,你的这个时候俺们学校早断网了。
[回复]
Junan 回复: 360Safe Explorer Windows XP
6月 19th, 2010 at 2:40 下午
昨晚星期5~~~两不断~~
[回复]
朵未 回复: Google Chrome 6.0.425.0 Windows XP
6月 19th, 2010 at 2:45 下午
是啊。今晚也不断。
[回复]
Junan 回复: 360Safe Explorer Windows XP
6月 19th, 2010 at 9:33 下午
明天要考试~~
[回复]
这个可要学习了。对于我这样的菜牛来说。这可是技术贴。
[回复]
朵未 回复: Google Chrome 6.0.425.0 Windows XP
6月 19th, 2010 at 2:18 下午
呵呵,这个简单,看下自己就可以搞定了。
[回复]
嗯,PS也可以,很简单的。
[回复]
朵未 回复: Google Chrome 6.0.425.0 Windows XP
6月 19th, 2010 at 2:16 下午
俺改天也学学看。
[回复]