2.1.3繪制任意需要的形狀

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

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

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

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

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

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

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

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

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

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