fireworks制作精致图标教程

  使用Fireworks(以下简称FW)进行图标设计主要要留意两点:

  一是FW专注于web设计,不适合创造一些过于复杂的PS效果,请期待FW CS5的PS滤镜;

  二是FW的编辑方式类似于AI,如果您习惯于工作在PS类的像素着色环境下,请华丽的飘过。

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

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


  步骤01

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


  步骤02

  用Rounded Rectangle工具画出一个和样图相仿的圆角矩形,使用四个圆角控制点调节好圆角的半径,然后按下Ctrl+Shift+G把图形打散。

  随后把第一个圆角矩形复制一份,用白色箭头工具往四个方向移动一像素,制作出如图所示的两个圆角矩形(注意用白箭头处理好圆角处的八个节点,它们是要对齐的)。


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


  步骤03

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


  步骤04

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


  步骤05

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


  步骤06

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


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


  步骤07

  底部加个1px高光。


  步骤08

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


  步骤09

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


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


  步骤10

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


  步骤11

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


  步骤12

  同理给下面的三角形加高光。


  步骤13

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


  步骤14

  再在加一道1px高光在下面。


  步骤15

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


  Finish

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

时间: 2024-09-26 16:42:04

fireworks制作精致图标教程的相关文章

Fireworks制作精致浪漫的彩色网格背景

  网格化图像效果在设计中很常见,这种效果很适合作为网页或者通栏的背景图像,给人浪漫精致的感觉. 下面就是我们用Fireworks制作的网格化马赛克的背景效果,以及添加了前景人物之后的效果.很漂亮吧? 图示:网格化图像效果 图示:网页通栏效果 具体制作方法如下: 1.在Fireworks中打开素材图像,如下图所示. 注意选择色彩丰富的背景,处理效果会比较好. 图示:打开素材图像 2.按快捷键[Ctrl+6],把图像的显示比例放大到原来的1600%,如下图所示. 图示:放大显示比例 3.按键盘上的

Photoshop布尔运算制作无线信号图标教程

给各位Photoshop软件的使用者们来分享一下利用布尔运算制作无线信号图标的教程. 教程分享: 以画一个无线图标为例:   先说个常规的方式: 画一个圆形的形状,然后复制粘贴这个形状,按比例缩小80%   点击上面的减去选项,得到了一个圆环.   做法:如果你想在一个图层上做一个圆环形状的话,先选择形状工具,必须选一个选项(合并,减去,相交,重叠),再画形状,才能实现在一个图层上画多个形状. 注意: 1,如果停留在选择工具上,选项(合并,减去,相交,重叠)是对当前选择的形状的改变. 2,如果你

photoshop利用布尔运算制作无线信号图标教程分享

给各位photoshop软件的使用者们来详细的解析分享一下利用布尔运算制作无线信号图标的教程. 教程分享: 以画一个无线图标为例:   先说个常规的方式: 画一个圆形的形状,然后复制粘贴这个形状,按比例缩小80%   点击上面的减去选项,得到了一个圆环.   做法:如果你想在一个图层上做一个圆环形状的话,先选择形状工具,必须选一个选项(合并,减去,相交,重叠),再画形状,才能实现在一个图层上画多个形状. 注意: 1,如果停留在选择工具上,选项(合并,减去,相交,重叠)是对当前选择的形状的改变.

Illustrator简单制作字体图标教程

给各位Illustrator软件的使用者们来详细的解析分享一下简单制作字体图标的教程. 教程分享: 基本思路:一.制作图标 → 二.生成图标字体 → 三.用CSS把字体引入网站. 工具: 1.Adobe Illustrator,版本不限,需要能将文件存为SVG格式即可(其他能制作SVG格式的软件应该也可以,我没试过); 2.压缩工具,支持ZIP格式(基本上是个压缩工具都支持). 另外确保电脑能上网. 方法: 1.在AI中新建文档,宽高均为512像素,如下图(不要问我为啥是512px,我也不知道,

photoshop快速制作描边图标教程分享

给各位photoshop软件的使用者们来详细的解析分享一下快速制作描边图标的教程. 教程分享:       好了,以上的信息就是小编给各位photoshop的这一款软件的使用者们带来的详细的快速制作描边图标的教程解析分享的全部内容了,各位看到这里的使用者们小编相信大家现在那是非常的清楚了制作方法了吧,那么各位就快去安好小编上面的教程自己去制作下描边图标看看效果吧.

用Fireworks制作IE图标的教程

1.新建画布,选取椭圆工具,按SHIFT绘制一个圆形,再在圆形的内部绘制一个略小的椭圆,使用菜单对齐命令将两者居中对齐. 2.同时选中圆形和椭圆对象,选择菜单"修改|组合路径|打孔"命令,组合得到圆环图形. 3.选取矩形工具,在圆环中心位置绘制一个矩形框,同时选中两个对象,选择菜单"修改|组合路径|联合"命令. 4.使用钢笔工具,绘制如图所示的图形,用其对原图形进行打孔切割,得到字母"e"的基本形态. 5.绘制一个椭圆,选取缩放工具,将其旋转约4

Photoshop制作围棋图标教程

  教程介绍小图标的制作方法.制作之前最好先找一些类似的实物素材参考一下,把思路整理好.同时图标中的所有元素并不一定要全部做出来,有好的素材也可以用素材. 最终效果 1.找实物图片参考,仔细观察形状及光影变化等细节,很少有人能凭借脑袋中的记忆凭空画出一个实物,所以寻找参考图片是一个最好的方法. 2.使用形状工具画出基本形状. 使用形状工具时最好把文档显示比例调成100%,如果大于或小于100%,形状边缘会出现模糊现象,出现这种情况的原因:当你放大或缩小显示比例绘制矢量图形时,无法准确地把图形边缘

PS制作青花图标教程

  首先观察一下这个图标,发现其实一点都不复杂,主题部分只要两个图层就可以搞定了.         注:更多精彩教程请关注三联photoshop教程栏目,三联PS群:249667984欢迎你的加入 分类: PS图片处理 ps图标制作教程

使用Fireworks制作香烟的教程

教程 我们首先选择的file> New或CNTL+N, 新建一个400x200象素的fireworks文件,设置分辨率为72,背景色为#99CC99.做一个烟身, 选择矩形工具,拉一个矩形.在属性面板设置这个矩形宽222个象素,高18个象素.然后设置矩形的填充如图.线性填充的颜色从左到右分别为: #CCCCCC, #FFFFFF, #FFFFFF 和 #E5E5E5.再做一个矩形来充当过滤嘴. 选择矩形工具 ,拉一个矩形.设置这个矩形的长为68,高为18.设置填充如图:Linear线性填充的颜色