首页  韩国资源  酷站加油  我的展厅  设计名站  古典元素  推荐下载  设计欣赏  每周专访  招募精英  人才专区  网页教程  平面设计  编程开发  设计竞赛
当前位置:首页 > 网页教程 > Fireworks教程 > 正文
Google
Fireworks 绘制时尚手机
来源:蓝色理想 2006年05月27日 15:59 网友评论:0条 点击:

    这是一款较早前出产的一部时尚手机,但不知道为什么使用的人却比较少,但其酷炫的外观至今仍使我爱不释手。终于忍不住要用Fireworks也来画一个。

    新建一个550*350大小的画布。我们先来画机身,用“椭圆形”工具画两个直径分别为178、143的圆和一个143*169的矩形,如图01般进行排列。

按此在新窗口浏览图片

图01

    再用“细部”工具点击直径为143像素的小圆,点选小圆底部的路径节点,然后用方向键将该节点向上移动10个像素,如图。

按此在新窗口浏览图片

图02

    然后选中所有对像,用菜单栏上的“修改—组合路径—联合”命令,把三个对象合成一个新路径。再用“钢笔”工具和“细部”工具为路径进行修整,使其变得更圆滑。如图。

按此在新窗口浏览图片

图03

    接着对该对象使用“条状”填充及“内斜角”特效,如图04、图05。

按此在新窗口浏览图片

图04

按此在新窗口浏览图片

图05

    将该对象复制多一个,适当缩小后与原对象进行底部对齐,如图。

按此在新窗口浏览图片

图06

    然后将该对象的羽化值设为1,选用9%的“木纹”纹理,并修改“内斜角”特效的相关数值,如图。

按此在新窗口浏览图片

图07

    接着我们来画手机显示屏内围及外围的金属框轮廓。用“椭圆形”工具在机身上画两个直径分别为141和122像素大小的圆,并用“细部”工具将两圆底部节点按方向键向上移动5个像素,用同样的方法再把和大圆左侧的节点向左移动5个像素。把两圆对齐后,使用“修改—组合路径—打孔”命令,形成一个新的组合路径。设置羽化值为1,描边色为#D7DAE9。如图08。

按此在新窗口浏览图片

图08

    再用“椭圆形”工具在机身上画一个直径为174像素的圆,以黑色实心填充,并用“细部”工具点选该圆下部的节点,用方向键向上移动5个像素。然后在该圆内再画一个直径为144像素的小圆,使其与大圆对齐后也用“细部”工具将其底部的节点向上移7个像素。完成后同时选中这两个对象,使用“打孔”命令,效果如图。

 按此在新窗口浏览图片

图09

    接下来就要为这内外两个金属框画上反光效果了。我们先来画外围的金属反光效果。用“钢笔”工具勾画出如下图般的路径,必要时要用“细部”工具对路径的节点进行调整,然后设置羽化值为1,色彩填充如下图。

 按此在新窗口浏览图片

图10

    继续画出右侧的反光效果。同样先用“钢笔”工具先勾画出路径,然后采用“椭圆形”填充,色彩的过渡由#C6CBE1(左边的色彩滑块)至#FFFFFF,羽化值为3,效果如图。

 按此在新窗口浏览图片

图11

    用“钢笔”工具画出金属外围下面的反光轮廓,改用“线性”填充,过渡过色由#FFFFFF至#414254,羽化为1,效果如图。

 按此在新窗口浏览图片

图12

    这样,金属外围的反光效果就算画好了!我们接着来画内侧的的反光效果。先用“钢笔”画出如下图般的外形,然后设置羽化值为1,色彩填充如下图。

 按此在新窗口浏览图片

图13

    再继续勾画出另一侧的反光效果,使用“条状”填充,过渡过色由# 414254至# EBEBED,羽化为1,效果如图。

 按此在新窗口浏览图片

图14

    再把最后一个反光区给画出来,以“条状”填充,过渡色由# 0C0C0E至# DBE0E4,消除锯齿,效果如图。

 按此在新窗口浏览图片

图15

    略作休息后,我们接着来画手机的显示器屏。用“椭圆形”工具画一个直径124像素的圆,然后用“细部”工具将该圆下面的节点,用方向键向上移动6个像素。以“线性”填充,色彩过渡由# 000000至# 726F8C,用全黑色进行“1像素柔化”描边,羽化为1,效果如图。

 按此在新窗口浏览图片

图16

    再勾画出屏幕的反光轮廓,然后选用“线性”填充,并消除锯齿,效果如图。

 按此在新窗口浏览图片

图17

    手机屏幕画好后还要在该金属外围画上三个按钮。用“钢笔”工具先画出中间一个按钮的外形,以黑色实心填充,然后使用“凹入浮雕”特效。如图。

 按此在新窗口浏览图片

图18

    将该按钮外形再复制多两个出来,并适当的调整好角度及相对位置。

按此在新窗口浏览图片

图19

    为了给这三个按钮加上立体感,我们先将这三个按钮外形在原位置上依次复制后,用“缩放”工具挨个进行适当的缩小,然后用线性渐变由黑至白进行填充。效果如下图。

按此在新窗口浏览图片

图20

    这样,手机上半部分就差不多画好了,我们继续把接收天线给画上。先画一个近似矩形的天线下部轮廓,高度较为随意,宽为30个像素。采用“线性”填充,如图。

按此在新窗口浏览图片

图21

    完成后通过对象层的调整将该对象放在层的最下面。然后我们来画天线的上半部分。同样是在画出轮廓后采用线性渐变。增加“亮度/对比度”特效,设置对比度为29,再添加一个“色相/饱和度”特效,只将饱和度设置为 —35 即可。效果如下。

按此在新窗口浏览图片

图22

    完成后把该对象层放到最后一层。然后在天线上面再画两条路径,描边色为# 797786,并添加一个“内斜角”的特效,如图。

按此在新窗口浏览图片

图23

    完成手机的上半部分后,在机身中段还要为手机的屏幕加个投影,以增加立体感。该路径采用“线性”填充,色彩过渡由# D5D7E0至# A3A7BC,羽化为13。

按此在新窗口浏览图片

图24

        在机身上还有两个按钮。我们先画两个直径都为18像素的圆和一个14*21的矩形,如图。

按此在新窗口浏览图片

图25

    使用“修改—组合路径—联合”命令把这三个对象组合成一个组合路径,以黑色实心填充,然后对该路径使用“凹入浮雕”特效,如图。

按此在新窗口浏览图片

图26

    画两个16*16大小的圆形,均采用“线性”填充,色彩过渡为#FFFFFF至#CCCCCC,羽化值为1。

按此在新窗口浏览图片

图27

    为了给这两个按钮添加金属的反光效果,我们再对这两个按钮做一些修整。在两个按钮上面分别画上两个全黑的“实心”填充路径即可,如图。

按此在新窗口浏览图片

图28

    再来给手机画上听筒。用“椭圆形”工具画一个直径为125像素的圆,然后使其与机身进行底部垂直对齐,然后又将该圆向上移动1个像素。使用“细部”工具点选该圆上面的路径节点,用方向键使其向下移动13个像素,再点选该圆左右两个节点,使其向下移动7个像素。然后用“波纹”填充,过渡色由#BABBCB至#8A8FAA,羽化为6,选用5%的“木纹”纹理。接着还要用到“进一步锐化”特效,效果如图。

按此在新窗口浏览图片

图29

    为了给凸出的听筒再增加些立体感,还要再画出高光部分。同样用“椭圆形”工具画出圆形后,用“细部”工具进行适当的路径节点调整,然后用“波纹”填充,渐变色由全白色至全白色,但要把右边的透明度滑块的“不透明度”设置为75,然后设置羽化值为20,选用5%的“木纹”纹理,效果如图。

按此在新窗口浏览图片

图30

    没有孔的听筒怎么行呢,所以我们还要再画三个出声孔。用“自动形状”工具中的“圆角矩形”工具画一个7*24大小的圆角矩形,以#69677F进行“实心”填充,和用#666874进行1像素的柔化描边。然后加入“凹入浮雕”和“内侧阴影”两个特效,如图。

按此在新窗口浏览图片

图31

    将该圆角矩形复制多两个,一个则平移到与其相对称的右边,另一个则放在中间,但位置还要向下再移动9个像素。对于放在中间的这个圆角矩形,将其填充色改为#A6A9BC即可,效果如图。

按此在新窗口浏览图片

图32

    最后,还要在中间的圆角矩形里画一个小圆孔,填充色为#525772,使用“凹入浮雕”特效,如图。

按此在新窗口浏览图片

图33

    至此,整部手机的绘制就算大功告成了,屏幕上的文字你可以自由添加,最终效果图如下。

按此在新窗口浏览图片

上一篇:Fireworks 制作扇子展开动画   下一篇:GIF动画制作:蝴蝶翻飞巧写书法字
收藏此页】【打印】【关闭
 相关文章  我要点评

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 在线反馈 | 广告报价 | 友情链接 | 联系我们 | 免责声明 | 在线投稿 | 网站地图
Copyright © 2003-2007 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】