2.1.3繪制任意需要的形狀

1、,,,,,,,,,,,,第二章：PHOTOSHOP功能在UI設(shè)計(jì)中的使用,http://www.hwadedu.com,2.1 繪圖工具的介紹,,,,,,,,,,,,,,在繪制移動(dòng)UI界面中的單個(gè)元素時(shí)，最先需要使用的工具就是Photoshop中的繪圖工具，這些繪圖工具可以將元素的外觀進(jìn)行展示，以路徑的方式控制其邊緣和形狀。,http://www.hwadedu.com,2.1.1 規(guī)則形狀的繪制,,,,,,,,,,,,,,Ph

2、otoshop中包含了多種繪制路徑和形狀的工具，當(dāng)需要繪制一些標(biāo)準(zhǔn)的、規(guī)則的形狀時(shí)，可以使用“矩形工具”、“圓角矩形工具”、“多邊形工具”、“橢圓形工具”和“直線(xiàn)工具”來(lái)完成操作。這些工具都是具有三種不同的繪圖模式，為了便于UI界面元素的編輯和應(yīng)用，通常會(huì)使用“形狀”模式進(jìn)行制作，接下來(lái)就對(duì)這些形狀的繪制工具進(jìn)行簡(jiǎn)單介紹。矩形工具：可以使用該工具繪制出長(zhǎng)方形或者正方形效果。在使用“矩形工具”繪制的過(guò)程中，只需要單擊并拖拽鼠標(biāo)，就可以繪

3、制任意大小的矩形。如果要繪制正方形，可以按住Shift鍵的同時(shí)進(jìn)行操作，如下圖所示。,規(guī)則形狀的繪制,,http://www.hwadedu.com,,圓角矩形工具：該工具可以繪制出帶有一定弧度的圓角方形，利用其選項(xiàng)欄中的“半徑”選項(xiàng)來(lái)控制圓角的弧度。在進(jìn)行UI設(shè)計(jì)的過(guò)程中，常常會(huì)使用“圓角矩形工具”來(lái)繪制一個(gè)按鈕、圖標(biāo)和滑塊軌跡等，如下圖所示為該工具繪制的效果。,規(guī)則形狀的繪制,,http://www.hwadedu.com,,邊形工

4、具：該工具可以繪制出多邊的圖形，還可以對(duì)圖形的邊數(shù)和凹陷程度進(jìn)行設(shè)置。在“多邊形工具”的繪制中，可以利用“邊”選項(xiàng)對(duì)多邊形的邊數(shù)進(jìn)行控制，在畫(huà)面中對(duì)多邊形的邊數(shù)進(jìn)行控制，在畫(huà)面中創(chuàng)建不同的多邊形或星形效果，如下圖所示為該工具繪制的多邊形和星形效果及相關(guān)設(shè)置。,規(guī)則形狀的繪制,,http://www.hwadedu.com,,橢圓形工具：該工具可以繪制出外形為橢圓或者正圓形的形狀。在繪制UI界面元素過(guò)程中，該工具常常被用作繪制按鈕和修飾形

5、狀的工具，如下圖所示為該工具的繪制效果。,規(guī)則形狀的繪制,,http://www.hwadedu.com,,直線(xiàn)工具：該工具用于創(chuàng)建直線(xiàn)、虛線(xiàn)或者帶有箭頭樣式的線(xiàn)段。如下圖所示為該工具繪制的線(xiàn)段和虛線(xiàn)效果。,規(guī)則形狀的繪制,,http://www.hwadedu.com,2.1.2 自定義形狀的繪制,,,,,,,,,,,,,,“自定形狀工具”可以繪制出豐富的圖形形狀，在Photoshop中提供了較多的預(yù)設(shè)形狀供用戶(hù)使用，同時(shí)還可以創(chuàng)

6、建具有個(gè)性的圖形形狀，具有很高的自由度。選擇工具箱中的“自定形狀工具” ，可以看到如下圖所示的工具選項(xiàng)欄。,自定義形狀的繪制,,http://www.hwadedu.com,,“自定形狀工具”最大的特點(diǎn)就是該工具的選項(xiàng)欄中有一個(gè)“形狀”選擇器。它主要在于選擇需要繪制的圖形形狀。如果要選擇“形狀”選擇器擴(kuò)展菜單的“全部”命令，可以將Photoshop中所有的預(yù)設(shè)形狀載入到“形狀”選區(qū)器中，如上圖所示為“形狀”選擇器展開(kāi)的效果。我們可以看

7、到其中包含的預(yù)設(shè)形狀多種多樣，有的可以直接應(yīng)用到UI界面設(shè)計(jì)中，而有的可以作為藍(lán)本進(jìn)行修改來(lái)獲得新的形狀，能夠大大提高編輯的效率。單擊“形狀”選項(xiàng)后面的三角按鈕，可以打開(kāi)“形狀”選取器：?jiǎn)螕粲疑辖堑脑O(shè)置按鈕，在菜單中選擇“載入形狀”命令，可以打開(kāi)如下圖所示的“載入”對(duì)話(huà)框，在其中可以選擇所需的形狀載入到當(dāng)前“形狀”選取器中。,自定義形狀的繪制,,http://www.hwadedu.com,,當(dāng)前“形狀”選取器中添加形狀后，由于形狀的

8、數(shù)量較多，選擇需要的形狀會(huì)花費(fèi)過(guò)多的時(shí)間：此時(shí)可以再擴(kuò)展菜單中選擇“復(fù)位形狀”命令，將“形狀”選取器中的形狀顯示為默認(rèn)的預(yù)設(shè)形狀，在根據(jù)需要載入合適的形狀即可。在進(jìn)行UI界面制作的過(guò)程中，經(jīng)常會(huì)使用“自定形狀工具”中的預(yù)設(shè)形狀來(lái)使用或者加工，讓形狀的編輯更加的快捷。,自定義形狀的繪制,,http://www.hwadedu.com,2.1.3 繪制任意需要的形狀,,,,,,,,,,,,,,想要繪制出任意所需的形狀，那就只有使用萬(wàn)能的

9、“鋼筆工具”來(lái)完成了?！颁摴P工具”可以繪制出任意形狀的路徑，也可以對(duì)原有的路徑進(jìn)行更改。在繪制任意形狀時(shí)，我們可以使用“鋼筆工具”創(chuàng)建稱(chēng)作路徑的線(xiàn)條。路徑由一個(gè)或多個(gè)直線(xiàn)或者曲線(xiàn)線(xiàn)段組成，每個(gè)線(xiàn)段的起點(diǎn)和終點(diǎn)由錨點(diǎn)標(biāo)記。路徑可以使閉合的，也可以是開(kāi)放的，并具有不同的端點(diǎn)。通過(guò)拖動(dòng)路徑的錨點(diǎn)、方向點(diǎn)或路徑段本身，就可以改變路徑的形狀。,繪制任意需要的形狀,,http://www.hwadedu.com,,如下圖所示可以看到，路徑中包含了

10、曲線(xiàn)路徑段、選中的錨點(diǎn)、未選中的錨點(diǎn)、方向線(xiàn)、方向點(diǎn)等，通過(guò)這些元素進(jìn)行組合，就形成了完整的路徑效果。,繪制任意需要的形狀,,http://www.hwadedu.com,,在使用“鋼筆工具”的過(guò)程中，使用該工作在圖像窗口中單擊，即可添加一個(gè)錨點(diǎn)，如下左圖所示。當(dāng)在另一個(gè)位置單擊并拖拽鼠標(biāo)時(shí)，會(huì)出現(xiàn)一個(gè)曲線(xiàn)段，同時(shí)在新添加的錨點(diǎn)的兩側(cè)顯示出該錨點(diǎn)的方向線(xiàn)，如下圖所示。按住Alt鍵的同時(shí)單擊并拖拽方向線(xiàn)，可以對(duì)該曲線(xiàn)段的弧度進(jìn)行調(diào)整，如下