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

【原文】Designing A Realistic Chronograph Watch In Sketch

這款手錶由於它的簡潔而優雅的設計，內建計時碼錶機制和旋轉表圈,便於檢視時間，而迅速成為一款極具代表性的手錶。它還有一個漂亮的“panda style”：淺色錶盤，帶有三個黑色小錶盤。你可以在Google或百度上搜尋檢視它的相關參考圖片。

本教程相關檔案

為了能夠更好地按照本教程中的步驟操作，請下載Autavia.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上發帖。我很樂意幫助你。