收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 38477|回复: 44

[效果制作] Fireworks 终极教程之(一) 细节篇

[复制链接]
发表于 2009-11-18 15:27:45 | 显示全部楼层 |阅读模式
这是一篇新写的教程,首发Blueidea,最近很忙,这篇教程写好后也搁置两三天了,不过由于之前已经整理好了,发上来也只是Copy Paste的事情 ^_^

使用Fireworks(以下简称FW)做图标主要要留意两点:
一是FW专注于web设计,不适合创造一些过于复杂的PS效果,请期待FW CS5的PS滤镜;
二是FW的编辑方式类似于AI,如果您习惯于工作在PS类的像素着色环境下,请华丽的飘过。


接下来进入正题,我们拿一个比较标准的图标来临摹做说明,这样可以方便您理解。

下图是国内知名的eico design所创作的一套图标,我们要临摹的对象就是图中被框住的信封图标。事先说明一下,因为教程的主题,我们会对这个图标加入一些细节,因此我们的最终临摹结果会与原图不太一样。

img_00.gif
 
 
-Step 01-
把需要临摹的图标剪下来作为参考,锁定图层。我这里FW的路径面板是从Fireworks CS4中提取的,不过对接下来的操作都无影响,因为我使用的全是CS3包含的功能。

img_01.jpg
 
 
-Step 02-
用Rounded Rectangle工具画出一个和样图相仿的圆角矩形,使用四个圆角控制点调节好圆角的半径,然后按下Ctrl+Shift+G把图形打散。
随后把第一个圆角矩形复制一份,用白色箭头工具往四个方向移动一像素,制作出如图所示的两个圆角矩形(注意用白箭头处理好圆角处的八个节点,它们是要对齐的)。

img_02.jpg
 
我们不能用Stroke去给矩形加外边框,因为虚边会把你给搞死。如果你用Rounded Rectangle工具画出来的圆角矩形已经出现了非Stroke虚边,那就把节点打散后,用黑色箭头工具选中那个Path,点击路径面板的Round Points to Pixels把路径的所有节点归位到像素交点(也可以用白色箭头工具选中某个节点单独进行归位)。

img_02a.jpg
 
 
-Step 03-
把大的圆角矩形复制一份放到最顶层,用白色箭头配合Shift+方向键得到一个倒三角,随即复制一份,上面的倒三角用Linear填充渐变;下面的倒三角实心填充褐色,并设置1px羽化。

img_03.jpg
 
 
-Step 04-
用白色箭头选中途中所示那些节点,然后用键盘的方向键往下挪两个像素,这样使信封看起来长一点(因为这里单个图标不受整体风格约束)。

img_04.jpg
 
 
-Step 05-
把之前画的渐变填充倒三角作垂直翻转,复制一份摆放好,它们的位置关系如下图所示。两个倒三角上下相隔1px多一点。可以用白色箭头工具选择深褐色倒三角上方的四个节点,以鼠标拖动的方式配合辅助线挪动把节点往上挪0.3~0.5个像素,这样可以让深褐色的先显得不那么虚(再一次重申,尽早打消用Stroke作边线的念头,这里不是photoshop)。

img_05.jpg
 
 
-Step 06-
留意样图的图标上方有一道高光,而且不是常见的单像素放射高光(大约为两个像素的高光处上面的1px高光要亮于下面的1px),因此可以考虑用Ellipse这种椭圆形的放射性填充达到这种效果。

img_06.jpg

我们选中并复制最底的圆角矩形两次,移动位置后得到两个上下相隔2px的圆角矩形,用两个矩形路径相减的方法得到一个新的路径,对其进行Ellipse填充(白色0-100透明度),最后把这个高光路径的叠加方式设置为Overlay。

img_06a.jpg
 
 
-Step 07-
底部加个1px高光。

img_07.jpg
 
 
-Step 08-
现在的结果如下图,先歇一会儿,喝口茶,接下来我们进行细节的添加。

img_08.jpg
 
 
-Step 09-
暂时把背景改成白色,我们可以看到之前一个倒三角因为使用了羽化,有一些像素从信封两边溢出了一点。

img_09.jpg

这里有两种方法可以对这些像素进行处理,一是Flatten为Bitmap,二是保留路径的前提下做遮罩,我偏向于后者,因为这样保留了路径,以后如有需要可以进行再编辑,操作如下图所示:

img_09a.jpg
 
 
-Step 10-
我们回到深色背景,有没有感觉到信封的两边显得有点平?我们用一个Bars或者Radial填充来加点效果上去。

img_10.jpg
 
 
-Step 11-
接下来为信封的上下三角形加单像素高光,因为之前已经反复讲过路径相减(Punch Path,您可以在Modify – Combine Paths菜单下找到它)的操作,这里不再作说明,如下图:

img_11.jpg
 
 
-Step 12-
同理给下面的三角形加高光。

img_12.jpg
 
 
-Step 13-
因为背景是比较深的颜色,我们可以考虑加个发光。这里我们不去用FW的投影或发光滤镜,还是用Path,为什么?因为比较好控制,个人喜好吧。我们可以做一个比信封底层的圆角矩形上下左右多1px的新圆角矩形,不羽化,透明度30。

img_13.jpg
 
 
-Step 14-
再在加一道1px高光在下面。

img_14.jpg
 
 
-Step 15-
至此图标基本完成,下面进入润色阶段。我们把所有图层全选“复制”一份,然后迅速按下Ctrl+Alt +Shift+Z把图层平面化为位图,然后设置叠加方式为Overlay,透明度60,这样就会发现图标的饱和度、对比度被提高了,这是我个人比较喜欢的快速润色的方法,但并非任何时候都适用,某些时候你必须手动用FW自带的滤镜去调曲线、对比度、饱和度等参数。

img_15.jpg
 
 
-Finish-
最终效果(其实信封下方的三角我也用路径加了Path作为投影,写完了才发现,我就不再折腾了……)

img_16.jpg



本教程主要用来启发怎样用Fireworks绘制图标和加入细节

[[i] 本帖最后由 WaveF 于 2010-1-11 17:44 编辑 ]

评分

参与人数 3威望 +5 收起 理由
17526918 + 1 详细,周到,学习中~~~
RockHward + 2 支持一下
froglt + 2 精品文章,楼主再接再厉多发好教程啊

查看全部评分

发表于 2009-11-18 17:10:32 | 显示全部楼层
学习了。,。。。。
回复 支持 反对

使用道具 举报

发表于 2009-11-18 19:53:24 | 显示全部楼层
哈哈,我就喜欢这样的强帖,学习了。
回复 支持 反对

使用道具 举报

发表于 2009-11-19 15:32:36 | 显示全部楼层
- -FW汉化后,英语又差。看这个好纠结。

不过,学会了怎么处理虚边
回复 支持 反对

使用道具 举报

发表于 2009-11-19 20:38:15 | 显示全部楼层
强人!!
因为一开始学作图就是FW,所以已经习惯矢量类的上色,现在大学里学PS,看到PS教程,都是直接选取框选好后直接填充颜色,不能放大缩小,就是lz说的“PS类的像素着色环境下”很郁闷。。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-11-20 13:33:14 | 显示全部楼层

回复 5# sq4537 的帖子

我刚好相反,我是先工作在PS下,然后用上了FW就喜欢上了FW的着色方法 ^_^
回复 支持 反对

使用道具 举报

发表于 2009-11-26 14:47:05 | 显示全部楼层
一是FW专注于web设计,不适合创造一些过于复杂的PS效果,请期待FW CS5的PS滤镜;

这句话经典。教材更经典。
回复 支持 反对

使用道具 举报

发表于 2009-11-28 04:05:34 | 显示全部楼层
交个作业
folder.png

评分

参与人数 1威望 +1 收起 理由
WaveF + 1 做得不错,就是偏红了一点,继续努力!

查看全部评分

回复 支持 反对

使用道具 举报

发表于 2009-11-28 11:44:56 | 显示全部楼层
很好的帖子,学习了啊。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-11-28 18:03:50 | 显示全部楼层

回复 8# Abaddonw 的帖子

Abaddonw做得不错!如果饱和度能低一点就完美了 ^_^
回复 支持 反对

使用道具 举报

发表于 2009-11-30 10:20:26 | 显示全部楼层
看了后给我一个感觉,需要的不是软件的操作能力,是人的观察力和细节的把握,这个很重要
回复 支持 反对

使用道具 举报

发表于 2009-12-1 21:58:25 | 显示全部楼层
很好的教程.....
回复 支持 反对

使用道具 举报

发表于 2009-12-2 19:46:40 | 显示全部楼层
WaveF是一个不错的版主
回复 支持 反对

使用道具 举报

发表于 2009-12-2 21:52:50 | 显示全部楼层
不顶对不起毛主席!fw做icon简直是天生利器
回复 支持 反对

使用道具 举报

发表于 2009-12-3 11:27:35 | 显示全部楼层
原帖由 [i]124492237 于 2009-11-19 15:32 发表
- -FW汉化后,英语又差。看这个好纠结。

不过,学会了怎么处理虚边

那个路径面板哪里有下啊?我还是不知道怎么处理须边啊,好像圆角柔化的话边框太粗了点
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-12-3 14:18:06 | 显示全部楼层
原帖由 [i]amycess 于 2009-12-3 11:27 发表

那个路径面板哪里有下啊?我还是不知道怎么处理须边啊,好像圆角柔化的话边框太粗了点


别太注意路径面板了,这个教程所使用的功能在CS3都有的,那是CS4的路径面板
LS可能以前一直工作在矢量绘图软件下吧?位图对弧形边缘的处理就是这样的,跟矢量的没法比啊
回复 支持 反对

使用道具 举报

发表于 2009-12-7 11:13:23 | 显示全部楼层

回复 15# amycess 的帖子

你用的是FW8.0吧,cs4才有这个的。
回复 支持 反对

使用道具 举报

发表于 2009-12-7 11:59:29 | 显示全部楼层

为什么我的这么灰啊

FW 8 灰灰灰
为什么这么灰呢.png
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-12-7 12:15:28 | 显示全部楼层

回复 18# 412052210 的帖子

1. 渐变的范围可以再大一点
2. 显得灰主要是因为颜色的饱和度不够高,按照第15步的方法叠加一个试试?
   或者直接将整个图标平面化之后用Hue/Saturation滤镜把饱和度增大即可
回复 支持 反对

使用道具 举报

发表于 2009-12-7 13:51:34 | 显示全部楼层

回复 19# WaveF [楼主] 的帖子

嗯,好的,谢谢斑竹
回复 支持 反对

使用道具 举报

发表于 2010-2-9 23:03:37 | 显示全部楼层
学习啦。。觉得图标好难做哦- -
未命名-2.jpg
回复 支持 反对

使用道具 举报

发表于 2010-4-23 16:55:38 | 显示全部楼层
好东西~~~~~~~~~~
回复 支持 反对

使用道具 举报

发表于 2010-4-23 17:47:09 | 显示全部楼层
相当精致 做的。。顶~!
回复 支持 反对

使用道具 举报

发表于 2010-6-24 15:09:42 | 显示全部楼层
图标1.png

完成了!
回复 支持 反对

使用道具 举报

发表于 2010-6-26 14:12:00 | 显示全部楼层
天才级人物啊
回复 支持 反对

使用道具 举报

发表于 2010-7-13 13:20:01 | 显示全部楼层
用的是汉化版 看英文还是比较纠结 不过还是要说lz细节真的没话说 学习到了就要顶
回复 支持 反对

使用道具 举报

发表于 2010-7-14 09:03:57 | 显示全部楼层
非常强悍,步骤详细,一看就明白
回复 支持 反对

使用道具 举报

发表于 2010-7-14 15:50:21 | 显示全部楼层
录个视频出来吧

[[i] 本帖最后由 coderjoy 于 2010-7-14 16:45 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2010-8-5 07:58:05 | 显示全部楼层
好贴······
回复 支持 反对

使用道具 举报

发表于 2010-8-11 10:58:25 | 显示全部楼层
楼主无私,强帖,必须马克
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2017-7-21 19:04 , Processed in 0.356822 second(s), 15 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表