fireworks完成图标的细节制作

   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作为投影,写完了才发现,我就不再折腾了……)

时间: 2025-01-20 22:08:30

fireworks完成图标的细节制作的相关文章

图标绘制细节心得:简单的game图标的绘制教程

文章描述:icon小教程之图标细节的绘制. 今天通过一个简单的game图标的绘制教程,和大家分享在绘制过程中细节的处理和一些画图标的心得,好的,我们开始吧! Step1 首先要定好图标的透视,这是非常重要的,这关系到图标的整体美感,透视本身也可以很好的表现图标的细节,为了透视的真实,可以通过3D软件或者平面软件中的一些的透视功能来实现.整体框架搭好,开始接下来的绘制. Step2 先大致的铺上一层"控制板"的颜色,这里需要注意一些基本的光影渐变,以及边缘的处理. Step3 这一步我们

Fireworks 中毛笔字条幅的制作

[焚天讲义][转帖]Fireworks   中毛笔字条幅的制作胡乱做的,很难看,没有表现不出书法的真正韵味来,大家不要见笑...... 需要稍微注意的几个步骤: 1)毛笔字效果的制作 2)印章的制作 3)宣纸条幅背景的制作 我就不按照通常的step-by-step的步骤来说了,因为我很懒. 用来做毛笔字的中文字体很多,这里"织梦幻影"及落款小字都选用了"方正黄草简体",大家有兴趣可以选用其他的字体. 1.毛笔字的制作[要点:内阴影特效] 其实大部分可以用来做毛笔字的

Fireworks实例水晶樱桃的制作教程

很多朋友都曾经讨论过如何在Fireworks中制作水晶樱桃,该文章教程以图片的形式对水晶樱桃的制作进行了讲解,更清楚的传达给每个学习者,下面是Fireworks实例水晶樱桃的制作具体操作,希望大家喜欢! 本文为大家编辑的Fireworks实例水晶樱桃的制作,希望对大家有所帮助!

PS图标教程 Photoshop制作晶格化ICON图标

  我们常常看到一些手机或者电脑软件应用图标是精美的晶格化效果,那么这种晶格化icon图标是怎么制作出来呢?下面我们一起来看看操作教程. 先来看看效果图: PS图标教程 Photoshop制作晶格化ICON图标 1.新建画布填充背景颜色. 二.画出图标基本外形,填充渐变色. 三.新建画布,新建图层,隐藏背景图层. 四.将做好的渐变存为图案. 五.在icon的基本形状上叠加刚定义的图案. 六.画上剪影icon,家厚度.投影就完成了! 漂亮吗~大家也可以根据自己的喜欢修改图标形状以及颜色. 分类:

PhotoShop立体质感砖块UI图标设计步骤制作教程

教大用PhotoShop打造立体质感砖块UI图标效果,UI即User Interface(用户界面)的简称.UI设计则是指对软件的人机交互.操作逻辑. 界面美观的整体设计.好的UI设计不仅是让软件变得有个性有品味,还要让软件的操作变得舒适.简单.自由.充分体现软件的定位和特点. 效果图: 教程制作步骤如下: 相关教程: PhotoShop绘制一个太极图图标教程 PS制作一把质感金属锁具图标教程 AI和PS绘制齿轮图标 PS制作经典质感拉丝钟表UI图标设计教程 分类: PS鼠绘教程 ps图标制作教

fireworks技巧图标细节刻画

使用Fireworks(以下简称FW)进行图标设计主要要留意两点: 一是FW专注于web设计,不适合创造一些过于复杂的PS效果,请期待FW CS5的PS滤镜: 二是FW的编辑方式类似于AI,如果您习惯于工作在PS类的像素着色环境下,请华丽的飘过. 接下来进入正题,我们拿一个比较标准的图标来临摹做说明,这样可以方便您理解. 下图是国内知名的eico design所创作的一套图标,我们要临摹的对象就是图中被框住的信封图标.事先说明一下,因为教程的主题,我们会对这个图标加入一些细节,因此我们的最终临摹

用Fireworks MX的变形工具制作大脚印图标

在我们平时设计网页的时候,不免要经常动手制作一些小的图标以满足实际的需要.Fireworks MX既然做为三剑客之一,在这方面自然有自己独特之处.我们今天就以"大脚印"图标为例子来讲解一些如何使用Fireworks轻松设计网站图标. 步骤1: 打开Fireworks MX,使用菜单命令File-New,新建一个文件,宽与高均为300像素,背景色为白色. 步骤2: 在工具栏上选择画圆工具(Ellipse Tool),并且在Properties面板上设置填充色为黑色,边框色无.绘制一个椭圆

认识响应式图标,如何制作响应式图标

文章描述:说实话,第一次听到"响应式图标"我也觉得怪怪的,正如不久之前,人们为了让图标字体更适合不同设备,而更改它们的大小一样,但是这一想法却让响应式设计以及图标设计有了长足的进步.那么今天,我们就来八一八,这到底什么个什么玩意儿. 说实话,第一次听到"响应式图标"我也觉得怪怪的,正如不久之前,人们为了让图标字体更适合不同设备,而更改它们的大小一样,但是这一想法却让响应式设计以及图标设计有了长足的进步.那么今天,我们就来八一八,这到底什么个什么玩意儿. 他是什么?

Fireworks动态元件的基本制作及高级运用教程

本例为Fireworks技巧实例教程,主要讲解动态元件的创建方法,教程从介绍动态元件的概念.创建一个基本的Fireworks动态元件到运用JSF代码的高级运用均有讲解,希望能给朋友们带来帮助~~ 首先讲一下什么是动态元件,在Fireworks中,我们可以创建"图形"."按钮".和"动画"三种元件,但往往我们只是直接从文档库里面直接把元件拖出来用,我们把这种元件成为静态元件. 举个例子:我绘画了一颗"OK"按钮并转换为按钮类的元