PaintCode 用戶操作指南(繪制篇)

3 評論 28619 瀏覽 30 收藏 42 分鐘

圖形(Shapes)

創(chuàng)建新圖形(Creating a new shape)

首先,從工具欄中選擇設(shè)計(jì)師要的圖形。

在畫布中點(diǎn)擊任意位置,然后按住鼠標(biāo)左鍵不動。

拖動光標(biāo)。

當(dāng)?shù)竭_(dá)設(shè)計(jì)師滿意的大小的時(shí)候,放開鼠標(biāo)左鍵。

在畫布中鼠標(biāo)點(diǎn)擊的點(diǎn)和設(shè)計(jì)師放開鼠標(biāo)的點(diǎn),是相反的對角點(diǎn)(除了貝塞爾曲線)。

PaintCode 會自動嘗試把設(shè)計(jì)師創(chuàng)建的圖形和其他圖形對齊,設(shè)計(jì)師可以通過按住“Command”鍵來抑制這種行為。

創(chuàng)建等高等寬的圖形(Creating a shape with equal with width and height)

要畫一個(gè)完美的圓形,正方形,多邊形或者星形,設(shè)計(jì)師可以按住 Shift 鍵的同時(shí)創(chuàng)建。

重命名圖形(Renaming a shape)

00002

PaintCode 為設(shè)計(jì)師生成了命名,但設(shè)計(jì)師可以根據(jù)需要自定義命名。這些命名在生成代碼中使用。

要改變一個(gè)圖形的命名,可以在檢查器中選擇一個(gè)圖形并輸入新的命名。

刪除圖形(Deleting a shape)

選擇圖形后,按 Delete 或者 Backspace 鍵,可以刪除圖形。

移動圖形(Moving a shape)

設(shè)計(jì)師可以用鼠標(biāo)拖動圖形移動它,這個(gè)圖形會和其他圖形對齊,以幫助設(shè)計(jì)師調(diào)整對齊。

設(shè)計(jì)師可以按住 Control 鍵,來抑制這種行為。

默認(rèn)情況下,PaintCode 會盡量保持圖形邊緣能夠與點(diǎn)網(wǎng)絡(luò)對齊。當(dāng)設(shè)計(jì)師按住 Option 鍵的時(shí)候,形狀會捕捉到半個(gè)點(diǎn)坐標(biāo)。此外,設(shè)計(jì)師可以按住 Control 鍵,來抑制對齊。

用過鍵盤移動圖形(Moving a shape using keyboard)

設(shè)計(jì)師可以選擇鍵盤中的方向鍵來移動圖形。默認(rèn)狀態(tài)下,這會朝著設(shè)計(jì)師期望的方向移動。

按住 Option + 方向鍵,移動半個(gè)點(diǎn)。

按住 Shift+ 方向鍵,移動十個(gè)像素。

調(diào)整圖形大?。≧esizing a shape)

00003

在特定的方向上調(diào)整圖形,點(diǎn)擊并拖動相應(yīng)的控制點(diǎn)就可以了。PaintCode 還可以幫設(shè)計(jì)師自動與其他圖形對齊。

當(dāng)然,設(shè)計(jì)師也可以通過長按 Command 鍵,開避免對齊行為發(fā)生。

PaintCode 也會試著幫設(shè)計(jì)師把圖形的尖刺與點(diǎn)網(wǎng)格對齊。長按 Option 鍵每次可以移動半點(diǎn)網(wǎng)格,設(shè)計(jì)師可以長按 Control 鍵來避免這種對齊行為發(fā)生。

長按 Shift 鍵,拖動圖形的一個(gè)控制點(diǎn),能夠使圖形保持固定比例縮放。

設(shè)置填充和描邊(Setting a fill or stroke)

有三種方式為圖形添加顏色填充和描邊。注意為圖形增加填充,設(shè)計(jì)師同樣可以在設(shè)置漸變和圖片中使用這種方法。

第一種方式,點(diǎn)擊并拖動顏色連接點(diǎn)到畫布中的圖形,然后選擇設(shè)計(jì)師相連接的顏色屬性就可以了。連接點(diǎn)會在庫中的相鄰顏色中顯示出來。如果這個(gè)顏色并沒有在文檔中使用,就會顯示一個(gè)空的圓形。

00004

另一種方式是,在檢查器中的填充或描邊顯示器中添加顏色。當(dāng)顯示器是空的時(shí)候,表示填充或者描邊為設(shè)置。當(dāng)設(shè)計(jì)師點(diǎn)擊顯示器后,一個(gè)上下文按鈕就會顯示出來,設(shè)計(jì)師可以選擇設(shè)計(jì)師想要的顏色。上下文按鈕會填充庫中的項(xiàng)目,頂部也包含系統(tǒng)顏色。

00005

想要不再使用顏色,單擊檢查器中顯示器左側(cè)的紫色環(huán)形“X”就可以了。

第三種方式,從顏色彈出按鈕菜單中選擇一種設(shè)計(jì)師要使用的顏色。

00006

00007

這三種方式都能達(dá)到相應(yīng)的目的,設(shè)計(jì)師需要使用設(shè)計(jì)師覺得最方便的一種。這樣的設(shè)置方式同樣適用在漸變和圖像上。

設(shè)置陰影(Setting a shadow)

在PaintCode 中,設(shè)計(jì)師可以單獨(dú)為填充、描邊和文本設(shè)置陰影,填充和文本,還能設(shè)置內(nèi)陰影。

這些選項(xiàng)在檢查器中的陰影盒子中,一旦設(shè)計(jì)師設(shè)置了填充、描邊或者文本(當(dāng)填充沒有設(shè)置當(dāng)時(shí)候,就不能設(shè)置陰影,同理適用于描邊和文本)。

單擊并拖動陰影連接點(diǎn)到畫布中的圖形中,就可以使用陰影了。

00008

設(shè)計(jì)師還可以在檢查器中的陰影彈出按鈕上選擇陰影來設(shè)置。

00009

在庫中,這些會被自動填充上陰影。

復(fù)制另一個(gè)圖形的樣式(Copying style of another shape)

很方便去建立一個(gè)新的與其他已繪制的圖形擁有形同樣式的圖形。首先,設(shè)計(jì)師要選擇設(shè)計(jì)師想要的圖形樣式。然后,創(chuàng)建一個(gè)新的圖形。新創(chuàng)建的圖形會自動匹配到先前選定的形狀樣式。

翻轉(zhuǎn)圖形(Flipping a shape)

00010

在工具欄中點(diǎn)擊相應(yīng)的圖標(biāo)(上圖),就能水平或者垂直翻轉(zhuǎn)圖形。

設(shè)計(jì)師也可以在應(yīng)用程序菜單中選擇“選擇/水平翻轉(zhuǎn)(Selection / Flip Horizontally)”或者“選擇/垂直翻轉(zhuǎn)(Selection / Flip Vertically)”。

縮放圖形(Contracting and expanding a shape)

00011

當(dāng)縮小圖形的時(shí)候,圖形的邊緣是由一個(gè)像素向內(nèi)推進(jìn)。放大圖形則相反??s放圖形,設(shè)計(jì)師可以在工具欄中點(diǎn)擊相應(yīng)的圖標(biāo)來完成。

或者,設(shè)計(jì)師可以選擇應(yīng)用程序菜單中的“選擇/縮小(Selection / Contract)”或者“選擇/放大(Selection / Expand)”。

轉(zhuǎn)換形狀為貝塞爾形狀(Converting shape to a bezier)

00012

設(shè)計(jì)師可以把一個(gè)圖形轉(zhuǎn)化為貝塞爾圖形。貝塞爾圖形非常有用,設(shè)計(jì)師可以編輯并旋轉(zhuǎn)。

將一個(gè)圖形轉(zhuǎn)為貝塞爾圖形,設(shè)計(jì)師可以從應(yīng)用程序菜單中選擇“選擇/轉(zhuǎn)化為貝塞爾(Selection / Convert to Bezier)”來完成。設(shè)計(jì)師還可以從畫布上下文菜單來完成轉(zhuǎn)化。

編輯圖形(Editing shape)

一些圖形的內(nèi)容(如文本,貝塞爾曲線和組)都可以被編輯。要編輯這些圖形,設(shè)計(jì)師可以雙擊圖形或者按回車鍵。

選項(xiàng)(Selection)

選擇單個(gè)圖形(Selecting individual shapes)

選擇一個(gè)圖形,在畫布上單擊圖形就可以了?;蛘?,設(shè)計(jì)師可以從圖形和組瀏覽器中點(diǎn)擊選擇圖形。

選擇當(dāng)前選項(xiàng)下面一層的圖形(Selecting a shape behind the current selection)

選擇當(dāng)前選項(xiàng)下面一層的圖形,按住 Command 鍵并點(diǎn)擊鼠標(biāo)就能完成。

選擇多個(gè)圖形(Selecting multiple shapes)

設(shè)計(jì)師可以通過以下方式選擇多個(gè)圖形:

使用矩形選擇框,在畫布的任意位置點(diǎn)擊并拖動鼠標(biāo),選擇設(shè)計(jì)師想要的圖形;

或者按住 Shift 鍵,單擊每一個(gè)圖形,逐一添加;

又或者在圖形和組瀏覽器中選擇多行。

調(diào)整選項(xiàng)(Modifying the selection)

設(shè)計(jì)師可以通過按住 Shift 鍵,調(diào)整當(dāng)前的選項(xiàng):

點(diǎn)擊未選中圖形到已選擇圖形中;

點(diǎn)擊一個(gè)已選圖形移除該圖形;

通過拖動選擇矩形框添加圖形,或者從已選圖形中移除多個(gè)圖形。

刪除選項(xiàng)(Deleting the selection)

設(shè)計(jì)師可以按 刪除(Delete)或者空格(Backspace),來刪除選項(xiàng)。

重新排列圖形(Rearranging the shapes)

00013

設(shè)計(jì)師可以通過使用主應(yīng)用工具欄中的向前(Front)或者向后(Back),來調(diào)整圖形排列順序。

另外,設(shè)計(jì)師也可以使用應(yīng)用菜單,來控制圖形順序:

前移圖形:OPTION + COMMAND + UP ARROW

后移圖形:OPTION + COMMAND + DOWN ARROW

獲取代碼選擇(Getting code for selection only)

PaintCode 在畫布中顯示生成的所有圖形代碼。然后,它也顯示設(shè)計(jì)師當(dāng)前選擇的圖形代碼。在畫布上,單擊設(shè)計(jì)師要選擇的圖形,將它復(fù)制到粘貼板中(Command+C)。當(dāng)設(shè)計(jì)師試著粘貼形狀到代碼編輯器,圖形的繪圖代碼就會粘貼到代碼編輯器中。

圖形和組瀏覽器(Shapes & Groups Browser)?

00014

圖形和組瀏覽器顯示 PaintCode 文檔中的圖形和組樹。在圖形和組樹中,瀏覽器中的列表展示了在畫布上繪制圖形和組的順序??梢酝ㄟ^圖形和組名稱旁邊的小圖標(biāo)來查看他們是否有填充。

此外,在瀏覽器中的選項(xiàng)與畫布中的選項(xiàng)同步??梢酝ㄟ^點(diǎn)擊選擇瀏覽器中的圖形選擇。注意,設(shè)計(jì)師可以一次選擇多個(gè)圖形,也可以通過雙擊圖形名字來編輯。

當(dāng)設(shè)計(jì)師在畫布中雙擊一個(gè)組,組將會展開,設(shè)計(jì)師可以選擇畫布中的任意圖形。另外,當(dāng)設(shè)計(jì)師在選擇屬于某個(gè)組的圖形時(shí),封閉組將會自動激活(展開),被激活的組會顯示一個(gè)藍(lán)色三角形。

00015

想要刪除一個(gè)圖形或者一個(gè)組,選擇圖形或者組并按下 Delete 或者 空格鍵就可以了。

設(shè)計(jì)師還可以重新排列瀏覽器中圖形和組的順序。這相當(dāng)于使用“向前(bring-to-front)”和“向后(send-to-back)”命令來完成,設(shè)計(jì)師也可以拖動移動一個(gè)組中的圖形。

畫布設(shè)置(Canvas Setting)

圖形和組瀏覽器中的頂層對象是當(dāng)前活動的畫布。如果設(shè)計(jì)師點(diǎn)擊瀏覽器中的畫布,畫布設(shè)置將會出現(xiàn)在檢查器的下方:

00016

選擇另一個(gè)畫布(Choosing a different canvas)

標(biāo)簽中包含多個(gè)畫布,但圖形和組瀏覽器職能顯示當(dāng)前活動的畫布中的內(nèi)容。設(shè)計(jì)師可以通過點(diǎn)擊瀏覽器頂部,選擇激活另一個(gè)畫布。

00017

00018

編組(Groups)

當(dāng)設(shè)計(jì)師為一組圖形編組,結(jié)果組會表現(xiàn)為一個(gè)單獨(dú)的圖形,設(shè)計(jì)師可以調(diào)整大小移動圖形。這是一個(gè)很復(fù)雜的文件,因?yàn)樗峁┝艘环N方法來“隱藏”一種符合邏輯的復(fù)雜性,這樣能夠讓管理文件過程變得容易。設(shè)計(jì)師也可以:

創(chuàng)建帶有自定義行為的智能組

給組內(nèi)容添加陰影

控制組內(nèi)容中的透明度

通過非標(biāo)準(zhǔn)的混合模式,實(shí)現(xiàn)有趣的視覺效果

添加圖形到組內(nèi)容中

編組&取消編組(Grouping & Ungrouping Shapes)

00019

創(chuàng)建編組,在畫布中選擇一個(gè)或者多個(gè)圖形或者內(nèi)容,在工具欄中點(diǎn)擊 編組(Group) 圖標(biāo)。相反,如果設(shè)計(jì)師想取消一個(gè)編組,點(diǎn)擊工具欄中的 取消編組(Ungroup) 就可以了。

組能夠被嵌套,因此,可以為組編組。

00020

編輯組(Editing a Group)

編輯組,直接雙擊它(無論是在畫布中,還是在圖形和組編輯其中)。或者,也可以從圖形和組瀏覽器中,選擇組中的子圖形。這樣將激活封閉組。

00021

當(dāng)組處于被編輯(被激活)狀態(tài),組中的內(nèi)容可以自由調(diào)節(jié)和移動。一個(gè)被激活的組,在圖形和組瀏覽器匯中會有一個(gè)藍(lán)色的三角形圖標(biāo)標(biāo)記。

停止編輯組,按 ESC 鍵 或者在畫布外的非編輯區(qū)域就可以了。

陰影和不透明度(Shadow & Opacity)

00022

是用檢查器,設(shè)計(jì)師可以為整個(gè)組設(shè)定一個(gè)陰影,就好像是一個(gè)單獨(dú)的圖形一樣。為組內(nèi)元素設(shè)定的陰影(左)和整組設(shè)定的陰影(右)略有不同。

同樣,也可以調(diào)整一個(gè)組的不透明度。與陰影一樣,不透明度適用于整個(gè)組,就像是一個(gè)單獨(dú)的圖形一樣。重疊圖形50%不透明圖形顏色(左)與不透明度50的組(右)看起來不同。

混合模式(Blend Modes)

混合模式影響一個(gè)組的內(nèi)容是如何畫在底層的??梢钥刺O果的混合模式文檔,了解更多信息。

00023

裁剪(Clip)

在組檢查器中,設(shè)計(jì)師可以(可選)制定裁剪圖形,裁剪只限定在組中。裁剪的形狀,在畫布中,看起來是一個(gè)白黑色虛線。

智能組(Smart Groups)

當(dāng)調(diào)整和移動智能組中的圖形時(shí),設(shè)計(jì)師可以定義改組中的內(nèi)容。允許設(shè)計(jì)師,例如,創(chuàng)建一個(gè)可調(diào)整大小的用戶界面控件,然后,可以在畫布上多次方便地使用。每個(gè)控件都能夠以獨(dú)立的智能組的形式展現(xiàn),而且操作容易:

00024

很容易制作智能組。首先,使用框架創(chuàng)建動態(tài)繪制。然后,只需要選擇整個(gè)圖形(包括框架)并編組。由此產(chǎn)生的組就是一個(gè)智能組——當(dāng)設(shè)計(jì)師調(diào)整大小、定義內(nèi)容圖形與框架關(guān)系的時(shí)候,組中的內(nèi)容將根據(jù)制定的大小來調(diào)整。

00025

如果設(shè)計(jì)師已經(jīng)有了一個(gè)組,設(shè)計(jì)師可以通過添加內(nèi)部框架,來輕易制作智能組。

事實(shí)上,常規(guī)組與智能組唯一的區(qū)別是框架。如果設(shè)計(jì)師把框架加入組,框架將影響同組中的其他圖形。

00026

在界面右邊,可以看到滑桿控件智能組的結(jié)構(gòu)。通過為組添加框架,來設(shè)置調(diào)整大小。我們已經(jīng)創(chuàng)建了一個(gè)組,很容易跨越文檔調(diào)整大?。ú⑶夷軌蛑貜?fù)利用)。

變換(Transforms)?

變換允許設(shè)計(jì)師針對圖形和組,旋轉(zhuǎn)(Rotate)、縮放(Scale)以及調(diào)整位置(Offset)。與Raster 繪圖應(yīng)用相比,PaintCode讓設(shè)計(jì)師變化圖形而沒有任何質(zhì)量損失。

應(yīng)用在圖形中的變換,在生成代碼中被轉(zhuǎn)化為2D?仿射變換。注意,設(shè)計(jì)師可以連接到形狀變量來變換圖形的屬性,這在決策參數(shù)圖中是偉大的,例如,利用旋轉(zhuǎn),就像圓形進(jìn)度指示器。

所有重要的變換屬性都會在檢查器的變換盒中。默認(rèn)情況下,這個(gè)變換屬性盒子是折疊的:

00027

轉(zhuǎn)換源點(diǎn)(Transform Origin)

這個(gè)綠色的標(biāo)志被稱為“變換源點(diǎn)”,它非常重要。變換源點(diǎn)是所有變換的起始點(diǎn)。這意味著,當(dāng)設(shè)計(jì)師旋轉(zhuǎn)圖形,旋轉(zhuǎn)會以變換源點(diǎn)為基礎(chǔ)。這與縮放和位移一致。變換源點(diǎn)只有當(dāng)變換在檢查器中開啟的時(shí)候才會顯示。

00028

旋轉(zhuǎn)變換(Rotation Transform)

但設(shè)計(jì)師旋轉(zhuǎn)源點(diǎn),一個(gè)圓形的邊框就會出現(xiàn)。通過拖動原型邊框來旋轉(zhuǎn)圖形(或者,設(shè)計(jì)師也可以通過按住 Command 鍵,并在畫布中拖動其中的一個(gè)控制點(diǎn),即便是旋轉(zhuǎn)并未在檢查器中開啟、源點(diǎn)不可見的情況下。在這種情況下,源點(diǎn)將自動移動到旋轉(zhuǎn)圖形的中心。)

00029

默認(rèn)情況下,源點(diǎn)在圖形的一個(gè)角上。在 iOS 下,默認(rèn)在左上角。在 OS X 上,源點(diǎn)通常在左下角。但當(dāng)設(shè)計(jì)師翻轉(zhuǎn)畫布的時(shí)候,這個(gè)有可能變化。

00030

通過拖動源點(diǎn)的中心,也可以將源點(diǎn)移動到任何位置,然后在對圖形進(jìn)行旋轉(zhuǎn)。

00031

當(dāng)設(shè)計(jì)師拖動源點(diǎn)的時(shí)候,設(shè)計(jì)師會發(fā)現(xiàn)它能夠與圖形的角、中心以及其他圖形的源點(diǎn)對齊。按住 Command 鍵的同事拖動源點(diǎn)就可以避免這種事情發(fā)生了。默認(rèn)情況下,源點(diǎn)不會和網(wǎng)格對齊,但可以通過按住 Control 鍵強(qiáng)制它捕捉到網(wǎng)格并對齊。

偏移變換(Offset Transform)

偏移變換可以抵消其變換形狀的源點(diǎn),重要的是,要實(shí)現(xiàn) X 和 Y 的位置屬性,在檢查器中通常使用的不是圖形的左邊。事實(shí)上,這些坐標(biāo)是變換圖形源點(diǎn)的左邊,在下圖中以紅色箭頭所示。

00032

另外,偏移變換從變換源點(diǎn)移動圖形(在上圖中以藍(lán)色箭頭展示)。

通常情況下,圖形的偏移變換(藍(lán)色箭頭)為0,因此圖形的角坐標(biāo)以及變換源點(diǎn)的坐標(biāo)是相同的。當(dāng)設(shè)計(jì)師使用非0偏移變換的時(shí)候,這不再為真。

00033

縮放變換(Scale Transform)

縮放變換允許設(shè)計(jì)師沿著圖形的 X 軸和 Y 軸來縮放。在下面的例子中,藍(lán)色矩形與灰色矩形有著同樣的寬度,但是尺寸變換使得它們在畫布中的大小不同。

00034

變換順序(Transforms Order)

變換的順序?yàn)椋?/p>

偏移變換(Offset)

旋轉(zhuǎn)變換(Rotation)

尺寸變換(Scale)

究竟什么是 X 軸和 Y 軸的形狀位置?(What actually is the X and Y Position of shape?)

在“偏移變換”中,我們解釋,設(shè)計(jì)師最常使用的在檢查器中X 和 Y 坐標(biāo)位置,確定了畫布中的圖形的綠色標(biāo)志的坐標(biāo),這就是變換源點(diǎn)。

然而,這不完全。唯一時(shí),這些坐標(biāo)相對應(yīng)的是什么?當(dāng)設(shè)計(jì)師在畫布上繪制圖形的時(shí)候,并將它放在坐標(biāo)(X = 200, Y = 100)的位置上,這些數(shù)字意味著什么呢?顯然,這意味著圖形放在(200,100)這個(gè)點(diǎn)上——但是點(diǎn)從哪來的呢?0 點(diǎn)又在哪呢?

幸運(yùn)的是,大多數(shù)情況下,情況很簡單—— X 和 Y 坐標(biāo)是相對于整個(gè)畫布的繪制起點(diǎn)。在 iOS 下,這是左上角,但設(shè)計(jì)師可以隨意移動它。

然而,情況變得復(fù)雜了,一旦設(shè)計(jì)師開始使用轉(zhuǎn)換組。在下面的例子中,我們把 3 個(gè)矩形編組,然后采用旋轉(zhuǎn)變換。

00035

00036

當(dāng)設(shè)計(jì)師選擇變換組中的一個(gè)圖形時(shí),設(shè)計(jì)師會注意到 X 軸和 Y 軸坐標(biāo)為(0,103)。

00037

這是因?yàn)樾D(zhuǎn)組的變換源點(diǎn)已經(jīng)變成了全部內(nèi)容坐標(biāo)系統(tǒng)的源點(diǎn)。全部轉(zhuǎn)換組表現(xiàn)為這樣。

當(dāng)滿足下列條件的時(shí)候,一個(gè)組被認(rèn)為變換:

非 0 旋轉(zhuǎn)

非 0 偏移

X 軸或者 Y 軸不等于1

變量連接到旋轉(zhuǎn),尺度或抵消組變換

在上面的圖片中,設(shè)計(jì)師可以看到當(dāng)前坐標(biāo)系原點(diǎn)的兩個(gè)正交的藍(lán)色箭頭。這些代表 X 軸和 Y 軸的坐標(biāo)體系。

總之,一個(gè)圖形的 X 和 Y 坐標(biāo)被定義為與與位置相關(guān)的坐標(biāo)系。坐標(biāo)系系統(tǒng)的源點(diǎn)被定義為最近的父級轉(zhuǎn)化組,如果轉(zhuǎn)化組不在父級轉(zhuǎn)化組中,使用的將是畫布的源點(diǎn)。

貝塞爾曲線(Béziers)?

00038

創(chuàng)建一條直線(Creating a straight line)

  • 在工具欄中選擇 Bézier 工具。
  • 在設(shè)計(jì)師想開始直線的起點(diǎn)位置點(diǎn)擊。
  • 釋放鼠標(biāo)并移動光標(biāo)。
  • 點(diǎn)擊其他地方。
  • 釋放鼠標(biāo)并移動光標(biāo)。
  • 或者,設(shè)計(jì)師可以繼續(xù)重復(fù)前面兩個(gè)步驟,繪制折線;又或者單擊第一個(gè)控制點(diǎn)閉合曲線,從而創(chuàng)建一個(gè)多邊形。

注意:移動光標(biāo),然后在釋放鼠標(biāo)繪制的曲線是彎的,而不是直的。

創(chuàng)建一條曲線(Creating a curved line)

  • 在工具欄中選擇 Bézier 工具。
  • 在設(shè)計(jì)師想開始曲線的起點(diǎn)位置點(diǎn)擊。
  • 按住鼠標(biāo)的同時(shí),移動光標(biāo)到預(yù)期的位置。
  • 釋放鼠標(biāo)。
  • 在設(shè)計(jì)師想結(jié)束的地方點(diǎn)擊。
  • 同時(shí)按住鼠標(biāo),將光標(biāo)移動到一個(gè)新的位置,然后釋放鼠標(biāo)。
  • 或者,重復(fù)之前的兩個(gè)步驟作出更復(fù)雜的曲線;又或者將封閉曲線的點(diǎn)與曲線開始點(diǎn)重合。

設(shè)計(jì)師可以通過釋放鼠標(biāo)而不移動曲線來,創(chuàng)建一個(gè)直線段(或者只有一個(gè)彎曲處理的曲線段)。

編輯貝塞爾曲線(Editing a bézier)

00039

設(shè)計(jì)師可以通過雙擊一個(gè)貝塞爾曲線進(jìn)入編輯狀態(tài)?;蛘哌x擇貝塞爾曲線圖形后按下 Command + E 命令,進(jìn)入編輯狀態(tài)。又或者在選中貝塞爾曲線圖形后按下 Return 鍵進(jìn)入編輯狀態(tài)。

擴(kuò)展貝塞爾曲線路徑(Extending a bézier path)

貝塞爾曲線沒有閉合的話,能夠從兩端擴(kuò)展。想要擴(kuò)展貝塞爾曲線:

  • 選擇貝塞爾曲線。
  • 雙擊曲線激活編輯模式
  • 按 Option 或 Command 或 Shift 或 Control 激活擴(kuò)展。
  • 現(xiàn)在,當(dāng)設(shè)計(jì)師移動光標(biāo),設(shè)計(jì)師應(yīng)該能看到貝塞爾曲線擴(kuò)展的黃色指示。
  • 移動光標(biāo)到預(yù)期的位置并單擊鼠標(biāo)。當(dāng)設(shè)計(jì)師釋放鼠標(biāo)的時(shí)候,能夠創(chuàng)建直線和曲線的擴(kuò)展。
  • 或者,通過點(diǎn)擊貝塞爾曲線的另一端關(guān)閉曲線。

在貝塞爾曲線中添加一個(gè)新的控制節(jié)點(diǎn)(Adding a new control point in the middle of a bézier)

00040

在設(shè)計(jì)師想添加控制節(jié)點(diǎn)的地方單擊,在貝塞爾曲線中添加一個(gè)控制節(jié)點(diǎn),這將會把現(xiàn)有的曲線分為兩部分,并且保持原有的曲率。

在添加控制節(jié)點(diǎn)的時(shí)候控制連接行為(Controlling the snapping behavior when adding new control points)

默認(rèn)情況下,當(dāng)設(shè)計(jì)師添加控制節(jié)點(diǎn)的時(shí)候,他們會視圖使添加控制節(jié)點(diǎn)與貝塞爾曲線的其他控制點(diǎn)緊密連接(垂直和水平方向)。在操作的時(shí)候,按住 Command 鍵,能夠抑制這種行為。

PaintCode 還嘗試將新的控制節(jié)點(diǎn)以坐標(biāo)放置,確保圖形保持鋒利的狀態(tài),完全對其到像素網(wǎng)格。如果設(shè)計(jì)師不想產(chǎn)生這種行為,可以按下 Control 鍵的同時(shí),點(diǎn)擊任意位置。當(dāng)按住 Option 鍵進(jìn)行操作的時(shí)候,它迫使新的控制點(diǎn)的坐標(biāo)是整數(shù)點(diǎn)或者半個(gè)點(diǎn)。

按住 Shift 鍵的同時(shí),限制新的控制點(diǎn)的位置來更好的畫出這些線條。這對繪制水平、垂直以及對角直線非常有用。

00041

調(diào)整控制節(jié)點(diǎn)的位置(Adjusting control point position)

設(shè)計(jì)師能夠通過拖拽控制節(jié)點(diǎn)來調(diào)整單個(gè)控制節(jié)點(diǎn)的位置。PaintCode 通過對齊控制節(jié)點(diǎn)來對準(zhǔn)其位置,幫助設(shè)計(jì)師繪制精確的圖形。這取決于設(shè)計(jì)師的畫筆筆記畫筆寬度的設(shè)置。所以,在移動控制節(jié)點(diǎn)前,更新設(shè)置數(shù)值總是一個(gè)好選擇。

別擔(dān)心,即使設(shè)計(jì)師忘記這么操作,稍后還是可以修改的。但是如果,例如,設(shè)計(jì)師把貝塞爾曲線的寬度設(shè)置為 1,后來又將其設(shè)置為 2,設(shè)計(jì)出來的圖形不會清晰。為了解決這個(gè)問題,設(shè)計(jì)師不得不重新調(diào)整控制節(jié)點(diǎn),調(diào)整畫筆設(shè)置,使 PaintCode 不會自動重新排列所有控制節(jié)點(diǎn)。

沒有任何調(diào)整,控制節(jié)點(diǎn)將“啪”的與新坐標(biāo)對齊(通過與最近的坐標(biāo)連接)。

按住 Option 鍵,拖動控制節(jié)點(diǎn)在被釋放的時(shí)候,將以半點(diǎn)與網(wǎng)格對齊。

按住 Control 鍵,拖動控制節(jié)點(diǎn)在被釋放的時(shí)候,可以放到任意的位置。

00042

被拖動的控制節(jié)點(diǎn)也會捕捉到其他的控制節(jié)點(diǎn)坐標(biāo),來幫助設(shè)計(jì)師對齊。然而,設(shè)計(jì)師可以按住 Command 鍵來抑制這種行為。

使用鍵盤調(diào)整控制節(jié)點(diǎn)的位置(Adjusting control point position with keyboard)

設(shè)計(jì)師還能夠使用鍵盤來調(diào)整控制節(jié)點(diǎn)的位置。首先,選擇一個(gè)控制節(jié)點(diǎn)并按住不放。然后,按下鍵盤上的方向鍵來移動。默認(rèn)情況下,每次移動一個(gè)點(diǎn)。

設(shè)計(jì)師希望能夠使用鍵盤較快的移動控制節(jié)點(diǎn),可以在使用方向鍵的同時(shí)按住 Shift 不放。這時(shí)候每次移動 10 個(gè)點(diǎn)。當(dāng)然,設(shè)計(jì)師還能夠在是用方向鍵的同時(shí)按住 Option 不放,這樣就能夠每次移動半點(diǎn),這樣就會更加精確了。

通過使用 Command + 左方向鍵 或者 Command + 右方向鍵,設(shè)計(jì)師能夠把當(dāng)前的控制節(jié)點(diǎn)選項(xiàng)切換到臨近的另一個(gè)控制節(jié)點(diǎn)上。

調(diào)整曲線手柄(Adjusting curve handles)

00043

通過拖拽小手柄來調(diào)整曲線。如果控制節(jié)點(diǎn)和兩個(gè)手柄對齊,反對曲線手柄將和你移動的手柄對齊。拖動時(shí)按住 Option 鍵,能夠抑制這種行為。

另一方面,如果控制點(diǎn)和小手柄沒有對齊,拖動小手柄將獨(dú)立運(yùn)行。在這種情況下,按住 Option 鍵,將迫使手柄對齊。

拖動小手柄的同時(shí)按住 Shift 鍵,能夠使曲線手柄水平、垂直以及對角線對齊。

控制曲率(Controlling the curvature)

一個(gè)控制節(jié)點(diǎn)不總是有兩個(gè)曲線手柄。例如,在一個(gè)線條或者折線的情況下,控制節(jié)點(diǎn)沒有任何曲線手柄。設(shè)計(jì)師能夠在任何時(shí)間添加并且移除手柄。

選擇一個(gè)控制節(jié)點(diǎn),按 Delete 或者 Backspace 鍵,就能夠移除控制節(jié)點(diǎn)上的曲線手柄。

為控制節(jié)點(diǎn)添加曲線手柄,從控制節(jié)點(diǎn)的上下文菜單中選擇 圓化節(jié)點(diǎn)(Make Point Round)就可以了。選擇 銳化節(jié)點(diǎn)(Make Point Sharp)選項(xiàng)就能夠刪除曲線手柄了。

00044

00045

00046

關(guān)閉貝塞爾曲線(Closing a bézier)

  • 選擇一個(gè)控制節(jié)點(diǎn)的結(jié)尾
  • 按 Option 或者 Command 或者 Shift 或者 Control 激活擴(kuò)展
  • 點(diǎn)擊此控制節(jié)點(diǎn)的對立面,設(shè)計(jì)師能夠在此控制節(jié)點(diǎn)的對面,看到關(guān)閉貝塞爾曲線的預(yù)覽。

00047

00048

控制節(jié)點(diǎn)上下文菜單(Control point contextual menu)

除了控制彎曲首位的控制節(jié)點(diǎn),控制節(jié)點(diǎn)的上下文菜單還提供給設(shè)計(jì)師一些方便好用的功能,來移除控制節(jié)點(diǎn)、打開路徑、復(fù)制控制節(jié)點(diǎn)甚至反轉(zhuǎn)一個(gè)輪廓的方向。當(dāng)設(shè)計(jì)師使用 PaintCode 生成貝塞爾動畫曲線的時(shí)候,這些都非常有用。

00049

布爾運(yùn)算(Boolean Operations)

PaintCode 支持 3 種布爾運(yùn)算:合并(Union)、保留重合部分(intersection)以及減去上一層圖片(Difference)。這 3 種布爾運(yùn)算使用起來都很簡單。首先,選擇畫布中的兩個(gè)或者多個(gè)圖形。然后,在工具欄種點(diǎn)擊想使用的布爾運(yùn)算方式,或者在菜單欄中使用 選項(xiàng)/合并、選項(xiàng)/保留重合部分 或者 選項(xiàng)/減去上一層圖片。

00050

PaintCode 會生成新的圖形。這個(gè)圖形將帶著原有圖形的外觀設(shè)置(如描邊、填充……)所有原有圖形也將保持不變。

00051

在貝塞爾曲線中應(yīng)用變形(Applying transform to a bézier)

和其他圖形和組一樣,貝塞爾曲線也是能夠被旋轉(zhuǎn)、縮放和調(diào)整位置的。在貝塞爾曲線中,可以在貝塞爾曲線中的控制節(jié)點(diǎn)上應(yīng)用這些變形。這將重新計(jì)算所有貝塞爾曲線的控制節(jié)點(diǎn)的位置,不論是應(yīng)用變形或者移除變形。

00052

已經(jīng)使用變形的貝塞爾曲線:

00053

預(yù)覽(Preview)?

點(diǎn)擊 Command + P,或者從 PaintCode 的菜單中選擇 視圖 ? 預(yù)覽,激活預(yù)覽窗口。

預(yù)覽將展示當(dāng)前畫布中的實(shí)時(shí)畫面預(yù)覽。

通過點(diǎn)擊預(yù)覽中的一點(diǎn),設(shè)計(jì)師能夠確定畫布中特定點(diǎn)的中心。此外,還能夠順暢地,在預(yù)覽視圖中單擊并拖動畫布。

00054

檢查器(Inspector)

設(shè)計(jì)師能夠在檢查器中調(diào)整物體的屬性,尤其是被選中的圖形。檢查器支持多重選擇,所以設(shè)計(jì)師能夠在檢查其中同時(shí)一次編輯多個(gè)圖形。

當(dāng)設(shè)計(jì)師選擇正在繪制的畫布,畫布設(shè)置會在檢查器中展示出來。

00055

重命名圖層(Renaming a shape)

每一個(gè)圖形都有一個(gè)命名,并且這個(gè)命名能夠在檢查器中編輯。PaintCode 會為設(shè)計(jì)師自動生成這些明明,但是設(shè)計(jì)師可以根據(jù)需要隨時(shí)為圖層重命名。新的命名會應(yīng)用到圖形代碼生成。

檢查器盒子(Inspector Boxes)

一些檢查器盒子能夠展開和折疊。折疊設(shè)計(jì)師暫時(shí)不需要的盒子,使設(shè)計(jì)師的注意力集中在檢查器中圖層的屬性,這對設(shè)計(jì)師來說非常重要。

00056

用過點(diǎn)擊檢查器盒子的頂部,能夠非常容易的展開和折疊檢查器盒子。

00057

注意,當(dāng)設(shè)計(jì)師展開檢查器盒子的時(shí)候,設(shè)計(jì)師正在繪制畫布的用戶界面會發(fā)生變化。例如,當(dāng)設(shè)計(jì)師展開檢查器盒子的時(shí)候,有關(guān)(旋轉(zhuǎn)和縮放)的變形原點(diǎn)是唯一可見的。同樣的,當(dāng)填充盒子打開的時(shí)候,調(diào)整的兩點(diǎn)以及圓形漸變也是唯一可見的。

PaintCode 用戶操作指南系列文章

PaintCode 用戶操作指南(概述篇)

PaintCode 用戶操作指南(庫篇)

PaintCode 用戶操作指南(繪制篇)

PaintCode 用戶操作指南(畫布和選項(xiàng)卡)

PaintCode 用戶操作指南(樣式表和代碼生成)

PaintCode 用戶操作指南(變量篇)

PaintCode 用戶操作指南(動態(tài)圖形篇)

PaintCode 用戶操作指南(符號篇)

文章已經(jīng)完結(jié),敬請期待下一部《Sketch 3用戶操作指南及實(shí)戰(zhàn)案例全解》

 

本作品由人人都是產(chǎn)品經(jīng)理特邀專欄作家@鄭幾塊 翻譯并獨(dú)家授權(quán)發(fā)布,未經(jīng)許可禁止轉(zhuǎn)載

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 牛逼,英文這么好!

    來自廣東 回復(fù)