Fireworks寫實繪製:My Phone

來源:互聯網
上載者:User
  今天我們帶大家用Fireworks做一個寫實作品:手機。主要技術是用明暗光影表現凹凸和質感,細節的表現要非常仔細。

  文章末尾提供.png檔案供大家下載參考。

  製作步驟: 

  在Fireworks中建立一個300*520大小的新畫布,白色背景,解析度為72。因為我們將要畫的這個手機從擺放的角度上看是左右對稱的,因此我們可以先用鋼筆工具勾畫出機身左邊的大至輪廓,然後用“細部”工具做細小的修改和調整後如圖01。

  然後再複製這個輪廓,水平翻轉後再移動到右邊使其與左邊的輪廓能夠水平對齊,如圖02。再通過“修改—組合路徑—聯合”選項,把這兩個路徑合成在一起,如此一來我們就得到了一個左右對稱的機身輪廓了。

 
圖01      圖02

  接著對這個機身路徑用顏色#C0BFC8進行實心上色,然後使用兩次的“內斜角”特效,而且兩次特效的設定完全相同。

 
圖03

  我們把機身的整個路徑複製多一個,並取消這複製出來的路徑上的所有特效和填充。隨後用“縮放”工具加Alt鍵的配合進行適當縮小,然後改用“線性漸層”進行填充,顏色由#FCFFF漸層至#BCBABF,羽化值為7。這樣一來就使得整個機身有光澤和立體感。如圖04。


圖04

  我們再來畫手機的顯示屏外圍的部分。之所以先畫這一部分,是為了給以後的顯示屏勾畫帶來位置上的座標參考。

  同樣先用鋼筆勾畫左邊的輪廓,用“細部”工具做細微調整後,複製該輪廓並進行水平翻轉,然後使這兩個對象進行對齊,再對這兩個路徑進行“修改—組合路徑—聯合”,從而形成一個左右對稱的新路徑,如圖05。


圖05

   接著,用線性漸層對這個新路徑進行上色,漸層色由#999999至#F1F1F3,如圖06。


圖06

  這時,我們再來畫一個如下圖般的對稱輪廓,對稱路徑的畫法前面已經講過,在這就不多贅述了。如圖07。


圖07

  再給這一路徑隨便取個名子,就叫“W1”吧,然後把該路徑再複製一個,取名為“W2”並把“W2”所在對象層的“眼睛”暫時關閉。因為一會我們還要用“W2”這個路徑去“切割”另一個對象,所以暫時將“W2”進行保留。


圖08

  同時選中“圖07”中的對稱路徑和“W1”路徑,然後使用“修改—組合路徑—切割(打孔)”命令,形成一個新的組合路徑,同樣對其進行#999999至#F1F1F3線性填充,羽化值為1,如圖09。


圖09

  將該組合路徑複製出多一個,使用“縮放”工具配合Alt鍵的使用,向縮放中心點縮小兩個像素,然後用線性漸層進行填充,如圖10。


圖10

  再用鋼筆工具畫如下圖般的對稱路徑,也用線性漸層加以填充,漸層色由#B7BBC6至#E0E1E6,如圖11。


圖11

  還記得“W2”路徑嗎!選中它並把它的對像層拉到最上的一層來,然後同時選中“圖11”中的對象,並進行“切割(打孔)”命令,又形成一個新的組合路徑,所用的填充色在上圖中已設定好了,依然是#B7BBC6漸層至#E0E1E6,如圖12。


圖12

  這個時候我們可以來畫手機的顯示屏了,先勾畫一個近似矩形的對稱路徑,用全黑色進行實心填充,羽化值為1,如圖13。


圖13

  再複製多一個該路徑,然後向右和向下分別移動2個和3個像素,改“羽化”為“消除鋸齒”,描邊色為#A5A5A5,同時修改線性漸層的填充色,如圖14。


圖14

  為了使手機顯示螢幕周圍有凹入的效果,還要在螢幕周圍的上、左、右畫多三個凹入的陰影。我們先用鋼筆工具勾畫出上面的凹入陰影,然後採用線性填充,羽化值為3。


圖15

  接著再用鋼筆工具畫出左邊的凹入陰影,用#D9D7D8至#AAA6A7進行由上而的線性漸層填充。然後把該凹入陰影的對象複製多一個,進行水平翻轉後移到右邊的適當位置,用#FFFFFF至#D7D5D6進行由上而的線性漸層填充,羽化值均為1,如圖16。


圖16

  最後,我們再給顯示螢幕的內部加多一個投影,使用線性填充,羽化值為3。


圖17

  手機螢幕內容的繪畫比較簡單,“NOKIA”和“Menu”的字型均是Square721 BT,大小分別為24和16號。“Menu”的字型多了一個“加粗”。左右兩邊各表示“訊號”和“電量”強度的矩形長條均用“矩形“工具畫成,並以全黑色填充。


圖18

  這一部分畫完後,我們繼續來畫手機的出聲孔,這部分也比較容易。用橢圓形工具畫一個14*69的橢圓形,然後使其與機身垂直對齊。採用線性填充,羽化為1。


圖19

  再用“橢圓”工具在這個橢圓上畫5個以實心填充的小橢圓,填充色均為#666666,中間的小橢圓可以略畫大些,調整好5個橢圓的位置後,調用對齊面板使其與機身垂直對齊,如圖20。


圖20

  接著該來畫手機上的按鈕了。我們先來畫“功能鍵”。用鋼筆工具畫一個對稱的按鈕外形,採用“橢圓形”填充,描邊色為#333333,如圖。


圖21

  然後用鋼筆工具在“功能鍵”上畫一條略為彎曲的線段,用#5D81B3進行柔化描邊,粗細值為2。

  接著繼續來畫“結束鍵”,直接勾畫出這個鍵的外形,然後用黑色實心填充,如圖22。


圖22

  再把該路徑複製出一個,用“縮放”工具加Alt鍵的配合,向縮放的中心點縮小兩個像素,然後改用線性填充。


圖23

  勾畫手機右邊的“滾動鍵”的方法略有不同,先用鋼筆工具畫出路徑後再以黑色實心填充,然後再複製多一個該路徑,使用“縮放”工具和Alt鍵的配合,向縮放中心縮小2個像素,並把該路徑改為白色實心填充,羽化值為1。


圖24

  接著卻要把這個白色實心填充的路徑複製多一個來,去掉白色實心填充後,改用線性填充,由#FFFFFF至#6B7985進行色彩漸層,並用“細部”工具把這一路徑最左邊的節點選中,用方向鍵向左和向下各移動一個像素,如圖25。


圖25

  至此“結束鍵”和“滾動鍵”就基本畫完了,最後還要用鋼筆工具在這兩個鍵上畫上圖示,描邊大小為2,色值為#333333。


圖26

  再接再厲,我們繼續來畫“數字鍵”。大家注意看,“數字鍵”的外圍有輕微凹入斜度,這使得很多初學者認為這裡應該先畫一個“數字鍵”,填以顏色後就用“外斜角”的特效。思路是對的,但有時這樣做出來的效果卻並不理想,因此在這裡我們要換一種思路,改用普通畫法。

  先勾畫出數字鍵“1”的外形,然後用橢圓形填充,以#444444描邊。


圖27

  接著再來畫“1”的外斜度,先複製多一個“1”,並用縮放工具配合Alt鍵的使用以縮放點為中心放大3個像素,然後改為#C5C4C9至#FFFFFF的線性填充,並去掉描邊,羽化為1。再用方向鍵把該對象向左和向上各移動2個像素的位置。


圖28

  然後調整對像層,使該對象位於數字鍵“1”的後面。

  由於數字鍵“1”、“4”、“7”和“*”的外形全部一樣,所以我們可以先把“1”和“1的外斜度”通過“修改—組合”把這兩個對象合成一組,然後把該組合複製出多三個,並調整好各自的相對位置。


圖29

  而數字鍵“3”、“6”、“9”和“#”的外形則是數字鍵“1”水平翻轉後的效果,所以我們只需把“1”和“1的外斜度”的組合對象水平翻轉過來,然後移到機身右邊的相對位置就行了,所要修改的也只是數字鍵的填充色而已。


圖30

  剩下的數字鍵就只有“2”、“5”、“8”和“0”了,而這4個數字健的外形又都是一樣的,所以我們只需先畫出“2的外斜度”和“2”然後把這兩個對象進行組合後,再複製出其它的數字鍵即可。

  畫出數字鍵“2的外斜度”後使用#B9B8BD至#F1F0F5由上而下的線性漸層,如圖31。


圖31

  再畫出數字鍵“2”的外形後使用橢圓形漸層,如圖32。


圖32

  把其餘的“數字鍵”複製出來後進行對齊排列,完成後如下圖。


圖33

  數字鍵雖然畫好了,可上面還沒有文字啊。所以我們還要把“0至9”以及“*”和“#”這些數字和字元打出來,字型我用的是AvantGarde Md BT,使用加粗,大小為13,用全黑色加以填充,並選中“平滑消除鋸齒”。設定完後右鍵點擊將這些文本文字,從快顯功能表中選擇“轉換為路徑”,如圖。而那個“*”號本來就比較小,所以還要用“縮放”工具加以放大才行。


圖34

  由於這些字元都轉成路徑了,所以我們在選擇個別數位時候就要先用“細部”工具進行點選,然後再用“指標”工具將其移動到手機的“數字健”上面,然後進行相應的位置調整和對齊,完成後如下圖。


圖35

  最後別忘了還要在機身上面畫上“NOKIA”的字樣,用“矩形”工具畫一個62*13大小的黑色實心矩形,並使其與機身對齊,然後在上面打上“NOKIA”幾個字母,字型為Square721 BT,14號大小,使用“加粗”和“強力消除鋸齒”。


圖36

  至此,整部手機的繪畫全部完工。你也可以依自己的喜好給手機加上背景,手機螢幕的內容也可以換成你喜歡的圖案等等。最終效果如下圖。

.png源檔案下載



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。