如何在 Sketch 中創造立體感

希望為您的設計增添更多真實感嗎？也許您熟悉立體設計，甚至是 擬物化設計 的狂熱愛好者。或者，也許您是平面設計的死忠粉絲。我們懂！平面設計可以很時尚、簡潔且用途廣泛。但有時您的設計就是需要「更多」。更多真實感、更多立體感、更多生命力。

以插圖為例。總有一些設計看似從螢幕中跳脫出來，非常引人注目。雖然您不必做得太過誇張，達到 擬真 的程度，但添加一點立體感確實可以讓您的圖示和介面更加出色。

在本教學課程中，Joseph 將向您展示如何直觀地創造立體感。我們知道，要辨別其他人是如何達到這種效果，可能並不容易。如果做得好，立體感的接縫將會天衣無縫。以下面的開關為例。我們的眼睛可以分辨出平面和立體之間的差異，但很難找出要遵循的步驟。接下來，我們將教您如何使用不同的技巧來實現這種外觀。

我們將向您展示如何使用

• 簡單的樣式屬性，讓基本形狀看起來具有立體感
• 陰影和高光，模擬光線照射在表面上的效果
• 漸層，展現光線的衰減
• 模糊效果，混合表面

準備好了嗎？讓我們開始吧 🪂

1.繪製開關容器和旋鈕

首先，我們先建立一個平面形狀，之後再進行改進。在這個例子中，我們需要一個帶有圓角的灰色矩形和一個白色圓形來建立容器和旋鈕。我們將使用 50x30 像素的開關容器和 26x26 像素的旋鈕，讓您對尺寸有所了解。

2.降低背景色調

現在我們可以開始思考真實感了。讓我們設想每一層都是一個被光源照射的物理表面。這將幫助你找出在哪裡添加高光和陰影。在這個例子中，讓我們想像光源就在我們的設計正上方。為了方便起見，選取背景並將其從白色改為淺灰色。

3. 為開關容器添加漸層

運用新的思維方式，讓我們將開關容器變暗。為了顯示容器如何在自身上投射陰影，讓我們套用一個頂部較暗的漸層。

4. 為開關容器添加內陰影

同樣重要的是要考慮暖色調的光源如何產生較冷的陰影。讓我們用內陰影添加更多深度。預設顏色適用於此練習，但將其 Y 位置減少到 3，並透過將模糊值增加到 8 左右來使其柔和。

5. 為旋鈕添加投影

我們的容器看起來不錯！接下來讓我們關注旋鈕。由於旋鈕是凸出的，它應該會投射陰影。讓我們繼續使用相同的 Y 位置 3 和模糊值 8 來添加陰影。你也可以透過增加其 Alpha 值來使此陰影更暗一些。

6. 將旋鈕和陰影遮罩到開關容器中

處理深度時，我們經常需要結合幾種技巧來創造所需的效果。在這種情況下，如果我們的目標是讓旋鈕看起來與背景層更齊平，則開關容器的突出程度會比我們想要的更突出。那麼我們如何確保旋鈕僅將其陰影投射到開關容器中呢？

很簡單！讓我們透過選取兩個圖層、按住 Control 鍵並單擊，然後從選單中選擇「**建立遮罩**」來遮罩旋鈕和容器。現在，旋鈕和陰影將被裁剪到容器的路徑內。

7. 為旋鈕添加漸層

但我們還沒完成旋鈕！讓我們用一個細微的漸層替換白色填色，使其更具體一些。我們希望表面看起來像是略微凸出，因此使上部比下部更亮。始終記住光線來自上方。

8. 柔化旋鈕邊緣

現實世界中的邊緣不像向量圖形的邊緣那麼銳利。在這種情況下，我們可以透過將旋鈕的邊緣變圓並使其在頂部捕捉一些高光和在底部捕捉一些陰影來獲得一些真實感。

我們可以使用內陰影來創造這種效果。

首先添加一個白色內陰影，並將 Alpha 值增加到 100，因為淺灰色上的白色已經很細微了。為了更容易看到我們在做什麼，讓我們暫時將模糊值設定為 0。在這個比例下，即使是 1 的 Y 位置也有點太遠了，所以讓我們將其設定為 0.5 左右。一旦你對結果滿意，就可以將模糊值設定為 1。

接下來，新增一個黑色的內陰影來呈現從底部邊緣散發出的光線。但我們將 Alpha 值調低至 1，以免看起來太厚重。這個陰影與我們剛才建立的高光相反，因此請將 Y 位置設定為 -0.5，使其從底部微微露出。最後，將模糊值設定為 1。

9. 複製並縮小旋鈕

如果您發現自己需要眯著眼睛才能看出步驟之間的差異，別擔心！這完全正常。逼真深度的關鍵在於細微之處，因此需要一些時間才能將所有元素融合在一起。

在接下來的步驟中，您終於可以看到所有努力的成果了。選取旋鈕，然後按 ⌘D 複製它。按住 ⇧⌥ 並將其大小調整為約 16x16 像素。最後，停用陰影。這應該會使旋鈕上出現一個凸起。

趁此機會增加漸層填色的對比度，並提高深色內陰影的 Alpha 值，使其看起來更明顯。

10. 垂直翻轉凸出部分

如果您想知道為什麼我們建立的是凸出而不是凹陷…那是因為我們必須將它翻轉！點擊檢查器「圖層屬性」區段下的「垂直翻轉」按鈕，然後見證奇蹟的發生。

11. 柔化凹陷

目前，邊緣看起來有點太清晰，與我們追求的細膩方法完全不符。高斯模糊可以幫助解決這個問題。只需將其應用於整個物件，半徑設定為 1 即可。

12. 新增些微的外部斜角

作為最後的修飾，讓我們在容器外部添加一些規則的陰影，以勾勒出頂部邊緣的輪廓。在頂部添加深色陰影，使表面看起來略微向內圓弧。然後，在底部添加淺色陰影，以突顯邊緣向外捲曲的效果。

13. 為背景新增漸層

為了使整體外觀更加統一，將背景從純色填色更改為頂部略淺的漸層。這樣，它就能與我們設定的光源位置保持一致。這樣就完成了！

如您所見，您可以使用許多技巧來創造深度。對於簡單的設計，您可能只需要一種技巧。如果您想創造更複雜或更逼真的設計，那麼堆疊使用多種技巧將有助於您獲得最佳效果。

請記住，一切都與細微之處有關 — 而複雜的細微之處需要時間！如果您準備好將您的深度技巧提升到一個新的水平，請查看 David Blum 的教學，了解如何建立單層草莓。請注意：草莓看起來非常逼真，可能會讓您食指大動。