Flash设计制作精美的图标

设计

  目前流行的图标设计软件组合是 Illustrator/ Corel Draw + Photoshop (本文不讨论象素图标),做出来的图标是静态的,如果要应用于Flash, 必须通过位图导入,且不说透明GIF的锯齿、PNG的大体积,光一个马赛克现象就使得可用性大打折扣了,更不用说做一个动态的图标。

  用Flash设计图标的优点是显而易见的: 支持动态图标,无失真放大,移植方便,可以和声音结合等等。缺点是不适合表现复杂的光影,一看就是卡通的。

  先看看我的实验作品:

点击这里下载源文件

  如果你对过程感兴趣,那么请继续, 我们先从中间的小球开始

  1.新建一个mc,名字就去做icon_ball吧

  2.画一个正圆形,设置轮廓和填充的样式,效果如下:

  3.用渐变调整工具调整一下:

  4.新建一个图层,取名hilight,顺便把原来的帧改名ball

  5. 再画一个圆,移动到如图位置

  6.在Color Mixer面板中修改一下 结果如图:

 

  图中黑色表示透明,取消选择看看

  7.调整一下渐变方向

  8.创建一个阴影层

  9.画一个黑色的圆,选中后,使用柔化边缘功能,设置参数

 

  10.选中阴影,按F8, 转成元件,取名ball_shadow

  11. 调节ball_shadow的透明度和大小

  12. 新建一层,画上标志

  通过上面的方法,相信你一定掌握了画立体形体的基本方法,那就是:
  依次画基本形状、渐变、高光、阴影。

  下面的时钟也是这样的方法,所以我不再详细介绍,这里仅截取几个关键步骤,你可以自己发挥,因为这个不是唯一的方法,相信你会创造出适合自己的方法。

  效果预览:

  1.面板的制作

  2.刻度的制作
  我喜欢小而细的刻度,为了方便起见,放大2倍看
  画好所有刻度并转成元件(F8)

  复制一次这个元件,按Ctrl+Shift+P粘贴,按Ctrl+↓移到下面,然后降低亮度

  效果:

  3.指针的制作
  新建一个mc,画一个指针,主意注册点(十字)的位置
  因为指针颜色用了白色,所以我们暂时把文档背景设成黑色

  复制3个指针,使他们的注册点都和面板的中心重合

  选中这三个指针,按F8,转成元件

  效果如图

  复制这个mc, 同刻度一样,降低亮度处理,

  4.稍微修饰一下,加上底座和文字,并将文字打散最后加上代码,看看你的时间对不对:)

  鼠标移到第一个图标的地方,可以看到放大镜会运动,同时阴影也随着运动,而且只在一定的区域中显示,正是Flash让图标充满动感

  这是完成后的时间线:

  说明:如果你对Flash一窍不通,建议你先找本入门的书看看,限于篇幅,本文可能无法满足你的需要

  元件分解图:

  1.文件夹

  纯粹的渐变+轮廓,注意轮廓的颜色淡一些

  2.阴影

  先画出一个圆和一条线,然后转化成填充,最后柔化边缘并转成元件

  3.遮罩

  实际上只是半透明部分,见源文件

  3.放大镜

  放大镜主体部分,白色的粗线条已经转化成填充,中间再用墨水瓶工具填上淡淡的轮廓

  放大镜手柄,塑料部分用渐变,金属部分直接用线条画出形状,然后上色并删除线条

  注意:放大镜主体和手柄一起转到元件中,这样可以一起运动

  下面我们要做的,只是创建最基本的动画了,限于篇幅,本文不再详细介绍,如果感兴趣,可以到经典论坛Flash专栏提问,欢迎光临:)

  具体的ActionScript代码请看源文件

时间: 2024-07-28 15:37:00

Flash设计制作精美的图标的相关文章

Flash设计制作可爱的小兔子跷跷板动画实例教程

  这个Flash实例制作了两只可爱的小兔子玩跷跷板的动画,主要用到椭圆工具.渐变填充和任意变形工具等,操作简单易懂,适合练习. 制作步骤: 1.新建一个默认大小的Flash文档.先画天空背景,用矩形工具画一个矩形,在对齐面板中按下"相对于舞台",再点"匹配宽和高"按钮,最后点"垂直中齐"和"水平中齐"按钮.与舞台对齐之后给矩形设置如下从白色到天蓝色的渐变,方式为"线性". 图1 2.草地.画一个草绿色的矩

PS制作精美铅笔图标

铅笔是一种在视觉设计常用到的物品,在此教程中我将告诉您如何制作出一款铅笔图标.我们将使用渐变.选择工具和变形工具,来进行这个有趣的创作. 老惯例,先让我们欣赏下最终效果,点击下图可以观看清晰大图:     第一步: 先建立一个文档,把它设为950像素宽,600像素高,分辨率为300像素/英寸,背景为白色.然后选择"矩形选框工具",把样式设为"固定大小",400像素宽,100像素高,如图:   第二步: 通过辅助线的规划,把选区放置在画面中心 第三步: 新建一层,取名

Flash设计制作晶莹剔透的沙漏反转动画实例教程

  本教程主要使用Flash制作晶莹剔透的沙漏流动动画教程,效果做的非常的漂亮,喜欢的朋友让我们一起来学习吧. 先看看效果图 下面是教程

ps制作精美格子渐变图标

  这次的photoshop绘画教程是学习用ps制作精美细腻的格子渐变图标,主要用到了图层样式.画笔工具.渐变效果.剪贴蒙版.马赛克滤镜.混合模式还有文字工具.最后的icon设计清新活泼,色调多变,非常吸引视线.喜欢这个图标效果的人不妨学习看看,加油. 具体制作步骤如下: Z0 Z0 p% j% | 步骤1' K! I7 K' w2 {7 e2 f' w 打开ps,新建一个600*350像素的文档. 步骤2 双击背景图层,将其转换为普通图层.然后双击图层打开图层样式,设置如下. 银灰色的背景效果

Illustrator设计精美质感图标绘制教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计精美质感图标绘制的教程. 教程分享: 教程中所应用到的软件主要有 Adobe Illustrator CS/Adobe Photoshop/Axialis Icon-workshop   1.打 AdobeIllustrator CS ,选取工具栏上的圆角矩形工具,单击画板任意位置在弹出的窗口中开可以设定圆角曲度.(如果第一次圆角矩形长宽不合适,可以删除,直接拖拽得到合适大小)   2.选中菜单 Effect/3D/Rotate

Photoshop设计电视机主题UI图标制作教程

给各位Photoshop软件的使用者们来详细的解析分享一下设计电视机主题UI图标的制作教程. 教程分享: 首先,我们看看原图,一个400*300的小图.   新建一个1000*800的文档,添加一个渐变调整层,做一个#b4b097到#4e473a的90度的径向渐变,设置缩放为150%,勾选仿色,防止出现色块.   我想大家一定很好奇,我的截图径向渐变中的浅色为何不居中,而是位于中部居上,看我们的GIF演示. 在渐变填充的状态下,我们把鼠标指针放置到屏幕上,出现那个移动工具的图标时,我们拖动,渐变

Illustrator设计漂亮的日历图标制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计漂亮的日历图标的制作教程. 教程分享:   估计是翻译的国外教程,有些语言不准确,大家自我辨识,大概意思能懂就行. 在过去几周,我们已经收到一些电子邮件,从不同的用户在其中,他们要求我们,如果我们能够分享关于图标发展的几个技巧.本教程是我们的答复,这些用户和一个小的贡献,大家有兴趣图标发展. 在本教程中我们将会向您展示如何设置"娇媚"我们最流行 ​​的图标的日历 图标,在开始开发你的图标,您必须先有一个清晰的视野,你的图

photoshop设计iPhoneES手机主题图标制作教程

给各位photoshop软件的使用者们来详细的分享一下设计iPhoneES手机主题图标的制作教程. 教程分享:   STEP01,绘制机身厚度 绘制一个350*350px,圆角为60px的圆角矩形,为其添加一个固有色:"#ba9b7a" 然后再为其添加明暗变化(使用渐变叠加):     将"与图层对齐"选中以后,渐变效果的约束范围就是该形状本身; 其中浅色色块位置为"0%"."15%"."85%".&quo

Illustrator设计简洁的水晶图标按钮制作教程

给各位Illustratror软件的使用者们来详细的解析分享一下设计简洁的水晶图标按钮的制作教程. 教程分享: 1.在Illustrator中做一个浅色直线渐变的正圆,作为图标的底部图形. 2.做两个圆,一大一小,注意选取相近色阶的填充色,进行混合 . 3.做一个白色圆,适当高斯模糊. 4.做一个渐变色的椭圆,作为半透明遮罩,同时选择二者,打开透明度面板的选项设置,建立不透明蒙板,得到半透明的高光部分. 5.绘制出一个三角形,风格化:圆角.再做高光部分,然后与前面的圆角三角形一起放置. 组合放置