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文档独一无二,最好的办法,就是在文档中插入水樱在一些大公司的文件中,也会常常用到。那么怎么在文档中添加水印呢?第
- word中怎么插入abcd英文字母的页码?word中插入页码的时候,默认是插入的123数字页码,想要插入abcd英文字母页码,该怎么插入呢?
- 最近有很多小伙伴都喜欢使用3DMAX来进行三维建模渲染,而一些使用Win10系统的小伙伴在使用3DMAX的时候却一直出现无故卡死的情况,这可
- 方法1:手动一个接一个地运行命令所需时间: 1分钟。使用合法的KMS产品密钥手动激活Office。
- 有时候,当我们打开word文档想输入文字,碰到文字输入不了的时候?遇到这样的情况,不知道亲们是如何解决的呢?今天小编给大家介绍下如何修复、解
- PowerPoint是一种将文本和图像合并成演示文稿的好方法,让你能够在控制信息流的同时添加高亮显示、图片和图形。通过改变文件格式,你就能直
- 利用快捷键可以代替鼠标做一些工作,也可以实实在在提高我们日常的工作效率,今天就先来跟大家一起分享下快捷键中F键的用法。1. F1键1)F1查
- word2019怎么加密大家知道吗?很多时候为了避免被朋友家人误删除工作文本,有时候会讲一些重要的文件设置访问权限,这样就可以很好的保护文档
- 重新加载系统时,必须经历磁盘分区过程。C盘也被称为系统盘。win10分区时c盘应该保留多少内存。现在让我告诉你。win10分区c盘留多大合适
- 许多win10系统都有自己的默认输入方法,如微软拼音输入方法,但许多朋友不喜欢这个。他们中的大多数人都习惯于经常使用这个系统。他们想删除这种
- Abbyy FineReader14怎么识别图片中的文字?FineReader14导入的图片想要提取文字,该怎么提取图片中的文字呢?下面我们
- 毫无疑问,在使用win10系统的过程中,每个人都会遇到一个常见的问题,即在正常运行时突然出现telnet非内部命令或外部命令,随后用户就不能
- word中怎么制作围棋棋盘?今天我们来教大家使用绘制表格的功能来制作围棋棋盘,其实很好画,主要就是利用表格功能,下面分享想word制作围棋棋
- 草稿视图取消了页面边距、分栏、页眉页脚和图片等元素,仅显示标题和正文,是最节省计算机系统硬件资源的视图方式。以下是小编为您带来的关于Word
- Data Loader是一款非常专业的数据库文件转换工具,通过该软件可以同步、导出和导入许多常用的数据库格式数据,还支持将MS SQL Se
- 在这里先说明一下,因为导致Word空白页的问题很多,小编也不知道大家具体是哪种情况引起的,所以将所有引起Word空白页的解决方法都一一列出,
- word作为常用软件已经走进每个职场人的日常工作,但并不是所有人都会游刃有余的编辑Word文档,那么下面就由小编给大家分享下word设置奇偶
- 画斜线:1、选择要绘制斜线的单元格,右击-选择边框和底纹,会跳出一个对话框,选择斜线方向和应用范围。最后确定即可!换行:如果是内容满了自动换
- 现在虽然有Excel,但在Word中也难免会用到表格,那么如何调整word表格行高?下面让小编为你带来word表格是如何调整行高的方法。wo
- 很多的朋友,都以为只有在Excel中,才可以进行表格中的公式运算,其实在Word中,也照样可以,不过是比较简单的运算就是了。接下来,小编就带