1. 程式人生 > >零元學Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一個猴子臉)

零元學Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一個猴子臉)

search 測試 直接 新手 移除 shift 屬性 ear n)

原文:零元學Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一個猴子臉)


本篇內容會教你如何使用筆刷、鋼筆、漸層以及透明度的調整,還有如何轉化圖層和路徑,最重要的是要教你如何建立自己的筆刷。

?

本篇內容會教你如何使用筆刷、鋼筆、漸層以及透明度的調整,還有如何轉化圖層和路徑,最重要的是要教你如何建立自己的筆刷。

?

?

就是要讓不會的新手都看的懂!

?

01

開始專案
打開Blend後選擇Top Menu的 File->New Project(快捷鍵Shift+Ctrl+N)。 選擇Silverlight Application+ Website為你的項目類型,並命名專案為 “Drawing”。按下OK後,就可開出主要工作區,他是一個空白畫布。

技術分享圖片

02 運用Ellipse(橢圓圖型工具)畫圓
在左邊的Tools快捷鈕選擇Ellipse(若是沒找到,請用快捷鈕最下面的按鈕>>在Search打上Ellipse即可),

Ellipse的快捷鍵為L;在主要工作區,點擊滑鼠左鍵,由左上至右下拖拉出一個圓形(按住Shift可以保持正圓形)。

你也可以在點選Ellipse後,直接在主要工作區點擊左鍵兩下,會自動出現一個圓,再使用Selection工具做大小的調整(快捷鍵V)。

技術分享圖片

03改變邊框(善用 Stroke)

點選Fill下排的Stroke讓我們來改變邊框,一樣從Editor改變邊框的顏色,但在這邊我們保持預設的黑色即可,你也可以依自己喜好設定想要的顏色;接著邊框的粗細我們需要使用Appearance->StrokeThickness調整,我們把預設1調為5,你可以看到圓臉的邊框變粗了。

技術分享圖片

04 接下來,我們一口氣把猴子臉的雛形做出來(運用Path路徑、Pen鋼筆工具)

增加耳朵,接著我們要讓猴子有長出頭發的感覺,猴子的美人尖當然也不能省略,這時需要使用Path,讓我們可以去調整圓形的路徑,在你想要改變的圖層上點右鍵->Path->Convert To Path,這時你的圖層可以使用Direct Selection(快捷鍵A)讓你隨心所欲的拉動它的邊緣,若你發現能拖動的點不夠多,那請使用Pen(鋼筆工具);現在請發揮你的創意拉出頭發跟美人尖。

技術分享圖片

05改變顏色(善用Brushes)

先讓我們來改變圓形的色彩,使圓形有臉的顏色;運用左邊的屬性以及資源控制區Properties->Brushes->Fill,在Editor色盤裏選出你想要的顏色,你也可以直接更改色碼,範例的色碼為#FFD66027。

技術分享圖片

06 運用漸層(善用Gradient Brush- Linear gradient)

現在我們點選Gradient Brush,Editor面版會多出漸層控制條,預設的漸層模式為線性漸層(Linear gradient),請在漸層控制條下緣邊邊點擊左鍵兩下,讓我們多增加一個漸層色階,範例的色階為:#FFB64914 0%,#FFB85522 56.9%,#FFF1EBBF 100%。(若要移除色階,請以左鍵點擊色階鈕,直接拖拉離開漸層控制條即可),臉跟小耳的顏色為#FFF1EBBF。

07 運用漸層(善用Gradient Brush- Radial gradient)

選起外耳我們一樣用漸層模式,這次我們選擇放射狀漸層(Radial gradient)讓耳朵有外圍彎曲的感覺;範例的色階為:#FFF1EBBF 40.3%,#FFD09464 58.1%,#FFB64D19 87.5%,#FF352014 100%。

技術分享圖片

08 制作眼睛(熟悉Ellipse、Selection、Brushes的運用)

用Ellipse做一圓當成眼白部分,外框Stroke與臉相同使用黑色以及StrokeThickness粗細5,眼白我們用漸層使他更像眼白內部:#000000 85,#545454 100%;再增加一個有邊框的Ellipse,這個圓形我們要當作眼球,請以實心顏色填滿,這裏我們不使用漸層:#FF6C1C1C;最後一個Ellipse我們不要邊框(StrokeThickness 0),#000000。以上物件請用Selection移動到你想要的位置。

技術分享圖片

09 制作另一只眼睛(Grid、Resource Brush的運用,以及重新命名)

於左邊Objects and Timeline把剛剛我們用Ellipse所繪制的三個圖層選起,在選起的狀態下按右鍵->Group Into->Grid,並把剛剛群組起來的物件由Grid改名為rightEye(你可以在要改的檔名上點擊兩下,或是按右鍵選擇Rename),選起rightEye後復制並貼上,會多出一組圖層rightEye_Copy,請用Seletion把圖層移到左眼的位置,並把rightEye_Copy改為leftEye。

現在我們有兩個眼球,讓我們來運用筆刷,讓左眼的眼白的地方變色;請選取右眼(RightEye)眼白的圖層後,點擊Fill後面的小方框,選擇Convert to New Resource,跳出Create Brush Resource後,請命名筆刷為Brush1,點擊OK;你會發現在Brushes下方的面板會變為Local Brush Resource,點Brush1後會出現顏色修改器:

技術分享圖片

你會發現,左眼眼白會跟著變色,這是Blend的筆刷功能,因為左右眼套用同一組筆刷資源,所以右眼的顏色會牽動左眼;

技術分享圖片

測試結束,我們把眼白回復成原本的顏色。

10 制作猴子嘴巴(運用Rectangle、Combine)

用Rectangle(快捷鍵M)拖拉出一個長方矩形,再用Ellipse拉出一個橢圓,讓矩形跟橢圓重疊,把兩個圖形一起選起來,點擊右鍵->Combine->Subject

技術分享圖片

(小撇步:這邊需要註意的是,我們要留的是半圓形的部分,所以請在橢圓形圖上按右鍵來操作Combine,若你在矩形上按右鍵操作Combine將會是矩形被留下,生成的結果會呈現下面的情況。)

技術分享圖片

了,我們改變一下猴子嘴的顏色,範例顏色為#FFD87D7D

技術分享圖片

?11 運用你在本章所學到的,把猴子改造成你最喜歡的樣子

技術分享圖片

?

?

?

本篇的教學就到此。

(若有任何錯誤的地方,請各位前輩或同好能不吝指教,小女子都會虛心接受;若是你喜歡我的教學,請給我點鼓勵,謝謝。)

一步一步邁向HIE之路

喜歡我文章請推我一下或給我個回應,你的鼓勵會給我無限的動力喔!

若是您有其他問題或是特別需要,請在文章回應處留言,我會盡快回覆您

零元學Expression Blend 4 - Chapter 3 熟悉操作第一步(制作一個猴子臉)