今天我们带大家用Fireworks做一个写实作品:手机。主要技术是用明暗光影表现凹凸和质感,细节的表现要非常仔细。
文章末尾提供.png文件供大家下载参考。 制作步骤: 接着对这个机身路径用颜色#C0BFC8进行实心上色,然后使用两次的“内斜角”特效,而且两次特效的设置完全相同。 我们把机身的整个路径复制多一个,并取消这复制出来的路径上的所有特效和填充。随后用“缩放”工具加Alt键的配合进行适当缩小,然后改用“线性渐变”进行填充,颜色由#FCFFF渐变至#BCBABF,羽化值为7。这样一来就使得整个机身有光泽和立体感。如图04。
我们再来画手机的显示屏外围的部分。之所以先画这一部分,是为了给以后的显示屏勾画带来位置上的坐标参考。
接着,用线性渐变对这个新路径进行上色,渐变色由#999999至#F1F1F3,如图06。
这时,我们再来画一个如下图般的对称轮廓,对称路径的画法前面已经讲过,在这就不多赘述了。如图07。
再给这一路径随便取个名子,就叫“W1”吧,然后把该路径再复制一个,取名为“W2”并把“W2”所在对象层的“眼睛”暂时关闭。因为一会我们还要用“W2”这个路径去“切割”另一个对象,所以暂时将“W2”进行保留。
同时选中“图07”中的对称路径和“W1”路径,然后使用“修改—组合路径—切割(打孔)”命令,形成一个新的组合路径,同样对其进行#999999至#F1F1F3线性填充,羽化值为1,如图09。 将该组合路径复制出多一个,使用“缩放”工具配合Alt键的使用,向缩放中心点缩小两个像素,然后用线性渐变进行填充,如图10。
再用钢笔工具画如下图般的对称路径,也用线性渐变加以填充,渐变色由#B7BBC6至#E0E1E6,如图11。
还记得“W2”路径吗!选中它并把它的对像层拉到最上的一层来,然后同时选中“图11”中的对象,并进行“切割(打孔)”命令,又形成一个新的组合路径,所用的填充色在上图中已设置好了,依然是#B7BBC6渐变至#E0E1E6,如图12。
这个时候我们可以来画手机的显示屏了,先勾画一个近似矩形的对称路径,用全黑色进行实心填充,羽化值为1,如图13。
再复制多一个该路径,然后向右和向下分别移动2个和3个像素,改“羽化”为“消除锯齿”,描边色为#A5A5A5,同时修改线性渐变的填充色,如图14。
为了使手机显示屏幕周围有凹入的效果,还要在屏幕周围的上、左、右画多三个凹入的阴影。我们先用钢笔工具勾画出上面的凹入阴影,然后采用线性填充,羽化值为3。
接着再用钢笔工具画出左边的凹入阴影,用#D9D7D8至#AAA6A7进行由上而的线性渐变填充。然后把该凹入阴影的对象复制多一个,进行水平翻转后移到右边的适当位置,用#FFFFFF至#D7D5D6进行由上而的线性渐变填充,羽化值均为1,如图16。
最后,我们再给显示屏幕的内部加多一个投影,使用线性填充,羽化值为3。
手机屏幕内容的绘画比较简单,“NOKIA”和“Menu”的字体均是Square721 BT,大小分别为24和16号。“Menu”的字体多了一个“加粗”。左右两边各表示“信号”和“电量”强度的矩形长条均用“矩形“工具画成,并以全黑色填充。 这一部分画完后,我们继续来画手机的出声孔,这部分也比较容易。用椭圆形工具画一个14*69的椭圆形,然后使其与机身垂直对齐。采用线性填充,羽化为1。
再用“椭圆”工具在这个椭圆上画5个以实心填充的小椭圆,填充色均为#666666,中间的小椭圆可以略画大些,调整好5个椭圆的位置后,调用对齐面板使其与机身垂直对齐,如图20。
接着该来画手机上的按钮了。我们先来画“功能键”。用钢笔工具画一个对称的按钮外形,采用“椭圆形”填充,描边色为#333333,如图。
然后用钢笔工具在“功能键”上画一条略为弯曲的线段,用#5D81B3进行柔化描边,粗细值为2。 接着继续来画“结束键”,直接勾画出这个键的外形,然后用黑色实心填充,如图22。
再把该路径复制出一个,用“缩放”工具加Alt键的配合,向缩放的中心点缩小两个像素,然后改用线性填充。
勾画手机右边的“滚动键”的方法略有不同,先用钢笔工具画出路径后再以黑色实心填充,然后再复制多一个该路径,使用“缩放”工具和Alt键的配合,向缩放中心缩小2个像素,并把该路径改为白色实心填充,羽化值为1。 接着却要把这个白色实心填充的路径复制多一个来,去掉白色实心填充后,改用线性填充,由#FFFFFF至#6B7985进行色彩渐变,并用“细部”工具把这一路径最左边的节点选中,用方向键向左和向下各移动一个像素,如图25。
至此“结束键”和“滚动键”就基本画完了,最后还要用钢笔工具在这两个键上画上图示,描边大小为2,色值为#333333。
再接再厉,我们继续来画“数字键”。大家注意看,“数字键”的外围有轻微凹入斜度,这使得很多初学者认为这里应该先画一个“数字键”,填以颜色后就用“外斜角”的特效。思路是对的,但有时这样做出来的效果却并不理想,因此在这里我们要换一种思路,改用普通画法。 先勾画出数字键“1”的外形,然后用椭圆形填充,以#444444描边。
接着再来画“1”的外斜度,先复制多一个“1”,并用缩放工具配合Alt键的使用以缩放点为中心放大3个像素,然后改为#C5C4C9至#FFFFFF的线性填充,并去掉描边,羽化为1。再用方向键把该对象向左和向上各移动2个像素的位置。
然后调整对像层,使该对象位于数字键“1”的后面。 由于数字键“1”、“4”、“7”和“*”的外形全部一样,所以我们可以先把“1”和“1的外斜度”通过“修改—组合”把这两个对象合成一组,然后把该组合复制出多三个,并调整好各自的相对位置。
而数字键“3”、“6”、“9”和“#”的外形则是数字键“1”水平翻转后的效果,所以我们只需把“1”和“1的外斜度”的组合对象水平翻转过来,然后移到机身右边的相对位置就行了,所要修改的也只是数字键的填充色而已。
剩下的数字键就只有“2”、“5”、“8”和“0”了,而这4个数字健的外形又都是一样的,所以我们只需先画出“2的外斜度”和“2”然后把这两个对象进行组合后,再复制出其它的数字键即可。 画出数字键“2的外斜度”后使用#B9B8BD至#F1F0F5由上而下的线性渐变,如图31。
再画出数字键“2”的外形后使用椭圆形渐变,如图32。
把其余的“数字键”复制出来后进行对齐排列,完成后如下图。
数字键虽然画好了,可上面还没有文字啊。所以我们还要把“0至9”以及“*”和“#”这些数字和字符打出来,字体我用的是AvantGarde Md BT,使用加粗,大小为13,用全黑色加以填充,并选中“平滑消除锯齿”。设置完后右键点击将这些文本文字,从弹出菜单中选择“转换为路径”,如图。而那个“*”号本来就比较小,所以还要用“缩放”工具加以放大才行。
由于这些字符都转成路径了,所以我们在选择个别数字的时候就要先用“细部”工具进行点选,然后再用“指针”工具将其移动到手机的“数字健”上面,然后进行相应的位置调整和对齐,完成后如下图。
最后别忘了还要在机身上面画上“NOKIA”的字样,用“矩形”工具画一个62*13大小的黑色实心矩形,并使其与机身对齐,然后在上面打上“NOKIA”几个字母,字体为Square721 BT,14号大小,使用“加粗”和“强力消除锯齿”。
至此,整部手机的绘画全部完工。你也可以依自己的喜好给手机加上背景,手机屏幕的内容也可以换成你喜欢的图案等等。最终效果如下图。 .png源文件下载 |
Fireworks写实绘制:我的手机
时间: 2024-09-19 04:54:08
Fireworks写实绘制:我的手机的相关文章
使用Fireworks MX 绘制手机
大家都知道Mecormedia Fireworks MX是制作网站图片的利器,其实Fireworks MX功能远不至这些,我们可以利用其强大的矢量绘图功能绘制很多逼真的图形,甚至还可以进行软件内界面的设计以及一些平面设计工作,今天我们就来学习怎样深度挖掘Fireworks MX的这些功能. 现在不少朋友应该都有手机吧?我们来学习绘制自己的手机,由于手机造型千变万化,因此笔者以自己使用的是松下GD90型号手机为例进行绘制,你应该主要掌握绘制方法而不必拘泥于某些小节(如颜色),在掌握方法后你可以根据
Photoshop鼠绘教程:绘制质感HTC手机图标
本教程主要使用Photoshop绘制质感HTC手机图标教程,这份icon也是基于iphone框架做的,喜欢的朋友可以一起来学习吧. 先看看效果图 效果如下: 如惯例用圆角矩形工具画出长宽为512px,R值为92px的标准iphone图标框架 添加图层样式:内阴影.渐变叠加 [1] [2] [3] [4] 下一页
在Fireworks中绘制QQ聊天表情 [1]
前段时间,为大家讲解了如何在Fireworks中绘制QQ皮肤的教程实例,相信大家已有所收获.这次我们再利用Fireworks中自带的GIF动画制作功能,为大家讲解动态QQ表情的制作.从而也将个性化的QQ进行到底! 在我们日常生活当中,人的表情都被包含在"喜怒哀乐"当中.但在网上的QQ聊天当中,可用的表情动作却是丰富多彩,特别是动态表情的出现,更能将某种情绪的表现生动而有趣地展现出来,这种表现力有时比文字的表达还要入木三分.由于QQ本身自带的聊天表情有限,因此,不少朋友都乐于从其
Fireworks简单绘制逼真安全帽
Fireworks简单绘制矢量碳纤维安全帽图标,您可以来试试. Fireworks教程--碳纤维风格图标
用Fireworks来绘制一个金属锁的精致图标
本文中我们用Fireworks来绘制一个金属锁的精致图标,大家看看是不是很逼真呢? 先上效果图: 开始了,先把基本形状画出来 1.画一个圆角矩形,调节节点使弧度合适,克隆它,缩放合适的比例 ,移动,修改-组合路径-打孔,然后继续用矩形打孔掉下面的多余部分.再画个圆角矩形,调整节点,作为锁身. 2.锁头高光的制作:下面的图示是放大2倍的效果,对锁头,修改-改变路径-伸缩路径,(内部,宽度:8,角度:第二个,尖角:1),然后调节节点至最右边的形状.羽化,降低不透明度. 克隆几个刚得到的这个图形,做条
Fireworks轻松绘制简单漂亮的立体Logo
本文中我们跟随作者用Fireworks来绘制一个造型简单同时又美观大方的立体Logo.
如何在Fireworks中绘制指南针?
本文讲解了如何在Fireworks中绘制指南针 .主要包括5个部分,首先,设置画布大小用椭圆工具进行绘制,其次填充颜色,最后描绘图案.下面是如何在Fireworks中绘制指南针的具体操作方法: 完成效果如下: (图01) 首先,设置画布大小为128x128像素,底色为白色.(图01) 用椭圆工具画一个90x90的正圆形,并水平.垂直对齐于画布;(图02) (图02) 改变填充类别为线性渐变,增加并调整渐变颜色;(图03) (图03) 在这个圆的上面画一个70x70的正圆形,改变填充类别为线性渐变
Fireworks轻松绘制Vista质感LOGO
本文中我们用Fireworks轻松绘制Vista质感LOGO,方法简单,效果很精细. 完成效果: 结构图: 源文件: 其实这个按钮还是很简单的,唯一有点没方向的应该是内部那些纹理,这个我写一下吧. 1.按住Ctrl画一个正圆: 2.菜单-修改-改变路径-扩展笔触 3.如下图,然后设置不用描边,填充白线形色,100%-30% 4.平面化后,属性选择"添加的" 5.复制若干个,随意组成下面的形状.组合 6.滤镜-模糊-放射模糊-数量30左右,品质60以上 7.画一个等大小的圆填充百色,
Fireworks 图标绘制解析
fireworks 图标绘制解析第一期-教你如何绘制卡通造型图标. 特别附送Spacebear2013壁纸6张,同时提供PNG源文件供大家学习使用.