DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Fireworks入門知識 >> Fireworks設計案例 >> Fireworks 繪制Philips手機
Fireworks 繪制Philips手機
編輯:Fireworks設計案例     

在整理東西的時候翻出前些日子做的philips手機,就搞了個教程發上來了~不足之處多多指教!由於在繪制過程中的步驟太多,而且有些只是簡單的調整節點和打孔,所以這裡就不一一圖例說明,只是加以簡單的文字說明!還是那句話,講的是方法,過程不一定相同!

Fireworks 繪制Philips手機

1 首先以手機的翻蓋為基礎,畫4條輔助線,並以此為基准畫一個圓角矩形,矩形圓度設置為30;為了留出手機翻蓋的軸部,使圓角一邊成為直角(後來發現這一步可以省略),並調整節點使之與輔助線吻合;最後添加水平的線性漸變色:#f3f6f7-#bob3b9;如下圖

Fireworks 繪制Philips手機

2 畫一個小一點的圓角矩形,圓度為10,顏色 #303169、邊為一px,顏色:#cccccc; 放在剛才的圖層之上,並調整節點使之如下圖;

Fireworks 繪制Philips手機

3 復制上一步的蘭色圓角矩形,放到下層,線形漸變色為#9c9ea5 -  #aca899; 並調整節點,使上邊與第一個圖層一致,選擇下面的接點向下移動,使之如下圖;

Fireworks 繪制Philips手機

4 這一步制作那個翻蓋上面的軸,如下圖所示;並添加線形漸變,如圖 #6d6a77 #eaeaec  #d3d5d8;

Fireworks 繪制Philips手機

5 這一步制作那個翻蓋軸步的高光部分,繪制一個白色的矩形,高為60,寬為8,並調節節點,使之如下圖所示,並選擇高斯模糊,模糊范圍選擇1.2,最後復制此圖層3次;

Fireworks 繪制Philips手機

6 繪制一條長20的線段,顏色#333333,使之稍有彎曲,如下圖;並復制此圖,顏色設置為白色,使之與第一條線段相鄰,如下圖,最後復制圖樣的兩個線段放在軸的另一端,效果如下;

Fireworks 繪制Philips手機

7 這步制作翻蓋與軸間的縫隙,這一步沒什麼特別的方法,用鋼筆畫出大概的形狀,然後調節接點,顏色為#3e3e3e,效果如下圖所示;

Fireworks 繪制Philips手機

8 沿著翻蓋的邊緣用鋼筆勾出下左的效果,是為了制作翻蓋與鍵盤部分的縫隙,顏色為 #abadb3,並添加內陰影 距離:4 柔化:1,透明度56,效果如下圖所示;

Fireworks 繪制Philips手機

9 制作手機邊緣的音量控制鍵:繪制一個高40,寬8的矩形,圓度設置為100,調整如左圖形式,並在上面畫2條長度為10的白色線段,最終效果如右圖;

Fireworks 繪制Philips手機

10 這一步是沿著手機的邊緣用線段勾出手機外殼接逢的效果,最終效果如右圖;

Fireworks 繪制Philips手機

11 制作手機的天線,這一步就是圖層的疊加以及顏色的漸變;幾個元素如下圖;

Fireworks 繪制Philips手機

12 這步制作手機翻蓋軸上的高光部分,繪制一個如下左圖一樣的橢圓型,由下到上做白色到透明的漸變,在加上高斯模糊,模糊范圍 1.5,最終效果如右圖;

Fireworks 繪制Philips手機

13 繪制手機蘭色翻蓋上的高光部分,繪制一個矩形,調整接點,使下面的節點沿著蘭色的殼子拉長,顏色為白色,由下到上透明漸變,高斯模糊為0.7;效果如下圖;另外2個

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