FLASH CS3 打造一个小奶瓶图标

   在下面的教程里,我们将从基本形状开始,完全使用FLASH画一个小奶瓶的图标。


  首先我们从一个圆角的矩形开始,把它的底部调节成圆形。


  再把顶部调成突起的形状,如果你熟悉贝塞尔曲线,这不是什么难事。然后我们用形状扩展,外扩出一个粗边来,这将是瓶壁。


  画瓶盖的圆柱其实很简单,先画一个椭圆,然后垂直复制一份。切去下半个的上半部分。


  将上面的边拉伸出来,形成圆柱的壁,然后移到下层,这样很快是不是?


  下面的一个小圆柱也采用同样的方法。


  这时我发现下面的瓶身需要一个瓶颈,于是先将其切去一块,再把切出的节点移动上来。因为画了两层,所以两层都要调整,如果一开始注意到,会好很多。


  形状画成了,下面是奶嘴,让我们再从一个矩形开始。加出需要的节点,再调整曲线。


  形状差不多了,如果你是对照照片来画的,可能会更像一点。然后,同样用形状扩展加一层边,因为橡胶奶嘴同样有厚度。


  图15


  图16

  下面是颜色了,玻璃瓶我习惯用这样的圆形渐变。圆柱形用加上高光的线形渐变就可以了。


  图17


  图18

  FLASH并没有太复杂的渐变方式,但如果灵活运用,同样可以做出复杂的效果,而且毕竟我们也不是要仿真到完全一致,要做照片效果完全可以用3D。注意下面我把圆柱的顶复制一份,变成浅色,再向下移动一两个像素,然后移到下层,这样就形成了一个倒角的效果,有时细节是很重要的。


  图19


  图20

  接下来是瓶身的渐变,用白色的线形渐变即可。


  图21


  图22

  注意玻璃瓶是两面都有高光的,否则没有那种通透感。然后高光的形状要沿着瓶身的形状变化。


  图23


  图24

  奶嘴也是同样的情况,但因为是橡胶的,所以不要像瓶身上那样规则,稍有点变化反而更好。


  图25


  图26

  然后调一下色彩,把瓶盖加一道高光,这样质感更强烈一点。一个基本的奶瓶就画好了。


  图27


  图28

  有一种瓶身是孤形的奶瓶似乎更好看一点,于是我们把形状和高光再调整一下。然后旋转45度,将瓶身的内层复制一层到顶端来。


  图29


  图30

  切去新形状的上半部,将颜色改成浅蓝到白色的渐变,牛奶一般都是用这种色来表现的。


  图31


  图32

  再复制一层变成深蓝色,两层调成相对的波浪形状。深蓝色的移到下层。牛奶就画好了。


  图33


  图34

  把我们画好的奶瓶整体复制一下,Ctrl+B打散,把瓶子中心的部分去掉,生成Movieclip,再加一个模糊滤镜,这样影子就做好了。你当然可以使用阴影或到PS中修改,我这样做是为了瓶身的透明。


  图35


  图36

  至此,一个小奶瓶就做好了。这里有一个经过进一步调整后的奶瓶,具体的方式和细节就看你自己的发挥了。


  图37


  图38

  你可以通过Axialis IconWorkshop之类的软件生成图标,也可以做任意其它用途。我喜欢用FLASH做图标的原因就在于它是全矢量的,而且可以直接用在FLASH程序中,体积非常小,这个奶瓶生成的整个SWF文件只有1744Byte。

时间: 2024-10-04 16:03:12

FLASH CS3 打造一个小奶瓶图标的相关文章

Illustrator设计一个小台灯图标绘制教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计一个小台灯图标的绘制教程. 教程分享: 1.在Ai软件中,新建一个800*800的文档,选择矩形工具,画两个矩形图形,并填充颜色,如图所示   2.然后选择直接选择工具,把矩形的锚点移动一下,如图所示   3.接着选择椭圆工具,按住shift画两个正圆图形,并填充颜色,如图所示     4.接下来选择矩形工具,画3个矩形图形,并填充颜色,再选择椭圆工具,按住shift画两个正圆图形,并填充颜色,如图所示     5.最后选择钢笔工

如何打造一个小而精的电商网站架构?

本文大纲: 1. 小型电商网站的架构 2. 日志与监控系统的解决方案 3. 构建数据库的主从架构 4. 基于共享存储的图片服务器架构 5. 移动M站建设 6. 系统容量预估 7. 缓存系统      一.小型电商网站的架构     刚从传统软件行业进入到电商企业时,觉得电商网站没有什么技术含量,也没有什么门槛,都是一些现有的东西堆积木似的堆出来罢了.然而,真正进入到这个行业之后,才发现并非如此.有人说过,好的架构,是演化出来的,电商网站的架构也是如此.现在好的电商网站,看似很复杂,很牛逼,其实也

电商总结(八)如何打造一个小而精的电商网站架构

前面写过一些电商网站相关的文章,这几天有时间,就把之前写得网站架构相关的文章,总结整理一下.把以前的一些内容就连贯起来,这样也能系统的知道,一个最小的电商平台是怎么一步步搭建起来的.对以前的文章感兴趣的朋友可以看这个,http://www.cnblogs.com/zhangweizhong/category/879056.html   本文大纲: 1. 小型电商网站的架构 2. 日志与监控系统的解决方案 3. 构建数据库的主从架构 4. 基于共享存储的图片服务器架构 5. 移动M站建设 6. 系

PS教你打造一个雪地冰晶图标

最终效果 首先,新建一个1000*1000px 的画布,把背景素材放进去. 素材的雪地不适合我们这次的效果,所以需要自己画一个雪地. 先画一个白色的矩形,与画布底对齐.但是正常的雪地边缘不会是一条直线,应该有点细微的弧度,所以先用直接选择工具(快捷键A)选择矩形的路径,然后添加两个锚点,稍微拉一点弧度出来. 这一步也可以直接用钢笔勾. 然后给刚刚勾的形状添加图层样式. 背景算是做好了,然后开始撸图标. 先新建一个512*512,圆角为90px的圆角矩形,与画布水平.垂直居中,然后将雪人素材拖进去

手把手教你打造一个纯CSS图标库

来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉的团伙了?) 主题说完了,下面进入正题. 在web开发中,我们经常要用到一些小图标(加减勾叉等).通常做法就两种: 直接使用图片; 使用css/svg直接在浏览器中绘制图标. 方案1:由于图标图片比较多,而且体积很小,为了减少请求所以很多时候我们会用雪碧图这种技术来将图标拼凑在同一张图片里面.你也能想到,一堆图标的雪碧图,修改维护会相当麻

Flash CS3打造光圈动画效果

  在flash中通常有几种方法创建相同的动画和效果.不管是在时间轴上做的动画还是用actionScript动态生成的,它都允许用户在舒适的环境中工作.一个简单的光圈变换是能用几种不同的方法来制作.我个人不知道这种动画代码从哪儿开始,但是给我一个时间轴和一些关键帧,我将进入我的工作环境. 1.第一步用椭园工具创建一个圆形.任一填充色,绘制时按住shift键使它成正圆.不要将这个形状转换为元件,相反地将这一层转换为遮罩层. 图1 2.在第1帧将圆缩到最小.用ctrl+alt+s打开缩放与旋转面板,

Flash CS3打造光圈变换效果

在flash中通常有几种方法创建相同的动画和效果.不管是在时间轴上做的动画还是用actionScript动态生成的,它都允许用户在舒适的环境中工作.一个简单的光圈变换是能用几种不同的方法来制作.我个人不知道这种动画代码从哪儿开始,但是给我一个时间轴和一些关键帧,我将进入我的工作环境. 1.第一步用椭园工具创建一个圆形.任一填充色,绘制时按住shift键使它成正圆.不要将这个形状转换为元件,相反地将这一层转换为遮罩层. 图1 2.在第1帧将圆缩到最小.用ctrl+alt+s打开缩放与旋转面板,输入

Flash cs3仿真艺术设计5.11:导入PSD文件

5.11 PSD导入(JIB JAB) 在Flash cs3中一个非常酷的特色是导入 PSD.你现在已经有能力直接将PSD导入flash中了.这是一个巨大的工作改进,是 一个伟大的特色,它将Photoshop与Flash连在了一起. 1.这是Photoshop文件看到的层.也许许多图片有透明的背景.透明是在导入 时需保持的许多特征之一. 2.在Flash中,去文件>导入,导航到你的PSD文件.PSD导入向导将 自动打开.,还有一个方便的每层预览小窗口,你可以选择或删除某个来导入. 其它的选择包含

Flash CS3制作卡片翻转效果

在Flash讨论中一个流行的卡通效果:怎样让一个平面卡片按360度角旋转或翻转.要明白这个动画的方法是困难的.这不难想象, Flash从来就是两维的程序,而要添加一个三维的实例是不可能的,除非那个对象是在时间轴上重新手工绘制的.但是使用Flash,在所有的方法中,它不能真正的实现三维.下面来看看如何制作卡片翻转效果的. 示意图 1.首先画一个没有笔触的矩形,在第10帧插入关键帧.选择自由变形工具(q)然后选择扭曲子工具. 图1 2.按住Shift键,将顶部的角拉离形状.继续按住Shift键将底部