fireworks打造美丽图标教程

行使fireworks（以下简称fw）举办图标计划首要要寄望两点：

接下来进入正题，我们拿一个较量尺度的图标光降摹做声名，这样可以利便您领略。

下图是海内知名的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

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!