photoshop畫(huà)直線(xiàn)和斜線(xiàn)的方法的簡(jiǎn)單介紹

很多新手用鋼筆工具畫(huà)不出流暢的曲線(xiàn)，今天就跟著(zhù)大神一起學(xué)習如何畫(huà)出完美的貝塞爾曲線(xiàn)。本篇教程以2015為例，其它版本一樣適用。

Pen Tool Animation byGal Shir

在我初學(xué) UI 的時(shí)候，臨摹了很多作品，每次臨摹基本都可以分為兩個(gè)步驟，第一步是用鋼筆工具和形狀工具把物體勾勒出來(lái)，第二步是往形狀上填充顏色，然后加一些漸變或者投影。在填充顏色和細節的時(shí)候是很享受的，但是在勾輪廓的時(shí)候總是很崩潰，畫(huà)出來(lái)的曲線(xiàn)總是不流暢，也不知道問(wèn)題出在哪里，其實(shí)就是鋼筆工具沒(méi)有掌握好。

后來(lái)看到一篇外文文章，寫(xiě)的是在 Illustrator 中使用鋼筆工具的技巧，才明白了怎樣才能用鋼筆工具畫(huà)好曲線(xiàn)，今天結合那篇文章加上我的感悟來(lái)聊一聊 UI 設計中的難點(diǎn)，鋼筆工具。

準備工作，勾選橡皮帶工具

I Design With Code byChris Gannon

鋼筆工具大家應該都很熟悉了，中間一個(gè)節點(diǎn)，兩邊兩個(gè)手柄，調節手柄的方向可以控制曲線(xiàn)的走向，調節手柄的長(cháng)度可以控制曲線(xiàn)的弧度。上面的動(dòng)效設計表達的就是這個(gè)意思。

在使用鋼筆工具的時(shí)候有個(gè)能幫助我們的選項，叫橡皮帶，勾選上以后，曲線(xiàn)會(huì )隨著(zhù)鼠標移動(dòng)，方便我們預覽曲線(xiàn)的走向，看下圖，在圖片最右邊，點(diǎn)擊齒輪勾選上：

節點(diǎn)手柄方向和位置是畫(huà)好曲線(xiàn)的關(guān)鍵

接下來(lái)就要開(kāi)始用鋼筆工具畫(huà)曲線(xiàn)了，在畫(huà)以前我們可以看看高級 UI 設計師們是怎么處理曲線(xiàn)的節點(diǎn)的，看下面兩張圖：

從圖片里我們能發(fā)現，這些節點(diǎn)的方向都是有規律的，都遵循了一種秩序，第一個(gè)規律是：除了曲線(xiàn)結束的角，所有節點(diǎn)的手柄不是水平的就是垂直的，具體情況要根據曲線(xiàn)的走向，如果曲線(xiàn)橫著(zhù)走，手柄方向就水平，如果豎著(zhù)走，方向就垂直。第二個(gè)規律看下面的兩張圖：

圖片中紅色的圈代表水平的節點(diǎn)，藍色的圈代表垂直的節點(diǎn)，從圖片里可以看出，不僅僅是手柄的方向有規律，節點(diǎn)的位置也是有規律的，第二個(gè)規律就是：所有的節點(diǎn)都在曲線(xiàn)的 “最” 外側或者 “最” 內側。簡(jiǎn)單得說(shuō)就是如果曲線(xiàn)是凸出來(lái)的，節點(diǎn)就放在最凸的那個(gè)地方，如果節點(diǎn)是凹進(jìn)去的，節點(diǎn)就要放在最凹的那個(gè)地方。掌握了這兩個(gè)規律就可以輕松畫(huà)出完美的曲線(xiàn)了。

實(shí)戰演示一下

比如說(shuō)用鋼筆工具畫(huà)上圖這個(gè) “ S ”

根據第二個(gè)規律，所有節點(diǎn)都在曲線(xiàn)最凸或最凹的地方，在這些位置依次畫(huà)上節點(diǎn)。

根據第一個(gè)規律，手柄的方向不是垂直就是水平的，鼠標長(cháng)按鋼筆工具，在菜單的最后找到轉換點(diǎn)工具，就是圖片里 “T” 上面的那個(gè)，按住 shift 點(diǎn)擊節點(diǎn)拖動(dòng)，在每個(gè)節點(diǎn)上把手柄拖出來(lái)，這時(shí)候拖出來(lái)的兩個(gè)手柄是一樣長(cháng)的，位置大概正確就行，不用刻意調整。

在把所有手柄拖出來(lái)以后，我們開(kāi)始調細節，還是用轉換點(diǎn)工具，按住 shift ，分開(kāi)拖動(dòng)每個(gè)手柄使曲線(xiàn)吻合。

所有手柄都調整完成后就大功告成啦！

今天的教程主要講了鋼筆工具的使用技巧，只要熟練掌握了就可以畫(huà)出世界上任何的造型，再加上顏色和質(zhì)感，我們就能創(chuàng )造出精彩的設計。一定要多多練習，鋼筆工具可以說(shuō)是基礎，但也是 UI 設計中的一個(gè)難點(diǎn)，大家加油！下期想說(shuō)說(shuō)線(xiàn)框小圖標的設計心得。

全教程完

作者：力力_NeverGG

PS美工平面設計/手機圖標APP/交互界面PS更多學(xué)習，點(diǎn)擊鏈接加入群【】學(xué)習，UI設計學(xué)習交流群 563893631