零元學Expression Blend 4 - Chapter 25 以Text相關功能就能簡單做出具有設計感的登入畫面
本章將交大家如何運用Blend 4 內的Text相關功能做出有設計感的登入畫面
讓你五分鐘就能快速做出一個登入畫面
?
本章將教大家如何運用Blend 4 內的Text相關功能做出有設計感的登入畫面
讓你五分鐘就能快速做出一個登入畫面
?
範例內有文字方塊可以輸入文字,以及密碼欄:
打錯字了....不知道有沒有人發現= =
?
01
開啟一個新專案,並且調整LayoutaRoot的顏色
Brushes->Background->Gradient brush( 0% #FF481950、24% #FF321637、100% #FF141416 )
?
02
接著放入一個TextBlock
Asset->Search->TextBlock
?
並且在TextBlock內放入文字,你可以到這個網址的頁面Copy一段文字回來
請把文字大小調整為 8pt
?
行高設定為18pt
?
03
再來,我們要調整文字所呈現的顏色
請選取文字後到Brushes->Foreground->Gradient brush
調整文字外觀為( 0% FF000000、100% #FFFFFFFF)
?
接著調整透明度Alpha,請到Brushes->OpacityMask
調整文字透明度為 (0% #FFFFFFFF Alpha 41%、45% #FFFFFFFF Alpha 10%、100% #FFFFFFFF Alpha 95%)
?
都調整完成後,應該會如下圖
?
04
以同樣方法再置入一個TextBlock,並且打上Member Login
運用Seletion
?
05
在文字上單擊右鍵選擇Path->Convert to Path,把剛剛鍵入的文字變成Path
?
已經變為Path的文字,使用Direct Seletion(快捷鍵A)時,你可以看到有很多的控制節點
?
拖動節點間線段,拉開節點間的間距,如下圖範例
?
運用Pen工具,增加控制節點,好拖拉成等等的登入視窗
?
增加完控制節點後,拖拉成下圖
?
06
使用剛剛所教的方法更改顏色
並且運用Gradient Tool(快捷鍵G)調整漸層的方向
忘記Gradient Tool怎麼用了嗎?請看這裏
?
調整成如下圖範例,做出立體感
?
07
放入一個TextBox、PasswordBox以及一個Button
?
完成後,按下F5看看你的成果
?
範例專案下載
?
?
本篇的教學就到此。
?
?
(若有任何錯誤的地方,請各位前輩或同好能不吝指教,小女子都會虛心接受;若是你喜歡我的教學,請給我點鼓勵,謝謝。)
一步一步邁向HIE之路
喜歡我文章請推我一下或給我個回應,你的鼓勵會給我無限的動力喔!
若是您有其他問題或是特別需要,請在文章回應處留言,我會盡快回覆您
零元學Expression Blend 4 - Chapter 25 以Text相關功能就能簡單做出具有設計感的登入畫面