fireworks技巧图标细节刻画

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

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

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

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

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

Step 01

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

Step 02

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

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

时间: 2024-11-08 18:22:46

fireworks技巧图标细节刻画的相关文章

fireworks完成图标的细节制作

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

网页设计中文本排版的技巧和细节

网站的核心是内容,用户访问网站最重要的目的就是要看网站的正文,所以,网页的文本排版非常重要. 网页的文本排版并不是仅仅在CSS里设置个字体大小那么简单的,想要有好的排版,对细节要下一番功夫才行. 字体大小与行距 在早期的网页设计中,设计师为了追求中文字体的最佳视觉效果,经常使用12px像素的字号.其实在现在看来,网站内容页面用这么小的文字是不可取的,小字体的可读性很差,没有多少人愿意非常费力的盯着屏幕去辨识那些小字.应该说,将文字的字号设置成14px或者更大的16px会更加合理,浏览者阅读起来也

你所不知道的CSS滤镜技巧与细节

本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,语法如下,还未接触过这个属性的可以先简单到 MDN - filter 了解下: {      filter: blur(5px);      filter: brightness(0.4);      filter: contrast(200%);      filter: drop-shadow(16px 16px 20px 

你所不知道的 CSS 滤镜技巧与细节

承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 系列 CSS 文章汇总在我的 Github ,持续更新,欢迎点个 star 订阅收藏. OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,语法如下,还未接触过这个属性的可以先简单到 MDN -- filter 了解下: { filter: blur(5px); filter: brightness(0.4); filter: co

利用百度知道推广淘宝商城的技巧与细节

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 谈起淘宝客推广,很多人都会通过利用百度知道来进行推广宝贝和推广淘宝店铺,以及利用百度知道推广淘宝商城.因为我们都知道,百度对于自己的产品,百度知道和百度百科非常友好,很多关键词搜索之后,都是会排在最前面,尤其是百度知道在百度里的权生重非常高,所以百度知道的内容都是排在第一位. 虽然目前很多人都在利用百度知道来进行淘宝客的推广,但是仍然有很多人

icon小教程之图标细节的绘制

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

付费推广 淘宝直通车运用的技巧和细节

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 如今在淘宝开店,推广是避免不了的,有付费也有免费.没钱的当然要累点,去论坛博客一条一条的推广了.但付费的也不轻松,烧钱要烧的有效果,不然再多的钱也烧不出好点的业绩.现在淘宝付费推广用的最多的就是直通车了.下面谈谈对直通车推广的技巧和一些细节.加入直通车首先要预存500元的推广费,当然也可以存的更多一点.直通车的后台有很多的设置点击,钱存进去之

你所不知道的 CSS 动画技巧与细节

怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到的动画不加特殊说明,皆指 CSS 动画.   正负旋转相消 嗯.名字起的很奇怪,好像数学概念一样. (写完文章才发现这里应该叫正反旋转相消,图都截完了,大家心里清楚就好) 在动画中,旋转是非常常用的属性, { transform: rotate(90deg); } 那旋转有一些什么高级点的技巧呢?当

网页导航设计技巧:图标导航设计趋势

文章描述:不知不觉的,很多网页设计中采用了图标式导航(Navigation)--一般使用三道杠作为图标,用以导航. 不知不觉的,很多网页设计中采用了图标式导航(Navigation)--一般使用三道杠作为图标,用以导航.这种导航的好处是节省空间,让界面更简洁. 图标式导航的案例 这是YouTube 的图标式导航(移动版): 这是Squarespace的图标式导航: AWARD的图标式导航不拘一格: 问题所在 问题在于,点击图标式导航之后,图标本身没有任何变化.也就是说:操作缺乏反馈. 按钮的状态