收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 20585|回复: 30

[作品展示] 第六次发作品:FW绘制moto v3教程(上)

[复制链接]
发表于 2007-6-18 00:59:57 | 显示全部楼层 |阅读模式
一 案例欣赏
经历了Q版电视机的绘制--你知道“内侧阴影”的重要: http://hi.baidu.com/yc1021/blog/ ... 2f073c70cf6ce4.html
经历了可爱水杯的绘制--你知道了“钢笔和矢量绘图工具”的威力:http://hi.baidu.com/yc1021/blog/ ... 8f6550f819b88a.html
今天,我们来个飞越,结合前两次的学习,挑战MOTO v3
MOTO v3系列是一款性价比较强的手机,外观不错,价格便宜。如果你现在需要购买一台手机送给你的女友或男友,选它不会错滴。人气美剧“越狱”中它的上镜率比很多演员还要高哟!广告到此,我们进入剧集!效果如图1.1所示。

image001.png

图 1.1 moto v3手机效果图

二 思路分析
仔细观察手机,我们可以将它分为两个大部分来处理:上部和下部(也就是机身和机盖)。注意机身的对称性和正确比例,要不然盖子就盖不上去了。因为要做到尽可能的真实,所以要做仔细的观察,长宽高,和每一个局部的位置。

三 实现步骤
1、新建一个Fireworks文件,画布大一点,800X600像素以上,方便我们制作和修改细节。

2、使用矢量的矩形工具和钢笔工具来绘制机盖外形。
利用钢笔工具 image079.png 加点,和部分选取工具 image081.png 来调整机盖外形,有问题请先学习上面两个教程!
image077.png
image003.png

(线性填充机盖颜色)
image005.png

滤镜来实现机盖体积感,设置如下:
(内侧阴影1)
image007.png
(内侧阴影2)
image009.png
(内侧阴影3)
image011.png
上次有个朋友回复不知道滤镜的位置,请看下图,后面我就不再多做解释。这样的分支剧情不会出现了!:P
image075.png

3、接着我们来绘制机盖的高光,复制一个机盖,缩小一点,去掉滤镜效果,利用线性填充制做机盖高光。
image013.png
(线性填充,注意只在顶部有一些高光,其它透明,你也可以用钢笔勾,不过个人觉的复制来的快点!)
image015.png

4、我们开始为显示屏做底部,再次复制一个机盖,去掉滤镜效果,缩小一点,利用线性填充制做机盖显示屏底部。
image017.png
(线性填充)
image019.png

5、接着我们开始为显示屏轮廓做造形,再次复制一个机盖,缩小一点,再在顶部绘制一个小圆,使用修改-组合路径-打孔来做机盖显示屏轮廓。)
image021.png
修改-组合路径-打孔
image023.png
(实心填充)
image025.png
(滤镜:内侧阴影,使它凹进去一点点)
image027.png


6、接着开始做显示屏金属光面,复制一个显示屏轮廓,缩小一点点,线性填充显示屏金属光面。
image029.png
(线性填充)(不要被我下面吓到,这里可以随便点,像就可以了)
image031.png

7、接着制做机盖显示屏黑边,使用矢量的矩形工具来绘制机盖屏幕黑边,填充黑色,给一点圆角。(一会用显示屏盖上它,就只有边了:P)
image041.png

8、开始制做显示屏,复制一个显示屏黑边,缩小一点点,来做显示屏。
image043.png
(线性填充)
image045.png
(内侧阴影, 使它凹进去一点点)
image047.png

9、接下来,制做机盖上的垫脚,使用矢量的椭圆工具来机盖上有垫脚。先绘制一个圆做底,在复制两个圆缩小做高光和反光!
image049.png
image051.png
(放射状填充)
image053.png
(高光线性填充,) X2
image115.png
透明度50左右
image085.png

10、现在开始给它一个身份了,MOTO v3 的logo部分,使用椭圆工具和矩形工具来绘制logo部分。

Step 1 底部背景
image070.png
1个椭圆1个矩形使用修改-组合路径-联合
image065.png
(线性填充)
image053.png

Step 2
复制一个logo背景缩小,实心填充黑色,做深度
image073.png


Step 3
复制一个logo背景缩小,线性填充做logo金属底
image055.png
(线性填充)
image058.png

Step 4制作logo
两个三角形联合在减去两个椭圆的联合(以实物为准)
image060.png

11、接着制做机盖的两侧,使用矢量的钢笔工具来绘制机盖两侧的形状,1个就可以了,另一个可以,变形---水平翻转。
image036.png
(线性填充)
image034.png
(滤镜制作体积:内侧阴影1)
image037.png
(内侧阴影2)
image039.png

12、开始制做听筒部分,利用矩形工具+圆角+部分选择工具来绘制听筒部分。
image033.png
image063.png

矩形工具+圆角+部分选择工具,做一边的,另一边的组合以后水平翻转就可以了!
image067.png
(内侧阴影1)
image141.png
(内侧阴影2)
image143.png

13、加上MOTO的商标全称(MOTOROLA)。
image091.png

字体设置
image093.png

13、下面来制作机盖硬件上的最后一部分,使用钢笔工具来绘制机盖两侧的金属按钮。
image095.png

image097.png
(线性填充)
image099.png

image101.png
(线性填充)
image103.png

image105.png
(线性填充)
image107.png

image109.png
(把上面一个水平翻转)

14、最后我们来把机盖上的亮部处理一下。


侧面的高光用钢笔勾画
image111.png
image113.png

(线性填充)
image115.png



反光金属面高光
image123.png

(线性填充)


显示屏高光
image131.png

(线性填充)


整体的亮部可以复制机盖层来完成
image117.png
image119.png
(线性填充)


15、到这里我们就完成了机盖的硬件部分。
image133.png

16、下面我们可以进行界面UI制作,我就不细谈了,总结一下个人的方法!
image135.png
文字我不多说了,下面图标除了电话用了钢笔工具以外,其它全用工具栏中的修改-组合路径的命令来完成的,自己拼一下就出来了!因为都比较小,不用做的很真实,略有点体积就可以了,方法用内侧阴影,我不至一次的提到它了,请引起重视!
image137.png

四 操作技巧
经历了Q版电视机的绘制--你知道“内侧阴影”的重要,经历了可爱水杯的绘制--你知道了“钢笔和矢量绘图工具”的威力!今天我希望大家可以理解组合路径的重要!用熟了,能举一反三了,你又无敌了一次:P,时间原因,先完成上部分,大家可以练习一下,自己尝试一下下部分,有空我在把下部分做了,我们来了解一下羽化!

今天的重点:组合路径(有空多练练)呵呵!
image127.png

蓝色,froglt对你们的承诺完成一半了!
不早了,睡了,明天还有课!在线的晚安!

[[i] 本帖最后由 yuchang 于 2007-6-18 01:55 编辑 ]

评分

参与人数 1威望 +3 收起 理由
froglt + 3 精品文章希望lz再接再厉

查看全部评分

发表于 2007-6-18 01:32:17 | 显示全部楼层
占个沙发,支持下楼主,辛苦啦!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-6-18 01:47:25 | 显示全部楼层
你真快呀,我还没写完你就回上了,赞一个!本来想自己座的!
回复 支持 反对

使用道具 举报

发表于 2007-6-18 12:53:35 | 显示全部楼层
支持一下!!
回复 支持 反对

使用道具 举报

发表于 2007-6-18 13:06:13 | 显示全部楼层
跟真的一样啊。。
回复 支持 反对

使用道具 举报

发表于 2007-6-18 13:49:44 | 显示全部楼层
弱弱的问下 我转走可以不。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-6-18 14:52:02 | 显示全部楼层
可以的,表明作者,来源蓝色理想就可以了~呵呵~
回复 支持 反对

使用道具 举报

发表于 2007-6-26 09:36:28 | 显示全部楼层
我晕  大哥   我还以为是做 手机主题哇  进来一看 做手机。。。。
回复 支持 反对

使用道具 举报

发表于 2007-6-26 10:07:45 | 显示全部楼层
真不错。
回复 支持 反对

使用道具 举报

发表于 2007-6-27 12:17:53 | 显示全部楼层
高手!
PFPF
回复 支持 反对

使用道具 举报

发表于 2007-6-27 14:56:54 | 显示全部楼层
真厉害!:)
回复 支持 反对

使用道具 举报

发表于 2007-6-29 22:58:50 | 显示全部楼层
下面很真实,上面有点假,总体不错了,顶你个
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-7-1 12:55:12 | 显示全部楼层
原帖由 [i]jazzbarbie 于 2007-6-29 22:58 发表
下面很真实,上面有点假,总体不错了,顶你个


我到觉的上面比较好点,下面有些问题!呵呵~~
回复 支持 反对

使用道具 举报

发表于 2007-7-1 15:47:57 | 显示全部楼层

郁老师好强!

看到老师的v3可见你的FIREWORK超强悍,已经比我走了好远。

我也需要好好努力了,

现在对论坛里的FIREWORK专栏很感兴趣。

希望老师多出这样的经典教程!!我会一直继续关注!
回复 支持 反对

使用道具 举报

发表于 2007-7-2 15:37:11 | 显示全部楼层
塑料外形质感还不错,金属面板的质感就有点假了,呵呵,偷懒了吧,加油,总得来说还不错
回复 支持 反对

使用道具 举报

发表于 2007-7-2 18:55:16 | 显示全部楼层
顶顶顶

好东西.....
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-7-7 09:29:08 | 显示全部楼层
希望楼主发完

[[i] 本帖最后由 yuchang 于 2007-7-8 17:38 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-7-7 10:26:16 | 显示全部楼层
小昌,不错啊,呵呵~~~~,什么也给我们做个精华培训啊
回复 支持 反对

使用道具 举报

发表于 2007-7-8 13:28:16 | 显示全部楼层
牛人!我是菜鸟,即使照着做,我还是做不出来.
回复 支持 反对

使用道具 举报

发表于 2007-7-13 15:04:39 | 显示全部楼层
顶一个,很不错
回复 支持 反对

使用道具 举报

发表于 2007-7-13 15:08:55 | 显示全部楼层
路过,赞一个
回复 支持 反对

使用道具 举报

发表于 2007-7-13 22:22:33 | 显示全部楼层
呵呵,支持,希望lz能够发更多更好的教程
回复 支持 反对

使用道具 举报

发表于 2007-7-14 14:00:56 | 显示全部楼层
不太真实啊
回复 支持 反对

使用道具 举报

发表于 2008-1-4 21:37:01 | 显示全部楼层
不错,辛苦了。fw其实有很多插件的。用插件的效果要好些
回复 支持 反对

使用道具 举报

发表于 2008-1-5 01:44:49 | 显示全部楼层
厉害的较色,V3也是我非常中意的机型。
回复 支持 反对

使用道具 举报

发表于 2008-12-4 09:23:47 | 显示全部楼层
相当的不错。
收下了。
没想到fw功能这么强大,一直以来忽视了。
回复 支持 反对

使用道具 举报

发表于 2008-12-4 15:44:04 | 显示全部楼层
   不错,画东西最需要耐心了.
回复 支持 反对

使用道具 举报

发表于 2008-12-7 23:27:18 | 显示全部楼层
只要有耐心   总会成功的
回复 支持 反对

使用道具 举报

发表于 2008-12-26 17:47:14 | 显示全部楼层
不错,回家我也做一个,哈哈,
回复 支持 反对

使用道具 举报

发表于 2008-12-31 13:24:48 | 显示全部楼层

顶上去。。。。我也要做。。。。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-8-14 00:28 , Processed in 0.156829 second(s), 14 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表