【譯文】使用Sketch設計一款真實的計時碼錶

【原文】Designing A Realistic Chronograph Watch In Sketch

An old advertisement (1962) for the Heuer Autavia chronograph.

這款手錶因爲它的簡潔而優雅的設計，內置計時碼錶機制和旋轉表圈,便於查看時間，而迅速成爲一款極具表明性的手錶。它還有一個漂亮的「panda style」：淺色錶盤，帶有三個黑色小錶盤。你能夠在 Google或 百度上搜索查看它的相關參考圖片。

本教程相關文件

爲了可以更好地按照本教程中的步驟操做，請下載Autavia.sketch可編輯文件。此文件能夠幫助你更輕鬆地跟隨教程步驟進行操做。可是，我仍是鼓勵您新建空文件來跟隨教程進行操做。但願你能喜歡。

The completed Heuer Autavia, using 100% vectors in Sketch.

設置畫板

第一步是建立一個名爲Autavia的新文檔,並設置具備相同名稱，1400px寬1600px高的新畫板，位置爲 0 (X) and 0 (Y)。爲了讓全部元素更容易對齊先讓咱們設置一些參考線吧。首先，使用Ctrl + R顯示標尺，而後點擊頂部標尺，在畫板的中心添加一個豎直方向參考線，並對左邊標尺的水平向上導執行相同操做。將鼠標懸停在標尺上時按Shift鍵將以10像素爲單位增長，從而能夠更輕鬆地精確設置參考線。爲了確保正確放置參考線，您還能夠在將鼠標懸停在標尺上來查看指南的位置：垂直參考線爲700像素位置，水平參考線爲800像素位置。

讓咱們進入正題吧

錶殼的底座是一個簡單的圓圈。按鍵盤上的O切換到橢圓工具，而後從參考線的交叉處（即畫板的中心）繪製一個直徑950px的圓(按住shift+alt)。

如今讓咱們開始建立表耳。按鍵盤上的V選擇矢量工具，而後繪製以下圖所示的形狀。

複製（Cmd + D）此形狀，並進行水平翻轉（Flip Horizontally），按住Alt鍵並使用鼠標水平移動到以垂直參考線相對稱的位置，以下圖所示。使用方向鍵調整位置使得兩個表耳水平和垂直方向距離中心點的距離相同。

複製這兩個形狀，垂直翻轉（Flip Vertically），並將它們移動到圓的底部，以下圖所示。按住Alt鍵，使用鼠標垂直移動到以水平參考線對稱的位置，並使用方向微調直到兩個表耳的位置在水平和垂直方向上距離中心點的位置都相同，就像頂部兩個表耳那樣。

如今，選擇全部形狀包括圓形，而後使用頂部工具欄中的Union操做將它們合併爲一個形狀;並將改形狀的名稱設置爲case。複製此形狀，由於咱們稍後將使用它來添加紋理，並經過單擊圖層面板中圖層名稱旁邊的眼睛圖標來隱藏它。

是時候爲咱們的錶殼添加一些樣式了，咱們將賦予它金屬外觀。關閉描邊Borders，而後單擊填充Fill，選擇線性漸變Linear Gradient，而後添加漸變。能夠經過直接單擊形狀上的漸變線來添加顏色步驟。漸變屬性從上到下：

1. #4B4B4B
2. #5F5F5F
3. #BEBEBE
4. #FFFFFF
5. #B5B5B5
6. #787878
7. #E4E4E4
8. #F0F0F0
9. #787878
10. #B5B5B5
11. #FFFFFF
12. #C4C4C4
13. #4B4B4B
14. #4B4B4B

使用矢量工具Vector tool（V），從內側在每一個凸耳上繪製四個三角形，以增長外殼的深度。 對於顏色，請使用＃545454，而後關閉描邊。 使用下面的圖像做爲參考。

讓咱們將這些三角形融合進case。選擇case形狀和全部四個三角形，而後單擊頂部工具欄中的「蒙版Mask」。此mask操做的結果將自動放置在「圖層layer」列表中的新組中。將此組的名稱更改成case。

還記得咱們的錶殼形狀的副本嗎？取消隱藏它，並將其移動到case組中，做爲頂層。單擊「 填充Fill」並選擇「 噪點填充 Noise Fill」，將「 強度Intensity」設置爲15％，而後應用「 運動模糊Motion Blur」，數量爲20px，以建立拉絲金屬紋理。

表蓋擋板

讓咱們繼續,開始製做擋板。表圈由兩個環組成：外部帶有齒狀邊緣，黑色內部帶有數字和分鐘標記。

齒狀外環

首先，咱們將建立一個帶齒形邊緣的外圈。從畫板中心畫一個圓圈，直徑爲950px。並關閉描邊。

要建立齒形邊緣，首先使用菜單欄中的「插入Insert」→「形狀Shape」中的「三角形triangle」建立一個10px×8px的小三角形。單擊「檢查器Inspector」面板中的「中心對齊Center Align」圖標，將三角形與畫板中心和圓形對齊（由於全部內容都位於畫板的中心），並確保其下側與圓形重疊，而後轉動邊界。

咱們須要讓那些三角形圍繞圓圈，而且手動建立和旋轉每一個三角形將是很是耗時（而且複雜！）的任務。對咱們來講幸運的是， 旋轉拷貝Rotate Copies - 一個能夠同時作到這一點的牛逼功能。所以，選擇三角形，而後從菜單欄中的「 圖層Layer」→「 路徑Paths」中選擇「 旋轉拷貝Rotate Copies」。使用如下對話框能夠定義要生成的所選元素的其餘副本數。輸入259;因此，總的來講，咱們將在圓圈周圍有260個三角形，這些三角形將成爲齒形邊緣。輸入此值並確認對話框後，將顯示全部三角形和中間的圓形指示器。

注意：執行此步驟很是佔用CPU和內存。若是您正在使用較好教新PC設備，您可能不會遇到任何問題;但若是您的Mac有點老，那麼您的處理過程可能會有所不一樣。一般，在處理大量副本時，請嘗**」關閉描邊turn off borders**以免卡住並更快地實現操做結果。

將指示器向下移動直到它位於參考線的交叉處 - 到此！咱們在圓圈周圍有260個三角形。請注意，若是您錯過將圓形指示器（旋轉中心）放在參考線的交叉處，三角形將沒法完美地放置在圓形周圍，當你點擊畫布上的任何其餘地方時您將沒法當即改變它們的位置;可是在選擇相關的布爾組後仍然能夠更改單個元素。

性能提示：或者，您能夠分兩步執行此步驟，這對於Mac來講將是一個CPU密集度較低的任務。首先，輸入129做爲附加副本;因此，總的來講，圓圈周圍會有130個三角形。向下移動指示器，直到它位於導軌的交叉點。其次，複製（Cmd + D）此形狀，而後使用頂部工具欄中的「旋轉Rotate」將其旋轉4度。最後，選擇兩個形狀並使用頂部工具欄中的Union將它們合併爲一個。

如今，進入這個布爾組並擦除除頂部中央和左側和右側六個以外的全部三角形。

再次使用旋轉拷貝Rotate Copies，但此次咱們須要另外11份副本。將圓形指示器對準參考線的交叉點。

選擇生成的布爾組和圓，而後執行聯合Union操做。將生成的對象命名爲outer bezel（外框），並應用如下樣式。

首先，漸變填充Gradient fill：

1. #C6C6C6
2. #CFCFCF
3. #EFEFF2
4. #E7E7E7
5. #FFFFFF
6. #E7E7E7
7. #D2D3D5
8. #CBCBCB
9. #CBCBCB
10. #BCBCBC

咱們如今將使用內陰影和陰影使其看起來略微凸起。

讓咱們添加一個光亮的內陰影Inner Shadows效果，設置如下屬性的：

• Color: #FFFFFF
• Alpha: 50%
• X: 1; Y: 1; Blur: 2; Spread: 1

而後,添加一個暗色的內陰影Inner Shadows效果：

• Color: #FFFFFF
• Alpha: 10%
• X: -1; Y: -1; Blur: 2; Spread: 1

最後，設置投影Shadows效果：

• Color: #FFFFFF
• Alpha: 50%
• X: 0; Y: 0; Blur: 4; Spread: 1

這就是如今應用全部樣式時外框的外觀。

爲了使它成爲一個環，咱們須要在中間打洞。在畫板中間畫一個直徑爲780px的圓圈，選擇「外框outer bezel」和這個圓圈，而後從頂部工具欄中簡單地應用「減去Subtract」操做。將生成的外形命名爲外圈（outer ring）。

黑色內圈

對於內圈，首先從中心畫一個圓，直徑爲930px。添加厚度（Thickness ） 爲1且 顏色（Color）設置爲＃313131的外邊框（Outside border）。

接下來，將「填充Fill 」更改成「角度漸變Angular Gradient」，並使用如下參數調整漸變：

1. #303030
2. #343434
3. #282828
4. #484848
5. #292929
6. #333333
7. #282828
8. #343434

爲了讓它看上去有點3D立體感受，須要添加內陰影Inner Shadows，顏色Color設置爲#FFFFFF，格式爲30％alpha。將Blur設置爲4，Spread爲2，X和Y位置均爲0.而後應用Shadows，使其看起來有點凸起。將顏色Color設置爲＃000000，50％alpha，Blur和Spread爲1，X和Y位置設置爲0.將此形狀設置名稱設爲inner bezel（內邊框）

咱們的內圈有兩個刻度：分鐘和小時刻度。讓咱們先處理分鐘刻度。分鐘刻度由五分鐘間隔的分鐘標記和數字組成。咱們將使用圓圈做爲分鐘標記。所以，繪製一個直徑爲16px的圓，將顏色Color設置爲#FDFDFE，而後關閉邊框borders。將其從內圈的外邊緣移開48px。按住Alt鍵，用鼠標指向圓圈，而後使用方向鍵從新定位形狀，直到間距正確爲止。使用「檢查器Inspector」面板中的「中心對齊Center Align」將其居中到畫板和內圈。

咱們實際上還須要59個這樣的刻度標記，所以請轉到圖層Layer→路徑Paths，選擇旋轉拷貝Rotate Copies，在對話框中輸入59，單擊肯定OK，而後將圓形指示符與參考線交點對齊。將生成的形狀重命名爲minute marks（分鐘標記），並從頂部中間標記開始每五個標記刪除一個標記。

讓咱們在這些五分鐘間隔位置添加分鐘數字。不幸的是，咱們不能使用「旋轉拷貝Rotate Copies」來分發文本圖層，所以咱們須要手動定位它們。對於數字，咱們將使用谷歌的略微圓潤的Rubik字體系列。在頂部添加「60」，字體大小爲49，中等Medium weight，居中對齊和#FDFDFE填充Fill。將其移動距離內圈inner ring的外邊緣20px，並將其水平居中於inner ring（內圈）。如今，經過按鍵盤上的Cmd + D複製此數字，而後從頂部工具欄中選擇「旋轉Rotate」。由於咱們須要圍繞畫板中心旋轉數字，因此單擊並將十字準線標記拖動到參考線的交叉點，而後將其旋轉30度。不要取消選擇一個接一個地繼續複製和旋轉每一個數字。這樣，錨將保持 在中間，你沒必要每次都移動它。

最後，逐個編輯數字，並將數字更改成相應的分鐘標記。

接下來，在分鐘刻度上方添加小時刻度。首先，複製數字「60」，將字體大小更改成26，將數字更改成12，而後使用方向鍵將其向上移動，使其距離內環的外邊緣1px。如今，使用上述方法，添加剩餘的小時數。

讓咱們經過在12小時位置添加一個三角形來完成inner ring內圈標記。首先，從兩個刻度中刪除「60」和「12」數字，從「插入Insert 」→「形狀Shape」中選擇「三角形Triangle 」工具，而後繪製一個60px乘65px的三角形。將其移離inner ring內圈的外緣5px，並將其水平居中於inner ring內圈。對於顏色，使用咱們用於標記和數字的相同顏色 - #FDFDFE - 並關閉描邊border。

咱們還須要在中間建立一個洞，就像咱們爲outer ring外圈作的那樣，讓它看起來像真正的環。所以，在畫板中間畫一個直徑爲780px的圓，選擇inner bezel（內邊框）和剛建立的圓，而後從頂部工具欄執行減法Subtract操做。將生成的形狀命名爲inner ring（內環）。

選擇全部擋板層，而後將它們放置在組rotating bezel（旋轉擋板）內。

錶盤

是時候開始繪製錶盤了。首先，咱們將建立錶盤的外圈。

切換到橢圓Oval 工具（O），並在畫板中間建立一個直徑爲768px的圓。將填充色Fill設置爲#CCCCCC，並添加一個Outside描邊，厚度Thickness 爲4px，顏色Color設置爲＃D9D9D9。此外，應用內陰影Inner Shadows，顏色Color設置爲＃000000，透明度alpha50％，模糊Blur設置爲10.將此形狀盤命名爲outer dial（外表盤）。

對於錶盤底部，在畫板中間建立一個圓，直徑爲706px，填充Fill設置爲＃FAFBF9，外描邊Outside border 的厚度Thickness 爲4px，顏色Color爲＃D9D9D9。添加內陰影Inner Shadows，顏色Color設置爲＃000000，透明度alpha50％和模糊Blur爲6。將此形狀名稱設置爲inner dial（內錶盤）。

五分之一秒刻度

咱們將增長五分之一秒的刻度，這意味着300個小刻度標記應該排列在錶盤的外緣。建立一個寬度爲2px且高度爲18px的矩形，填充Fill設置爲＃050B05並關閉描邊border。（關閉描邊border將有助於避免Mac卡頓死機。）

將矩形水平居中放置在內部刻度盤上，並將其移動到距離inner dial（內錶盤）的外邊緣19px的位置。咱們將再次使用「旋轉拷貝Rotate Copies」來建立刻度標記。打開菜單圖層Layer→路徑Paths，選擇旋轉拷貝Rotate Copies，在對話框中輸入299，單擊肯定，而後將圓形指示符與參考線的交點對齊。最後將形狀重命名爲one-fifth of a second scale（五分之一秒）。

60秒標記

接下來，咱們將添加60秒的標記。這些標記與「五分之一秒」標記相同但更長。所以，建立與上一步驟徹底相同的矩形，但將其設置爲36px高，並以相同的方式定位（從外邊緣19px並水平對齊到內部刻度盤）。打開「旋轉拷貝Rotate Copies」，在對話框中輸入59，單擊「肯定OK」，而後將圓形指示符與參考線的交點對齊。

咱們在小時位置不須要標記，因此咱們必須刪除每隔五個標記，從12:00位置開始。您還可使用旋轉擋板rotating bezel做爲要刪除標記的參考。

將生成的形狀重命名爲60 seconds markings（60秒標記）。

五分鐘標記

如今讓咱們添加分鐘標記。建立一個寬度爲4像素，高度爲18像素的矩形，填充Fill設置爲＃050B05並關閉描邊Border。將其水平放置在inner dial（內錶盤）上，並將其從inner dial（內錶盤）的外邊緣移開19px。由於咱們總共須要12小時標記，請轉到「旋轉拷貝Rotate Copies」，在對話框中輸入11，單擊「肯定OK」，而後將圓形指示符與參考線的交點對齊。將此形狀命名爲5-minute markings（5分鐘標記）。

15分鐘標記

對於15分鐘的標記，咱們將使用圓圈。畫一個直徑爲16px的圓圈，將其與inner dial（內錶盤）水平對齊，而後將其移動距離頂部20px。將其填充Fill設置爲＃E5BF8E，並將顏色Color設置爲＃000000的陰影Shadows 添加到50％透明度alpha，將模糊Blur設置爲2，將Spread設置爲1。

使用「旋轉拷貝Rotate Copies」可在四分之一小時位置添加圓圈。最後，刪除12:00位置的那個。將此形狀重命名爲15 minute markings（15分鐘標記）。

小時標記

在此步驟中，咱們將建立小時標記。選擇矩形工具Rectangle（R），並建立一個寬度爲30px，高度爲70px的矩形，填充Fill設置爲＃E7E7E7。添加外描邊Outside border，厚度Thickness 爲3px，顏色Color設置爲#FFFFFF。將其定位在12:00，並將其移動距離inner dial（內錶盤）的外邊緣43px。應用內陰影Inner Shadows，顏色Color設置爲＃000000，30％透明度alpha和模糊Blur爲5，陰影Shadows 顏色徹底相同，模糊Blur爲2，Spread 爲1，使其從inner dial（內錶盤）略微凸起。這將是小時標記的基礎。

咱們須要在頂部和底部添加兩個較小的矩形來完成小時標記。最簡單的方法是複製（Cmd + D）矩形，關閉描邊和陰影，將高度更改成16px，將填充Fill更改成＃E5BF8E，並更改內陰影Inner Shadows ，使顏色Color如今設置爲#FFFFFF 60％透明度alpha，Y爲1，模糊Blur爲2。

還要在底部添加一個矩形，請複製咱們剛剛建立的矩形，垂直翻轉Flip Vertically，將填充Fill更改成＃393F3B，並將其對齊到底部的底部，選擇這兩個矩形，右鍵單擊，而後選擇**「對齊」底部Align Bottom**。最後，選擇全部三個矩形，並使用Cmd + G將建立組爲hour mark小時標記。

複製hour mark小時標記組並經過右鍵單擊並選擇「 建立符號Create Symbol」將副本轉換爲符號。將此符號命名爲hour-mark（小時標記）。如今咱們須要在錶盤周圍分配小時標記符號。選擇小時標記符號，從頂部工具欄中選擇「 旋轉Rotate 」，將十字準線標記拖動到畫板的中心（參考線的交點），而後將其旋轉到1:00（30度）的位置。不要取消選擇繼續複製和旋轉小時標記符號（以30度爲增量）。最後，刪除3：00,6：00和9:00位置的hour-mark（小時標記符號），由於咱們不須要它們。

12:00的小時標記須要有點不一樣，它應該包含兩個較窄的小時標記。這就是咱們保留原始hour mark（小時標記組）的緣由！咱們將簡單地修改現有的小時標記，方法是選擇hour mark（小時標記組）內的全部三個形狀，並將寬度從右側的檢查器面板更改成20px。接下來，複製該組，使用箭頭鍵將其向右移動9px;而後，選擇兩個組，並將它們放在一個名爲12-hour mark（12小時標記）的新組中;將它們與內部錶盤水平對齊。最後，選擇全部小時標記並將它們放入hours（小時）組。

請注意，也可使用 Symbol符號來完成相同的操做，由於它們能夠在保持內部間距不變的狀況下調整大小。

小錶盤Subdials

小錶盤提供主錶盤未提供的信息，它們是計時碼錶的常見功能。計時碼錶使用小錶盤來記錄秒數和通過的分鐘和小時數。在這一步中，咱們將建立三個小錶盤：一個的秒錶盤，一個30分鐘的計數器和一個12小時的計數器。

兩個小錶盤

該子錶盤顯示連續運行的秒數。讓咱們從畫板中心（即參考線的交點）畫一個圓，直徑Radius爲204px。填充Fill顏色Color爲#424242, 添加厚度Thickness爲1且顏色Color設置爲＃424242的中心描邊Center border。應用內陰影Inner Shadows，將顏色Color設置爲＃00000（60％透明度alpha），模糊Blur設置爲20，使其看起來像是插入主撥盤中。將此形狀命名爲subdial base。

如今讓咱們添加刻度標記。首先，咱們將添加一些小的秒標記。建立一個寬度爲4像素，高度爲25像素的白色矩形，並關閉描邊border。將其水平對齊到subdial base，並將其放置在距離subdial base頂部5px的位置。使用「旋轉拷貝Rotate Copies」建立12等分標記。那麼這個秒錶小錶盤每五秒間隔就有小標記，因此咱們須要每間隔5秒刪除一個標記，從頂部標記開始（在60秒位置）開始刪除。

接下來，咱們須要在60,20和40位置添加一些更粗點的標記。建立一個像前一個同樣的矩形，但要使其寬一點：寬度爲6px，高度爲25px，位置相同。打開「旋轉拷貝Rotate Copies」並建立三等分標記。

讓咱們在10,30和50個位置添加剩下的三個標記。建立一個像前一個同樣的矩形，但要使其長一點，寬度爲6px，高度爲35px，並將其定位在距subdial base底部5px處。打開「旋轉拷貝Rotate Copies」並建立三等分標記。

如今，咱們須要在子錶盤中添加數字。在頂部添加60;對於字體，再次使用Rubik，字體大小爲26，常規權重Regular weight，居中Center對齊和#FFFFFF填充Fill。將它移離subdial base的外邊緣30px，並使其水平居中。

複製此數字。從頂部工具欄中選擇「旋轉Rotate 」，將十字準線標記拖動到參考線的交點，將其旋轉Rotate120度，而後將數字更改成20.但咱們不但願以這種方式旋轉數字;它應保持正常，如60顯示的那樣.要作到這一點，請在右側的檢查器面板中將變換Transform設置爲0。如今，使用方向鍵移動數字標記，使其向左移動6px（按左箭頭鍵六次）。

使用相同的方法，在40秒位置添加數字40，但此次將數字6px向右移動。

讓咱們爲小錶盤添加一個小錶針。首先，從畫板中間畫一個白色圓圈，直徑爲30像素，關閉描邊。而後，繪製一個白色的6px乘68px矩形，並水平對齊Align Horizontally咱們剛剛建立的圓，確保它們重疊。選擇兩個形狀並執行Union操做以建立一個對象。添加陰影Shadows ，顏色Color設置爲＃000000，其中70％透明度alpha，模糊Blur設置爲8，Spread爲2。

在頂部建立一個小圓圈，直徑爲12px。將填充Fill設置爲＃A3A3A3，關閉描邊border，並添加50％透明度alpha和模糊Blur爲2的黑陰影Shadows 。如今複製此圓圈，關閉陰影Shadows ，將填充Fill更改成＃353535，並將其縮小到50％。這兩個圓圈表明將錶針固定在小錶盤上的小螺釘。將錶針的全部形狀分組，並命名此組爲hand。

選擇咱們用於建立子錶盤的全部形狀，並將它們分組到subdial組中。咱們將使用該組做爲基礎來建立全部三個小錶盤。

如今，複製該組並將其重命名爲active second subdial，而後將其移動到9:00位置。使用向左箭頭鍵，將子表格向左移動，直到距離inner dial（內錶盤）的左邊緣55px。在active second subdial的中心（504px）添加垂直參考線。這將有助於咱們調整手的位置。使用簡單的數學運算來肯定垂直中心的位置：子錶盤的直徑爲204，所以半徑爲102px - 只需將102px添加到右側檢查器面板中的當前X位置。

30分鐘計時

此子錶盤用於記錄超過一分鐘（持續時間長達30分鐘）的事件，並將其放置在錶盤的右側，位於3:00位置。

咱們將使用subdial組做爲此基礎的基礎，所以複製subdial組，將其重命名爲「30 minute counter」並稍微改變它。刪除小標記刻度。以與上面相同的方式建立一個新的，但有30個標記。進入這個新的比例並刪除與粗體標記位於相同位置的標記，而後將數字更改成30,10和20.將此子表單向右移動，直到它距離inner dial（內錶盤）的右邊緣55px，而且而後在中心添加垂直參考線（896px）。使用下面的圖像做爲參考。

12小時計時

此子錶盤用於記錄超過30分鐘（最多12小時）的事件，而且它位於錶盤的底部，位於6:00位置。

咱們將使用剩餘的subdial組來建立12小時計數器。此計數器以半小時爲間隔具備較小的標記，這意味着咱們在圓圈周圍有24個這樣的標記，而且在小時位置有更長的標記，這意味着在圓周圍有12個這些標記。

旋轉拷貝Rotate Copies將再次幫助咱們建立這些標記。對於半小時標記，使用大小爲4px乘15px的矩形，對於小時標記，使用更長且更粗的矩形，6px乘25px。請記住刪除與小時標記處於同一位置的那些半小時標記，由於不須要同時存在這兩個標記。另外，在錶針下方12px位置添加一個小標題內容爲「Swiss T」，使用尺寸設置爲10px，顏色爲白色，Rubik Medium字體，中心Center對齊線和10的間距線Line。

完成後，將組名更改成12 hour counter，將其移動到6:00位置，距內部刻度盤底邊55px，並在中心添加水平參考線（996px）。使用下面的圖像做爲參考。

咱們的小錶盤已就位，若是須要，咱們能夠爲每一個小錶盤設置時間。只需選擇組hand，從頂部工具欄中選擇「旋轉Rotate 」，將十字準線拖動到參考線的交點，而後執行旋轉。

完成錶盤

是時候在錶盤上放置品牌LOGO了。跳轉至Wikimedia Commons並以SVG格式下載 Heuer LOGO。這是LOGO的當前版本;咱們須要對它進行一些修改，由於咱們是用舊版LOGO從新繪製手錶。

在Sketch中打開LOGO，並刪除除了包含Heuer一詞的紅色矩形之外的全部內容。首先，將字母的顏色更改成＃2E2E2E。而後，選擇矩形，關閉填充Fill並添加描邊Borders，將位置Position 設置爲外描邊Outside border，將顏色Color設置爲＃2E2E2E。將組的名稱更改成Heuer logo。

將修改過的LOGO帶入咱們的設計中。切換到頂部工具欄中的「縮放Scale 」工具，而後在對話框中輸入高度height 字段中的50px，以調整Logo的大小。比例功能將自動計算任何給定高度的正確寬度。將LOGO與inner dial（內錶盤）水平對齊，並將其放置在距離頂部200px的位置。再次選擇包含刻字的矩形，並將邊框厚度Thickness 設置爲3。

讓咱們在LOGO上方添加手錶名稱。下載Walkway Expand字體系列（它是免費的），只安裝「Walkway Extend Black」字體，而後輸入「Autavia」字樣。將它放在LOGO上方3px處，並將其與LOGO水平對齊。將「大小Size 」設置爲24px，將「字符間距spacing Character」設置爲2，將「**線Line **」設置爲「24」，將「顏色Color」設置爲＃2E2E2E（與LOGO使用的相同）。

接下來，經過右鍵單擊並選擇「轉換爲輪廓Convert to Outlines」，將文本轉換爲矢量形狀。而後，稍微修改「A」，使其看起來與老式Heuer手錶中的原始「A」類似。選擇生成的矢量形狀，按Enter進入矢量點模式，放大到足夠近（我放大到800％）並選擇字母「A」的左上角，而後向左移動1px。而後，選擇右上角，並向右移動1px。以後，選擇字母內部的小三角形，在側線上的任意位置添加一個點，而後將其向上拖動，直到它與中間點處於同一水平（將出現水平紅線）。經過向左和向右拖動它們來調整位置，而後從新調整其餘點的位置以在傾斜線上造成均勻的寬度。使用下面的圖像做爲參考。

對剩下的「A」字母作一樣的操做。

要完成錶盤，咱們還須要作一件事：將one-fifth of a second scale（五分之一刻度）加到outer dial（外表盤）上。這是形狀和組的正確命名有用的地方。在左側的「圖層Layers 」面板中，找到one-fifth of a second scale並複製它。找到outer dial形狀並將其粘貼。咱們須要放大它，由於它比外部錶盤小。選擇「縮放Scale 」功能，並將其縮放至114％。如今它應該在outer dial（外表盤）內，正好在咱們想要的地方！

應用數量Amount爲2px的高斯模糊Gaussian Blur，並將不透明度Opacity 下降至40％。只是爲了確保刻度不超過outer dial外表盤，選擇兩個形狀並從頂部工具欄執行「蒙版Mask 」操做。Sketch會將結果自動放入一個組中。爲此結果組設置名稱outer dial finished。

性能提示：高斯模糊處理比較消耗CPU和內存性能。我注意到若是打開顯示像素Show Pixels，Sketch的性能會更好。能夠經過轉到視圖View→畫布Canvas →顯示像素Show Pixels或使用Ctrl + P快捷鍵啓用此設置。考慮到繪圖的複雜程度，按期保存和從新啓動Sketch彷佛對提升性能也有所幫助。

錶針

是時候開始製做錶針了。咱們須要建立時針，分針和大秒針（這是秒錶的一部分）。

時針

讓咱們從時針開始，由於它在物理上最靠近錶盤。相似於製做小錶盤的錶針，這隻錶針也將由圓形和矩形制成。放大一點，在inner dial（內錶盤）的中間建立一個圓，直徑爲58px。而後，在inner dial的中間添加一個矩形，尺寸爲30px×246px。矩形應距離inner dial頂部150px。

確保仍然選中矩形。雙擊矩形或按Enter鍵進入形狀編輯模式shape editing mode。如今，按住Command並單擊頂部片斷以在正中間添加一個點。將此點向上推20px。

選擇兩個形狀（矩形和圓形），而後從頂部工具欄中將它們與Union合併。添加＃585858的填充Fill，並添加顏色Color爲＃E4E4E4的描邊border，使用外描邊Outside厚度Thickness爲2

讓咱們給時針添加三維立體外觀。首先，在現有填充之上添加線性漸變Linear Gradient 填充;使用＃4A4A4A，第一個顏色Color爲100％透明度alpha，最後一個爲白色，透明度0％。使用顏色對話框中的向左箭頭將漸變設置爲水平位置。如今，在顏色對話框中雙擊漸變軸，添加另外一個點，而後按鍵盤上的5將其移動到中間位置。給它100％alpha，並確保其顏色爲＃4A4A4A。添加另外一個，而後將其移動到中心，而後使用右箭頭鍵向右移動1px。使用20％alpha將顏色更改成＃898989。

接下來，應用具備50％透明度alpha和模糊Blur爲2的白色內陰影Inner Shadows。而後應用具備70％透明度alpha的黑色陰影Shadows ，6的模糊Blur和1的Spread。

要完成時針，咱們須要用發光顏色填充它，這樣就能夠在黑暗中便於查看時間。要執行此操做，請繪製一個尺寸爲16像素×100像素的矩形，並將其放置在距離時針頂部22px的位置。對於填充Fill，請使用＃FFE4C0。進入形狀編輯模式，選擇兩個底部點，並將半徑Radius 設置爲3px。添加厚度Thickness 爲2的中心描邊Center border，並將顏色Color設置爲＃626262。添加內陰影Inner Shadows，使其看起來像在時針裏面中。對於顏色Color，使用＃000000與30％透明度alpha，模糊Blur爲3和Spread爲3。

選擇全部時針形狀，並使用Cmd + G將它們放在hour hand（時針）組中。

分針

分針基本上與時針相同但更長而且具備更小的圓圈。複製hour hand，隱藏原始圖層，並命名新的層爲minute hand。進入組，從合併的形狀中選擇圓，轉到圖層Layer→變換Transform →縮放Scale（或Cmd + K），而後輸入80％（將其縮小20％）。

確保選中合併的形狀，進入形狀編輯模式，選擇前三個點（按住Shift鍵同時單擊點以所有選擇它們），並將它們向上推90px。按住Shift鍵和向上箭頭鍵將以10像素爲增量移動選區。

單擊漸變填充gradient fill設置相反的漸變方向，點擊顏色對話框漸變條右邊刷新按鈕兩次便可。此外，編輯陰影Shadows：將透明度alpha下降到50％，將模糊Blur設置爲5，將Spread設置爲1。

最後，選擇頂部的發光矩形，進入形狀編輯模式，選擇頂部兩個點，並將它們向上推90px。到此分針就繪製完成了。

大秒針

只有當秒錶模式打開時，此指針纔會移動，並以秒爲單位測量通過的時間。這個錶針也是一個圓形和矩形，咱們將使用相同的方法建立它。隱藏minute hand（分針）組，並在inner dial（內錶盤）中間繪製直徑爲30px的圓圈。在頂部添加一個尺寸爲8px x 408px的小矩形，並將底部的兩個矢量點分別移動2px以造成梯形;將它設置在中間，距離inner dial（內錶盤）頂部26px。對圓形和矩形使用相同的＃404040填充Fill，並關閉描邊Border。

在頂部和底部區段的正中間各添加一個點，並將頂部點向上推6px，底部點向下推6px。

使用Union將兩個形狀合併爲一個large seconds hand（大秒針）組。應用具備40％透明度alpha和模糊Blur爲2的白色內陰影Inner Shadows，以及具備50％透明度alpha的黑色陰影Shadows ，4的模糊Blur和1的Spread。

最後，在頂部添加一個螺絲，將錶針固定到位。在畫板中間建立一個直徑爲14px的圓圈，填充Fill ＃5F5F5F並關閉描邊border。添加50％透明度alpha的黑色陰影Shadows 效果，模糊Blur設置爲2，Spread爲1。

在頂部再添加一個圓，此次直徑爲6px，填充Fill設置爲＃4C4C4C。添加厚度Thickness爲1且顏色Color爲＃888888的外描邊Outside border，並應用具備50％透明度alpha和模糊Blur爲3的黑色內陰影Inner Shadows效果。選擇兩個圓並將它們分組到screw（螺絲）組中。

如今咱們能夠將時間設置爲10:08:24。選擇large seconds hand（大秒針），單擊頂部工具欄中的「旋轉Rotate 」，將十字準線標記拖動到參考線的交點，而後將其旋轉144度以將其設置爲24秒。

取消隱藏minute hand組，而後旋轉48度，就像咱們處理large seconds hand（大秒針）同樣，將其指向8分鐘位置。

最後，取消隱藏hour hand（時針）組，並將其旋轉指向10:00稍後一點位置（旋轉-56度 - 逆時針旋轉比繞整個圓周更容易）。

錶冠(表把)

是時候製做錶冠了。從78px到162px的矩形開始。將其垂直對齊到畫板，關閉描邊border，並使用如下參數從上到下應用「線性漸變Linear Gradient」：

1. #989898
2. #A5A5A5
3. #E8E8E8
4. #8C8C8C
5. #787878
   進入形狀編輯模式，選擇矩形右側的兩個矢量點，並將半徑Radius設置爲10px。

按住Cmd並單擊右側段以在中間添加一個點。將此點向右推20px，而後雙擊它將其轉換爲 鏡像Mirrored 矢量點。

選擇矢量Vector 工具（V）並繪製以下圖所示的線條。將描邊顏色Color設置爲＃F0F0F0，將厚度Thickness 設置爲3.添加具備20％透明度alpha的黑色陰影Shadows效果，並將Y和Blur設置爲2。

咱們將使用這條線在錶冠周圍創造齒狀邊緣。轉到「排列Arrange 」→「製做網格Make Grid」，而後在對話框中將「行Rows 」設置爲13，將「邊距Margin」設置爲1px，將「列Columns」設置爲1，而後單擊「製做網格Make Grid」。「Make Grid」將分配所選圖層，並在它們之間使用預約義的間距。

咱們已經填滿了皇冠的上半部分。填充下半部分的最簡單方法是選擇使用「製做網格Make Grid」建立的全部路徑，將它們編組，複製Duplicate （Cmd + D），垂直翻轉Flip Vertically，而後將其移動到錶冠的下半部分。而後，選擇兩個組和錶冠形狀，並執行蒙版Mask 操做，以便全部建立的元素都不會超出錶冠形狀。命名結果組爲crown。

將crown（錶冠）向左拖動，而後將其放置到「 圖層Layer」面板中的case（錶殼）後面。

秒錶按鈕

計時按鈕啓動，中止和重置計時碼錶功能，不會干擾手錶。讓咱們將這些按鈕添加到case的側面。每一個按鈕由兩個矩形組成，一個在另外一個的頂部。繪製第一個28px×74px的矩形，關閉描邊，併爲填充Fill應用線性漸變Linear Gradient：

1. #8D8D8D
2. #D3D3D3
3. #8A8A8A

應用具備30％ 透明度alpha的黑色 內陰影Inner Shadows，並將 Y設置爲-13並將 模糊Blur設置爲10。

在頂部繪製第二個矩形，距離左側段20px，尺寸爲86px乘106px，垂直對齊下方。將半徑Radius設置爲14px，確保關閉描邊，並使用線性填充Linear Gradient進行填充：

1. #8C8C8C
2. #CACACA
3. #FFFFFF
4. #BABABA
5. #707070

選擇兩個矩形並將它們分組到pusher組中，而後垂直對齊Align Vertically到畫板。複製這一組，由於咱們須要兩個按鈕，一個在上面，一個在crown下面。

將它們放置到case層下方，並將第一個旋轉-30度，將第二個旋轉30度，將十字標記設置在參考線的交叉點處。

錶帶

到此咱們幾乎快完成了，最後咱們還要繪製一下表帶

在頂部凸耳之間添加一個476px x 376px的矩形，並將其與畫板垂直對齊。選擇前兩個矢量點，並將半徑Radius 設置爲60px。而後，將每一個底部兩個矢量點移動10px，造成一個梯形。

取消描邊Borders，單擊「 填充Fill」按鈕，切換到「 線性漸變Linear Gradient」，而後使用如下設置建立漸變：

1. #636363
2. #3B3B3B
3. #2B2B2B
4. #000000
5. #1F1F1F
6. #000000
   添加水平線性漸變Linear Gradient來模仿真實縫線所產生的皮革壓花效果。設置是：
7. #0C0C0C 和 40% 透明度alpha
8. #0E0E0E 和 10% 透明度alpha
9. #2E2E2E 和 80% 透明度alpha
10. #181818 和 10% 透明度alpha
11. #181818 和 10% 透明度alpha
12. #2E2E2E 和 80% 透明度alpha
13. #0E0E0E 和 10% 透明度alpha
14. #0C0C0C 和 40% 透明度alpha
    使用柔和光線Soft Light混合和20％的不透明度Opacity添加噪點填充Noise Fill，以添加細微紋理。最後，添加10％alpha的白色內陰影 Inner Shadows，並將Y設置爲15並將模糊Blur設置爲10。

經過添加帶子上常見的對比色縫線來完成繪製錶帶。建立一個10px×30px的圓角矩形Rounded Rectangle （U），半徑Radius 爲5.將描邊顏色Color設置爲＃3B3B3B，內描邊厚度Thickness爲1.將填充Fill更改成＃E6E6E6。

經過在頂部使用「噪點填充Noise Fill」添加紋理，使用「疊加Overlay 」混合和「不透明度Opacity 」爲70％。而後，將顏色Color設置爲＃000000的陰影應用於50％透明度alpha，並將模糊Blur和Spread設置爲2。

使用「製做網格Make Grid」垂直添加針跡。在對話框中，將行Rows設置爲7，將邊距Margin設置爲2px，將列Columns 設置爲1。

選擇全部針跡，複製並將它們移動到揹帶的右側。

選擇做爲錶帶一部分的全部形狀（針跡和錶帶形狀），並將它們組合到strap top組中。在「圖層Layer」面板中將此組移到case的上方。要建立底部綁帶，請複製strap top組， 垂直翻轉Flip Vertically，在底部凸耳之間移動，並將名稱更改成bottom strap。選擇並將全部手錶元素放入組autavia中。到此咱們的手錶現已正式完成！

最後，讓咱們添加一個背景。建立一個與畫板大小相同的矩形，將填充Fill設置爲＃0D0F0E，而後將其放置到autavia組下方。

結束

如今您知道如何從新建立我最喜歡的手錶了。計時碼錶是偉大的工程和最早進的技術，雖然教程可能並不容易，但我認爲結果很是好 - 雖然與構建真正的手錶的過程不一樣！

固然，下一步是設計本身喜歡的插圖。選擇一個手錶（或您喜歡的其餘對象），並確保從不一樣角度獲取儘量多的照片，以便您能夠複製全部重要細節。如您所見，Sketch中有一些工具和功能，您能夠掌握這些工具和功能來建立相似的對象;使用它們來加速和簡化整個過程。

每一個手錶都有不一樣的功能，但在當前狀況下咱們已經涵蓋了大部分功能，並且我很肯定你如今能夠對任何其餘手錶進行逆向工程。

接下來，假設將這些元素導出爲SVG格式併爲其設置動畫。想象一下，不只要從新創造它們的外觀，還要重現它們的工做原理！

最後，若是您有任何疑問，請發表評論或在Twitter上發帖。我很樂意幫助你。