DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks基礎 >> Fireworks教程:繪制可愛卡通Q版電視機圖標 (1)
Fireworks教程:繪制可愛卡通Q版電視機圖標 (1)
編輯:Fireworks基礎     

案例欣賞

網絡上經常會用到一系列圖標,電視機大家一定非常的熟悉了,現在也流行播客之類的,大家都有機會用到。效果如下圖所示:

Fireworks 繪制好玩的Q版電視機

思路分析

仔細觀察電視機,你會發現無非是一個長方體,我們可以看到的最多三個面,正面,側面,頂部,老式的電視機會多出兩根天線。為了讓它活潑可愛點,我們可以使用矢量的鋼筆工具來繪制。因為是Q版的,所以大家隨便勾都沒有問題,注意大的透視關系就可以了。

實現步驟

1、新建一個Fireworks文件。

2、使用矢量的鋼筆工具來繪制電視機側面

Fireworks 繪制好玩的Q版電視機
(內側陰影)

Fireworks 繪制好玩的Q版電視機

3、使用矢量的鋼筆工具來繪制電視機正面

Fireworks 繪制好玩的Q版電視機

4、使用矢量的鋼筆工具來繪制電視機屏幕

Fireworks 繪制好玩的Q版電視機

內側陰影:

Fireworks 繪制好玩的Q版電視機

5、使用矢量的鋼筆工具來繪制電視機頂部

Fireworks 繪制好玩的Q版電視機

內側陰影:

Fireworks 繪制好玩的Q版電視機

6、使用橢圓工具來繪制電視機側面滾輪(你把它當作喇吧也行)

Fireworks 繪制好玩的Q版電視機

內側陰影:

Fireworks 繪制好玩的Q版電視機

7、使用矢量的鋼筆工具來繪制電視機屏幕高光。

Fireworks 繪制好玩的Q版電視機

8、使用矢量的鋼筆工具來繪制電視機頂部高光,讓它多幾分質感。

Fireworks 繪制好玩的Q版電視機

9、使用橢圓工具來繪制電視機天線底座。

Fireworks 繪制好玩的Q版電視機

10、使用矢量的鋼筆工具來繪制電視機天線(筆觸:柔化圓形)。

Fireworks 繪制好玩的Q版電視機

11、使用橢圓工具來繪制電視機天線頭部。

Fireworks 繪制好玩的Q版電視機
(內側陰影)

最後結果:

Fireworks 繪制好玩的Q版電視機

操作技巧

好好理解“內側陰影”,我們要求體積感的凸凹,它可以輕意做到!理解了你很快就無敵了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved