您好,欢迎来到素彩网!

写实:Fireworks中显示器的绘制

来源:sc115.com | 270 次浏览 | 2011-06-29

标签: 写实 Fireworks中显示器的绘制

一、显示器的外观

新建一个800*600大小的画布,然后用“矩形”工具直接画一个446*384、圆角度为3的圆角矩形。而千万不要画个小矩形后再拉大到所需的大小,否则圆角度将不规则。然后由左#D4D4D4至右#BEBEBE进行线性渐变的填充。并为其添加一个 “内斜角”的特效,如图01。


图01


用“椭圆形”工具画一个446*25的椭圆形,然后将这两个对象进行水平对齐后,把椭圆形的水平中线与矩形的底线进行重合对齐。如图02。


图02


把这两个对象同时选中后使用“修改—组合路径—联合”命令,使其形成一个显示器的外观路径。

二、绘制显示屏

为了使这个显示器更加的逼真,我们不妨先回到电脑桌面,然后按下PrintScreenSysRq键,把你当前所用的电脑桌面截取下来,在Firework里按下“粘贴”按钮进行保存。然后把这个桌面的大小改为363*272。接着把桌面和显示器的外观路径进行垂直对齐,并使显示器的外观顶线高出桌面顶线47个像素。如图03。


图03


显示器的桌面被确定下来后,也就等于将显示器的显示屏位置也确立了下来。这为接下来绘制显示器的边框带来坐标上的定位。

三、显示器边框

用“矩形”工具画一个405*6大小的长条矩形,从#CCCCCC至#E6E6E6进行由上而下的线性填充。使其与显示器外观进行垂直对齐后紧靠在显示屏上端,如图04。


图04


用类似的方法,再绘制一个405*9的长条矩形,然后从#FFFFFF至#C7C7C7进行由上而下的线性填充。接着使其与显示器外观进行垂直对齐后紧靠在显示屏下端,如图05。


图05


我们再来绘制显示器的左边框。先用“矩形”工具画一条28*286的长条矩形,然后从# D3D3D3至# FFFFFF由左向右进行线性填充。接着用“部分选择”工具将这一矩形右上角边路径节点选中后,用方向键使其向下移动6个像素。同样的,也把右下角的路径节点向上移动9个像素。然后使这个左边框在紧挨着显示屏左边缘的情况下,还要和上、下边框进行对齐。如图06。


图06


右边框的绘制也大至相同。先画一个28*286的长条矩形后,从# BFBFBF至# FFFFFF由左向右进行线性填充。然后用“部分选择”工具将这一矩形左上角和右下角的两个节点分别向下移动6个和9个像素。然后也要紧靠着显示屏右边缘的情况下进行对齐。如图07。


图07


完成上面的所有操作后,我们把所有对象全部选中,然后使用“修改—组合”命令。

四、显示器托架

接下来我们来画显示器的上托架。先用“椭圆形”工具画一个201*121大小的椭圆形。使其与显示器进行垂直对齐后,采用# C6C6C6至#838383的椭圆形填充和# 757575的1像素柔化描边。然后再为其添加一个5%的木纹纹理。完成后将这一对象通过“修改—排列—移到最后”命令。如图08。


图08


画完上托架后再来画下托架。用“椭圆形”工具画一个299*80大小的椭圆。同样要将其与显示器进行垂直对齐,然后采用# E0E0E0至# 5E5E5E的椭圆形填充,并为其添加一个5%的木纹纹理。完成后也通过“修改—排列—移到最后”命令将这一对象移到最后一层。如图09。


图09


将这一椭圆进行复制后,把复制品改用线性填充,完成后也移到最后一层,如图10。


图10


在托架上还有个垂直指针样的三角凹槽,我们用“矩形”工具画出一个4*9的矩形后,用“部分选择”工具将矩形左下角的一个路径节点选中后删除,然后把右下角的一个节点向左移动2个像素。接着再用#EBEBEB进行实心填充和#999999的1像素柔化描边,并为其增加一个“内斜角”特效。如图11。


图11


完成后将这个三角凹槽与显示器托架进行垂直对齐,如图12。


图12


五、开关键的绘制

用“矩形”工具在显示器右下角的地方画一个21*21的矩形,然后为其使用# C1C1C1的实心填充和# 333333的1像素柔化描边。再分别添加一个“内斜角”特效和一个“外斜角”特效,各项设置如图13。


图13


在开关键上画一个7*8的椭圆,并使用#535353的1像素柔化描边,然后用“切线”工具将该圆的上部切出一个缺口,如图14。


图14


将该圆上部被切除的路径删除后,用“直线”工具顺着缺口的中央画一条描边色为# 818181的直线,如图15。


图15


这样一来显示器的开关键也就画好了。我们顺便在这开关键的左方绘制一个4*4大小的圆形电源指示灯,用#E2FF71进行实心填充即可,如图16。


图16


六、调节键的绘制

我们接着来画显示器上的调节键。先画一个31*13的椭圆,然后再将该椭圆另行复制一份并将其向右移动19个像素,再将这两个对象同时选中后使用“修改—组合路径—联合”命令,使其形成一个新的组合路径。然后对这一路径使用# CCCCCC的实心填充和#666666的1像素柔化描边。接着还要为其分别添加一个“内斜角”和“外斜角”特效,各项设置如图17。


图17


完成这些操作后,将这一组合路径与显示器进行垂直对齐,如图18。


图18


把这个组合路径再复制一份,然后用“部分选择”工具将复制品最左边的三个节点同时选中后进行删除,如图19。


图19


通过“部分选择”工具的修改,使这个复制品的左边路径形成一条直线,如图20。


图20


为这一复制品改用# C0C0C0进行实心填充,然后再添加一个“内斜角”特效,如图21。


图21


将这一复制品进行克隆后,把克隆对象进行垂直翻转,然后将其平移到右边。接下来就用“直线”工具在这两个调节键上分别绘制“—”号和“+”号,如图22。


图22


七、控制键及文字

在距离调节键右边6像素的水平位置上我们来画一个控制键。用“椭圆”形工具画一个10*10的正圆形,然后对该圆使用# C0C0C0的实心填充,并以# 333333进行1像素的柔化描边。再为其分别增加一个“内斜角”特效和“外斜角”特效,如图23。


图23


将这一控制键再复制7个,然后按每个控制键相隔6像素进行水平排列,如图24。


图24


我们再为显示器加上显示器的商标及型号。选用“Impact”字体在显示器的左下角位置输入大写的“SAMSUNG”,然后更改其字体大小为12号,颜色采用# 838383进行填充,同时字体的水平间隔设为113%。如图25。


图25


在文本上点击鼠标右键,从弹出菜单中选择“转换为路径”项。然后再对文字使用一次“修改—取消组合”命令。文字被打散后每个字母都可以自由的移动了,我们将这些字母除最左边的S以外,其它的都向右进行水平移动。使每个字母相互间隔均为2个像素,如图26。


图26


我们再为显示器输入型号。用“Haettenschweiler”字体在显示器开关键的上面输入“SyncMaster 550s”。然后改用字体大小为10号。使用# 686868进行文字填充即可,如图27。


图27


最后你还可以将当前所用的桌面壁纸导入Firework里并移至最后一层,为这个显示器当背景。然后通过“文件—导出预览”窗口把整个作品导出成JPG图片后,把这个作品设为你的新桌面,让亲朋友好友也能经常看到你的杰作! 处理后作品如图28。


图28

搜索: 写实 Fireworks中显示器的绘制 

最热-Fireworks综合教程

Fireworks打造空间环绕文字动画

炎夏清凉一把!Fireworks绘制纸折扇

Fireworks创意遮罩动画打造

Fireworks 打造立体旋转地球

Fireworks中路径转选区的讨论

Fireworks使用技巧及常见问题解答

自己打造动画广告 用Fireworks泛起水波涟漪

下拉菜单全攻略之Fireworks篇

用Fireworks轻松打造网页交互按钮

Fireworks打造相片撕裂效果

Fireworks打造产品展示图

用Fireworks给黑白图上色

FireWorks象素按纽教程

素材
多种冰激凌和蛋糕PNG图标多种冰激凌和蛋糕PNG图标
精美蔬菜高清图片4精美蔬菜高清图片4
精美蔬菜高清图片2精美蔬菜高清图片2
精美蔬菜高清图片3精美蔬菜高清图片3
精美蔬菜高清图片1精美蔬菜高清图片1
景观效果图素材景观效果图素材
景观效果图素材景观效果图素材
手机高清图片手机高清图片
景观效果图素材景观效果图素材