起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識PaintCode 用戶操作指南（畫布和選項卡）
使用選項卡（Working with Tabs）
設計師能夠使用選項卡管理正在設計的 PaintCode 文檔。每個選項卡包含多個正在設計的畫布。
第一個選項卡——稱為樣式表，它非常特別并且提供給設計師通向樣式表的目錄——一個集繪制、顏色、漸變以及其他設計資源的庫，設計師能夠輕易的導出單獨的 Objective-C，Swift 以及C# 的類。樣式表使設計師在項目中，集中生成代碼變得十分簡單。
管理選項卡（Managing Tabs）
單擊前一選項卡后面的 + 圖標，就能夠添加一個新的選項卡。
把鼠標懸停在選項卡上，就會出現 X 圖標，點擊它，就能夠移除一個選項卡。
設計師通過拖拽，能夠輕易的重新排列選項卡。
注意，樣式表選項卡總是在第一個，并且不能被移除或者重新排列。當設計師的文檔中有許多選項卡，不能在選項卡類表中顯示的時候，這時候后面的選項卡就會顯示為 …。一個上下文菜單就會顯示出來，并把隱藏的選項卡列出來。
重命名選項卡（Renaming Tabs）
設計師可以通過雙擊選項卡來重命名?；蛘?，設計師可以徐小所有畫布上的工作，在這種情況下，檢查器中會出示給設計師一個文本框，顯示正在編輯的選項卡的名字。
使用畫布（Working with Canvases?）
畫布是設計師用來創建設計的區域，每個畫布生成一個獨立的繪制方法。
移動畫布（Moving Canvases）
單擊并拖動畫布的標題，就能夠在涉及區域中移動畫布。每一個畫布的標題先是在畫布的頂部，在中間位置。
調整畫布大小（Resizing Canvases）
首先，點擊畫布的標題來選擇畫布。然后，設計師使用光標拖拽畫布的邊緣來調整畫布大小。
或者，設計師可以在檢查器中設置畫布大小的數值。
添加畫布（Adding Canvases）
在 PaintCode 中，設計師在同一個選項卡中能夠擁有多個畫布。設計師通過菜單中的 畫布 ? 新建 ? 默認，或者按 Shift + Command + N，新建畫布。
又或者，設計師能夠在選項卡空白區域，激活上下文菜單，然后選擇新建畫布：
移除畫布（Removing Canvases）
在工作區中單擊畫布的標題，然后點擊 Delete 或者 Backspace，來移除畫布。
縮放畫布（Zooming the Canvas）
- 點擊 Command + +，放大畫布
- 點擊 Command + -，縮小畫布
或者，設計師能夠使用 Mac 的手觸板來縮放畫布?；蛘甙醋?Option 鍵不放，使用兩個手指滑動 Mac 的手觸板（或者是滾動鼠標滾軸）來縮放畫布。這種方法取決于鼠標位置，因此設計師能夠對畫布的任意位置進行縮放。
當然，設計師還能夠使用中間工具欄中的縮放控制：
在畫布上移動（Moving around the Canvas）
設計師能夠使用滾動條或兩個手指滑動，移動畫布。還可以按住空格鍵并單擊和拖動鼠標來移動畫布。
此外，還可以在畫布上使用預覽。如果點擊預覽圖上的一些點，畫布會自動選擇以此為中心。此外，設計師能夠單擊并拖動預覽來平滑的移動畫布。
畫布顯示模式（Canvas Display Modes）
PaintCode 提供了三種不同的模式：
- 非視網膜模式（non-Retina mode）
- 視網膜模式（Retina mode）
- 無限模式（Infinite mode）
設計師可以在中間的工具欄中選擇這些模式。也可以使用 Option + D 快捷鍵，在這三種模式中進行切換。
非視網膜模式顯示設計師的設計開起來和非視網膜模式顯示器（大多數 Mac 下）很像。視網膜模式是雙倍密度。設計師的設計將在視網膜模式顯示器下展示（大多數 iOS 設備下）。最后，無限精度模式下，預覽設計師的設計，不管放大多少，設計都不會失真。
畫布上顯示模式的重要性（On the importance of Canvas Display Modes）
在畫布上顯示模式，不會以任何方式影響生成的代碼。生成的代碼都是獨立的，在任何顯示器上都是完美的。PaintCode 設計這些模式主要是為了幫助設計師在設計過程中使用。
當設計師調整設計為非視網膜模式像素網格，設計師能夠 100% 肯定，即便是在高像素密度的顯示器下，設計也會保持鋒利（對齊到像素網格）。另一方面，如果設計師使用視網膜模式或者無限模式，可能會出在視網膜顯示器下也比較清晰的設計，但在非視網膜設備上會是模糊的。
因此，設計師應該使用非視網膜模式為默認模式，只是偶爾切換到視網膜模式或者無限模式上，來檢查設計在高像素密度情況下的顯示情況就可以了。
畫布設置（Canvas Settings）
畫布設置（Canvas Setting）
點擊工作區中畫布的標題，來設置畫布?；蛘撸趫D形和組瀏覽器中點擊畫布，也能夠開啟畫布設置。
在檢查器中將現實畫布設置各項：
命名畫布（Naming Canvas）
使用頂部的文本域，設計師能夠修改畫布的命名。新的命名作為生成繪圖方法的名稱，也能夠用在輸出畫布的圖像上。
調整畫布大小（Changing Canvas Size）
在相應的文本域輸入所需要的尺寸，來調整畫布的大小。或者，設計師也能夠通過拖動工作區中的畫布邊緣調整畫布大小。注意，這在沒有選定畫布中的圖形情況下，此能適用。
調整樣式表設置（Changing StyleKit Setting）
適用樣式表彈出按鈕，設計師能夠調整畫布的樣式表代碼生成設置。最重要的事，設計師能夠選擇畫布，是否要生成代碼：
- 沒有任何方法
- 一個簡單（無效）的繪制方法
- 一個生成圖像的方法（UIImage 或者 NSImage）
- 以上兩者
當設計師選擇畫布，并生成一個返回圖像的方法，當設計師的目標是 iOS 的時候，將出現更多的設置。這些設置允許設計師定義生成圖像的內部設置以及（如果需要的話）圖像的渲染模式。
設計師也可以設置選擇器，這個選擇器是添加的 IBOutletCollection，并由圖像方法生成的。
調整畫布背景色（Changing Canvas background color）
單擊顏色窗口，來調整畫布背景色。注意畫布背景色并不和生成的源代碼相關聯。
還有，當設計師導出圖像為 TIFF，PDF 或者 PNG 格式的時候，顏色才會被使用。想要把導出的圖像設置為透明背景，將畫布背景設置為無，或者在導出的時候關閉 導出背景 檢查項。
調整畫布背景圖像（Changing canvas background image）
首先，確保選中圖像顯示器復選框。然后，拖放所需要的圖像到圖像顯示器。還可以使用下方的空間來設置畫布的必經圖像。
顯示／隱藏網格并調整網格顏色（Showing／Hiding the grid and changing its color）
在畫布設置中，使用 網格 復選框來控制 顯示／隱藏 畫布網格。或者使用 Option + G 快捷鍵組合。
PaintCode 自動調整網格的顏色來適應畫布背景色。設計師可以設置網格的顏色，單擊顏色編輯器就可以了。
畫布引導（Canvas Guides）
最后一項畫布設置允許設計師開啟一個正在建設的圖像的引導：
- iOS 7 圖標網格布局引導
- 列布局引導
- 行布局引導
- 列和行的布局引導
圖標網格（在 iOS 7 中介紹）在設計 iOS 應用程序圖標的時候是非常有用的。
行和列布局引導，能夠讓設計師按照指定的列／行大小設計，并且能夠根據布局網格來方便的進行復雜的設計。例如，這個網站就是使用 PaintCode 布局網格進行設計的。
PaintCode 用戶操作指南系列文章
文章已經完結，敬請期待下一部《Sketch 3用戶操作指南及實戰案例全解》
本作品由人人都是產品經理特邀專欄作家@鄭幾塊 翻譯并獨家授權發布，未經許可禁止轉載
- 目前還沒評論，等你發揮！
