fireworks图标制作

时间:2023-01-06 20:25:04 

  欢迎大家在这里学习fireworks图片发网页,这里是我们给大家整理出来的精彩内容。那么下面小编跟大家分享了fireworks图标制作的方法/步骤,希望你喜欢。

  fireworks图标制作的方法/步骤:

  一是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作为投影

标签:图标,圆角,步骤,矩形,word教程
0
投稿

猜你喜欢

  • win10怎么开启勿扰模式?win10电脑开启勿扰模式操作方法

    2022-07-15 20:51:38
  • DELL怎么进入BIOS设置?Dell进入BIOS的方法

    2022-04-29 16:12:15
  • NVIDIA已停止工作怎么解决?NVIDIA控制面板停止工作的解决教程

    2023-10-02 03:33:43
  • ​Word怎么设置字距调整不用于中文

    2023-02-28 22:01:13
  • 火绒防火墙怎么关闭?火绒防火墙关闭教程

    2022-03-02 15:50:32
  • win11系统可以玩红警吗?小编为你带来详解!

    2023-03-31 20:01:44
  • ppt中的图表 图文告诉你在PPT中插入anychart图表

    2023-04-25 04:43:05
  • Win10任务栏软件图标变成白色如何解决?

    2023-12-17 01:02:31
  • Mac解压专家Oka如何设置压缩时使用密码加密?

    2022-08-05 20:01:51
  • IE浏览器无法显示收藏夹的解决方法

    2022-04-18 00:32:53
  • bcb.exe是什么进程 bcb进程是安全的吗

    2022-01-17 08:13:56
  • Win8.1 Update增磁盘空间功能图解

    2022-12-04 19:49:44
  • 快速删除Win10临时文件的技巧

    2022-05-17 18:23:08
  • WPS excel 如何批量的将颜色隔行填充到表格

    2023-10-03 04:27:28
  • Excel表格怎么制作快递单据模板?

    2023-10-31 03:10:48
  • WPS文字的文字设置详解 WPS文字颜色的设置技巧

    2023-11-06 01:10:30
  • WPS表格 限制输入长度避免输入身份证错误 动画教程

    2022-05-31 01:01:36
  • Excel表格怎么换行?

    2023-07-23 04:40:21
  • Win10清理QQ缓存文件的方法

    2023-02-05 05:55:55
  • 百度网盘的音乐怎么分享到QQ音乐 百度网盘把音乐保存QQ音乐教程

    2023-09-22 19:09:58
  • asp之家 电脑教程 m.aspxhome.com