鋼筆工具及關聯工具核心用法

前一節内容，我們重點掌握了PS鋼筆工具快捷鍵、鋼筆工具繪制的曲線是貝塞爾曲線、鋼筆工具與路徑選擇工具、直接選擇工具、轉換點工具之間的核心關聯。掌握了這些基礎知識，并不意味着我們就可以快速自如地掌握鋼筆工具、達到爛熟于心，運用遊刃有餘、出神入化。還需要小夥伴們一步一步，掌握每個必須掌握的技巧。小夥伴們也不要着急，很多做了多年設計工作的設計師，在靈活掌握鋼筆工具方面，可能還存在一些問題。所以，我們隻需掌握常用的重點技巧即可，多多實踐，自然會達到熟能生巧的程度。剛開始學習，不要什麼都想學，那樣隻會增加學習負擔，學習效果大打折扣。

下面，我們在繼續深入探讨鋼筆工具用法的同時，先要溫習一下，鋼筆工具是用來設計形狀，制作路徑的。設計形狀，具體繪制的圖形是矢量圖，矢量圖的清晰度是其最大優點。所以，鋼筆工具繪制形狀具有先天優勢。鋼筆工具繪制矢量圖這一功能和形狀工具又發生了關聯。因為形狀工具繪制的圖形也是矢量圖。這裡，小夥伴們僅僅需要把哪幾個工具用來繪制矢量圖，在意識上建立一個關聯就行了。具體實踐，以後結合實際例子再深入講解。制作路徑，就是可以把鋼筆工具繪制的路徑建立選區、填充，還可以在填充的基礎上描邊等，這些是基本用法。這裡，又把鋼筆工具繪制路徑和前面講過的描邊、填充和選區聯系了起來。同樣，小夥伴們隻需要将建立意識上的關聯即可。

弧度比較自然 圖1

弧度不太自然，錨點太多 圖2

随意拖拽控杆 圖3

控杆長 圖4

控杆短，弧度不大 圖5

• 自動連接式

還要注意一點，當一條路徑繪制完後，如果鼠标不在空白處點擊，它還處于被選中狀态（圖6）。如果松動鼠标，但又想繼續繪制曲線，隻需要在控杆旁邊，在你需要繪制弧度的空白處用鋼筆工具點擊，新的弧線和原來的弧線自動連接在了一起（圖7）。這點，小夥伴們并不需要特别記憶，隻需要多多實踐就可以很好地掌握并記住。當然，如果先前路徑沒有選中，那就用小黑工具選中路徑或形狀，然後繼續在控杆周圍空白處用鋼筆工具點擊，新老路徑或形狀自然連接在了一起（圖7）。用小白工具也可以選中路徑，隻不過，小白工具和小黑工具是有區别的。前面講過，小黑工具可以選中整條路徑或整個形狀進行移動；小白工具可以選中路徑上任意一個點進行移動。這裡，我們再補充一點，小白工具除過上述用法，還可以對路徑一部分進行單獨移動。方法是：用小白工具選中錨點旁邊的一段路徑，小白箭頭變成了黑色箭頭，小夥伴們試着對這段路徑進行拖拽，發現隻能移動一段路徑（圖8）。所以，小黑和小黑工具非常靈活，功能又很強大。可以這樣比喻，小白工具和小黑工具就是鋼筆工具兩員得力大将，随時聽從鋼筆工具差遣。小黑工具整體“駕馭”，小白工具部分“管理”。

圖片處于被選中的狀态 圖6

空白處用鋼筆工具點擊，新老曲線自然連接 圖7

小白工具在弧線類似這樣的部分點擊，可以部分移動路徑和形狀 圖8

• 路徑繪制特殊方向的控制

當然，如果你按住shift鍵，拖拽控杆，小夥伴們發現控杆要麼向垂直方向變換，要麼45度角變化，要麼水平方向變換（圖8）。按住alt鍵，鋼筆工具變成轉換錨點工具了，我們發現，可以單獨對滑杆的一半進行控制（圖9）。這就進一步印證了我們前面總結的shift控制方向、按住alt起到轉換作用（前面提到複制作用）的說法。這裡是将鋼筆工具轉換成轉換點工具。轉換錨點的說法。這裡之所以再次提出，是為了讓小夥伴們将這些知識點聯系起來，更容易記憶和理解。轉化點工具的深入用法，下文會講到。

按住shift鍵可以對控杆水平、垂直拖拽

按住alt鍵，可以對控杆的一半單獨拖拽

添加錨點，其本質作用就是為了對添加錨點的地方進行單獨編輯。

• 讓弧度更彎曲

比如我要對紅色标記的地方添加錨點，讓其彎度更彎，隻需要将鋼筆工具放在該處路徑上，随即出現鋼筆工具右下角帶“ ”的箭頭，表明可以在此處添加錨點，如（圖1）。既然可以對該處添加錨點，也就是說，小白工具、轉換錨點等工具在添加錨點後都可以使用，如（圖2）。

• 改變圖形某處弧度

在UI等設計中，往往需要在形狀工具繪制的圖形中，對部分地方進行弧度改變，就可以使用鋼筆工具進行操作。譬如我們要對圓角矩形下面邊框中間下拉，讓其變得有弧度，就可以在圓角矩形中間位置用鋼筆工具添加錨點，然後用小白工具下拉一定距離，距離大小可以用鍵盤上向下的方向鍵下拉一定數值的距離（方向鍵每次下拉1PX距離，按住shift 每次下拉10PX距離，這點以前内容介紹過），或者随意拉下到自己想要的結果，如（圖3），這種操作既規範又效率高。

圖1

圖2

圖3

删除錨點，其本質作用就是為了對删除錨點的地方進行單獨編輯。

• 讓弧度變得更圓滑

我們要删除紅色标記的地方的錨點，如（圖1），讓弧度變得圓滑，如（圖2）。删除後，弧度變得比之前圓滑很多。

• 改變圖形形狀

在UI、插畫、卡通人物等設計中，往往需要比較規範地改變圖形形狀，這個時候就需要删除錨點（當然，用小白工具選中此處錨點，delete删除也可）。譬如要删除紅色标記的圓形下端錨點，如（圖3）。删除後變成（圖4）的樣子。如果我們繼續需要将改變後的不規則圓形左右兩端錨點向下拉或者向下拉，直接用小白工具，分别，注意是分别用方向鍵移動，如（圖5）。如果同時移動，注意不要選中圖形下端的錨點，否則，下端也跟着移動。很多設計小白不清楚，為什麼明明同時選擇的是左右兩個錨點，下面錨點也跟着移動，就是這個原因。當然你要想讓下面錨點同時移動，同時選中即可。也就是說，選哪個，哪個移動。

圖1

圖2

圖3

圖4

圖5

• 不标準，但自由

另外，自由鋼筆工具繪制路徑，從自由二字可知，它繪制的路徑不标準，就是随便畫一個形狀或者繪制路徑，這個工具不太常用，小夥伴們了解了解就行了。

• 弧度體現最省力、最明顯

對于繪制具有弧度的形狀或者路徑效果明顯。剛開始繪制，弧度不太明顯（圖1），特别當你朝着某個具有弧度的方向繼續繪制時，弧度效果體現最明顯（圖2）（圖3）。但如果形狀或者路徑還沒有閉合，還差最後一步，效果如（圖4）所示，是直線型的。沒有關系，當你用彎度鋼筆工具點擊最後一個錨點，曲線自動連接，自然變成弧度，這點真是太方便了（圖5）。

按箭頭所指方向向上彎曲 圖1

弧度體現最明顯 圖2

彎度太順暢 圖3

圖4

圖5

• 直接轉換法——弧線錨點和角度點之間相互轉換

直接選擇轉換點工具。然後在路徑上點擊弧線上的錨點，我們簡稱弧線錨點（圖1），我們發現，這些錨點變成帶有一定角度的錨點，我們把它叫做角度點（也可以叫做角點。為了形象好記，我在這裡把角度叫做角度點），如（圖2）。既然是轉換點工具，說明它有可逆操作的功能，即可以再次返回到弧線錨點上來。具體就是，還用轉換點工具點再次擊弧線錨點，不要松動鼠标，來回拖拽，如（圖3）。這點，我們在以前的内容中提到過。很多設計師繪制包子臉，就是上小下大的臉型時，為了規範操作，往往會把轉換點工具轉換成鋼筆工具，然後按住alt shift（控制水平方向）使用，很方便，如（圖4）(圖5）。

用轉換點工具點擊上面的錨點 圖1

變成了帶有角度的角度點 圖2

轉換點工具再次點擊弧線錨點，來回拖拽

alt shift 圖4

圖5

• 空白點擊法——鋼筆工具和轉換點之間配合繪制半曲線

先用鋼筆工具繪制一個弧度（圖1），在紅色标志的地方，我們發現箭頭變成鋼筆工具後面右下角拽着一個轉換點工具，按住alt鍵點擊，曲線變成半個弧度（圖2）。如果我們繼續繪制弧度，還是用鋼筆工具在空白處點擊，新舊弧度自然連接在一起（圖3）。這點和上面提到的自動連接式繪制路徑的方法一樣，就是在保持路徑選中、鋼筆工具松開的狀态下，在空白的地方用鋼筆點擊，新舊路徑自然連接。

鋼筆工具繪制弧度 圖1

按住alt鍵點擊後，變成半個弧度 圖2

新舊弧度自然連接 圖3

總之，無論對原有曲線（包括路徑和形狀）繼續繪制，還是對半曲線的繼續繪制，共同的做法是，當鼠标已經松動，要繼續繪制，隻需在空白處點擊，新舊路徑（形狀）自然連接。

最後，我們一定要知道，鋼筆工具用于繪制有弧度的圖形，如果要用鋼筆工具繪制圓形或者矩形，就很不規範，這個時候，形狀工具就派上用場了。也就是說，布爾運算裡，合并、相交、排除都與選區工具、形狀工具、鋼筆工具分不開的。所以，掌握好布爾運算，就得多多練習上述這三類工具。

路徑操作模式以及路徑與選區、布爾運算特殊“姻緣”

鋼筆工具等與之有關的工具介紹完了，小夥伴們隻要認真體會每句話的意思，多多練習自然會有更深的體會。下面，我們看看鋼筆工具無論路徑（圖1），還是形狀（圖2）都有對齊、路徑操作各種模式等功能。這也是學習鋼筆工具繞不過去，同時又不容易掌握，但掌握好特别提升設計能力的部分。

圖1

圖2

路徑往往和選區有天然的“姻緣”關系。一想到選區，自然想到填充和描邊。小夥伴們要有這樣的發散思維。

路徑轉化為選區方法基本有3種，一種是選中要建立選區的路徑，按住ctrl，鼠标左鍵點擊路徑縮略圖，如（圖1）；或者選中要建立選區的路徑，點擊鼠标右鍵，彈出框中有“建立選區”選項，如（圖2）；或者在路徑空白處點擊鼠标右鍵，也會彈出“建立選區”選項，如（圖3）；或者選中要建立選區的路徑，ctrl enter，路徑變成了選區。小夥伴們隻需要記住其中一個方法即可。

常用到的是路徑操作各種模式，如合并、減去頂層形狀、與形狀區域相交、排除重疊形狀等。這裡，我們先繪制兩個路徑，如（圖4），然後通過案例隻舉其中減去頂層形狀一個操作模式，結合路徑轉換為選區進行說明，如（圖5）。我們觀察縮略圖，再和圖2的縮略圖對比，我們發現，減去頂層形狀後，雖然畫布中的圖形沒有變化，但縮略圖裡的顔色由白色變成了黑色。如果選擇與形狀區域相交，縮略圖裡的變化看得更清楚了。為了看得特别清楚，我們可以在路徑面闆中選擇用前景色填充路徑（或者alt delete填充），我們發現，不但畫布中相交的地方被填充了顔色，縮略圖中相交的地方也變成了白色，如（圖6）。其他操作這裡不在贅述，小夥伴們下去自己繪制路徑多多練習體會。

圖1

圖2

圖3

圖4

縮略圖變化 圖5

圖6

特别要注意的是，即便兩條路徑處于合并狀态，我們也可以用小黑工具選中其中一個，如（圖7），進行放大、縮小、旋轉等操作，如圖（8）；也可以對單個錨點用小白工具進行編輯，如（圖9）。但如果對兩條路徑合并組件後，兩條原本獨立的路徑變成1條，如果進行編輯，就是對整條路徑進行操作了，如（圖10）。

圖7

圖8

圖9

圖10

以上關于路徑幾種操作模式，對于理解并掌握布爾運算特别重要。路徑操作模式和布爾運算，在UI設計中，常常用于一些圖标設計，或者常用于LOGO等标志性的設計，可謂運用廣泛，小夥伴們一定要認真掌握。譬如，我們要把這兩條路徑合并（圖11），制作一個抽象圖形的輪廓圖，我們這裡運用了排除重疊形狀模式，如（圖12），然後填充。當然，鋼筆工具用于繪制有弧度的圖形是完全可以的，但繪制矩形、圓形這些圖形，就得用到形狀工具了。

圖11

圖12

路徑幾種對齊、排列方式

• 以什麼方向對齊，就是以什麼方向和中心為基準進行布局排列

很多路徑同時存在，有時候需要對路徑進行對齊排列，如（圖1）。一般情況下，有2條包括2條以上的路徑，就可以執行除“按寬度均勻分布”“按高度均勻分布”外的所有命令。具體是用小黑工具同時選中所有路徑，進行相應的對齊操作。如水平居中，如圖（2）。路徑對齊的方式和圖層對齊操作方式一樣。小夥伴們隻用掌握，左對齊是以左邊圖形為中心，其他圖形向它靠攏對齊；右對齊是以右邊圖形為中心，其他圖形向它靠攏對齊，其他以此類推。要執行路徑對齊的所有方式，就需要3條包括3條以上的路徑。這點大家了解就行。至于對齊到選區，就是以選區為基準對齊；對齊到畫布，就是以整個畫布為基準進行對齊，這裡我先選中對齊到畫布，然後頂邊（圖3），這兩點小夥伴們仔細體會。

圖1

圖2

以畫布為基準頂邊對齊 圖3

• 路徑排列方式對于布爾運算中，特别是減去頂層形狀後圖形的最終形狀有很大影響

路徑面闆中，我們如果在同一路徑中繪制了幾條路徑，當對同一路徑位置進行不同更改後，執行減去頂層形狀命令後，最終形成的形狀不同。

減去頂層形狀命令，說白了，就是頂層形狀減去它本身以及與底層形狀相交的部分（圖4）。

下面，我們選中桃形路徑，将其置于頂層，讓桃形路徑和三角形路徑分别處于合并形狀狀态，然後選中桃形路徑，執行減去頂層形狀命令，我們發現縮略圖裡的桃形被減去了（圖5）。為了看得更清楚，我們填充顔色（ alt delete)，顔色填充後，就形成了（圖6）的形狀。

上面是把桃形置與頂層，如果我們把桃形置于底層，再試試看執行減去頂層形狀命令後，最終會形成什麼形狀。我們發現，至于底層後，得到的填充完顔色的形狀如（圖7）。

特别要注意的是，在執減去頂層形狀命令時，一般誰在頂層就選擇誰，如果選擇了底層，會連帶把空白的背景納入減去的範圍，這點小夥伴一定要注意。譬如，我們讓桃形處于頂層，讓兩個圖形先都處于合并形狀狀态，然後，我們要執行減去頂層命令，本應該選擇處于頂層的桃形，如（圖8），得到（圖9）的結果。但如果我們選擇了處于底層的三角型（圖10），我們得到的是（圖11）這樣的結果，這可能不是我們想要的。事實上，執行減去頂層圖形命令，我們事先就要通過圖形觀察，預判減去頂層命令後，會剩下什麼圖形（圖12）。但如果我們把底層誤選為頂層，即把底層的三角形誤選為頂層，那麼，三角形相對于白色背景來說 ，它卻處于白色背景的頂層，所以，相當于減去了白色背景頂層的三角形的部分，同時，又減去了頂層的桃形，這個過程進行了2次布爾運算。通過這樣的觀察和預判，非常有助于我們決定把哪個圖形放在頂層。當然，這需要有相當熟悉的布爾運算經驗，以及紮實的觀察能力和預判力。

同時，一定要保持每個圖形都是合并形狀狀态，才能執行減去頂層命令。

圖4

圖5

圖6

圖7

本應選擇頂層的桃形 圖8

本應得到圖9結果

圖10

圖11

觀察預判 圖12

上面我們提到圖層位置處于那層的問題，我們也僅僅舉了圖層處于頂層和底層的兩種情況。至于圖層前移一層，後移一層，這是針對多個路徑而言的，操作起來也方便，這裡不再贅述，我們在後面遇到實踐操作，再深入講解。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!