無論您是在設計應用程式、登陸頁面，甚至是標誌，模型 都能派上用場。簡而言之，設計模型是成品的高保真渲染圖。這是與團隊成員、客戶和其他利益相關者分享設計理念的好方法，無論您是要向他們推銷還是尋求他們的回饋意見。
今天，我們將向您展示如何設計一個美觀的信用卡模型，您可以將其用於任何專案。讓我們開始吧！
如何逐步設計信用卡模型
在我們開始之前，讓我們快速瀏覽一下最終成果
看看我們自己的 Tiago Alexandrino 製作的原始教學！
1. 建立畫板
首先，讓我們設定畫板，這有助於定義信用卡的大小和形狀。按下 A 鍵以啟動畫板工具，然後在畫布上的任何位置點擊並拖曳，直到畫板大小為 830x540 像素。您可以在檢查器中手動調整這些尺寸，因此拖曳時不必完全精確。
畫板是選用的，但它們有助於建立與信用卡大小和形狀相同的固定設計區域。
2. 設定信用卡的背景圖片
接下來，讓我們為卡片設定背景圖片。我們從 Unsplash 擷取了一個色彩豐富的抽象漸層圖，這是一個尋找各種免費圖片的好網站。請記住，我們會在畫板上新增各種前景元素，例如信用卡晶片、標誌、姓名和卡號。因此，最好選擇乾淨的背景圖片，以保持模型的可讀性。
最好使用乾淨的背景圖片，以幫助保持信用卡模型的可讀性。
3. 輸入您的（虛擬）信用卡詳細資訊
我們希望我們的模型看起來逼真，所以讓我們新增一些標準的卡片詳細資訊，從姓名和卡號開始。按下 T 鍵以啟動文字工具，然後點擊畫板的左下角，開始輸入任何隨機的 16 位數字。請務必在每四位數字後新增一個空格！
在數字下方新增另一個文字圖層以開始輸入姓名。完成後，按下 esc 鍵以離開文字編輯模式。然後，按住 ⇧ 鍵並點擊兩個文字圖層，即可同時設定它們的樣式。前往檢查器，將字體更改為**Courier New**，大小更改為**32**。
接下來，我們將新增一個標誌和一個非接觸式圖示，您可以從我們的工作區取得這兩個圖示！將標誌放在畫板的左上角，將非接觸式圖示放在右側大約中間的位置。
您可以從我們的工作區取得信用卡標誌和非接觸式圖示！
4. 設計信用卡晶片
現在是建立信用卡晶片的時候了。在此步驟中，我們也將暫時離開畫板，直接在畫布上的任何位置進行設計！
按下 R 鍵以啟動矩形工具，並繪製一個 128x90 的矩形，前往檢查器移除其邊框，並將圓角半徑設定為 16。
為了設計晶片，我們將暫時離開畫板，直接在畫布上建立它。
為了讓晶片呈現閃亮的金属外观，我們將使用漸層填色。選取矩形並再次前往「檢查器」，但這次要到「填色」面板。打開「顏色彈出視窗」，并将填色類型更改為「線性漸層」。接下來，直接在畫布上拖曳以調整起點和終點，使漸層從矩形的左上角到右下角形成一條對角線。然後沿著漸層線再添加四個顏色點。您可以按一下並拖曳每個點以調整其位置，並使它們保持大致均匀的間距。
漸層是創造閃亮效果的好方法。
現在您的漸層已全部設定完成，讓我們為每個點指定一種獨特的顏色。您可以通過一次按一下一個點來更改每個點的十六進制代碼。從左上角到右下角，為六個點分別使用以下十六進制代碼
- #A4A4A4（左上角）
- #DFDEDE
- #848484
- #BCBABA
- #979797
- #D2D2D2（右下角）
使用線性漸層時，您可以添加多個顏色點，並為每個點指定一個獨特的十六進制代碼。
5. 賦予晶片深度
作為晶片的最後潤飾，我們將通過建立六個小矩形來賦予它一些凹槽。但別擔心，我們只需要建立一個，然後複製它即可！
因此，再次按下 R 鍵，並建立一個 50x22 的矩形。將其「圓角」半徑設為 11，將其邊框寬度調整為 3，並移除填色。
建立多個相同樣式的形狀時，通常最簡單的方法是先建立一個，然後再複製它。
接下來，我們將使用與我們為晶片指定的相似的對角線「線性漸層」為其指定邊框填色，該漸層從矩形的左上角開始，到右下角結束。我們將再次在它們之間添加四個點，只是這次，我們將使用以下十六進制代碼
- #979797（左上角）
- #FFFFFF
- #848484
- #979797
- #FFFFFF
- #979797（右下角）
然後，沿著漸層調整這些點，使第三個點接觸矩形的頂部，第四個點接觸底部。
您也可以將線性漸層的起點和終點延伸到形狀之外。
添加完漸層後，將其複製五次，以便您總共擁有六個。然後，將所有六個形狀放置在我們在步驟 4 中製作的晶片內，形成兩列三列。
最後，通過選取所有元素並按下 ⌘G 來將它們分組，並將其重命名為「晶片」。這將使您的圖層稍後易於排序！然後，將晶片放置在畫板上，位於非接觸式圖標的左側。
我們已經建立了所有信用卡的前景元素。快完成了！
6. 傾斜時間
在我们结束之前，让我们为信用卡添加最后的润饰。我们将再次离开画板，直接在画布上设计。按下 R 绘制一个与画板大小大致相同的矩形，并移除边框。然后，在选中该形状的情况下，将其旋转 -45°，按下 ⌘⇧T 触发“变换”工具，然后向下拖动顶边使其看起来像放置在平面上
“变换”工具将帮助我们使矩形看起来像放置在平面上。
接下来，我们将通过为每个角指定一个唯一的半径值来对其进行圆角处理。选择形状，转到“检查器”中的“圆角”部分，然后选择“单独”。然后为每个字段输入以下值
- 20（左上角）
- 75（右上角）
- 100（左下角）
- 20（右下角）
就像真实的信用卡有圆角一样，我们也将为我们的信用卡指定一个圆角半径。
对于最后一部分，请确保您已安装 Angle 插件，该插件将用于倾斜我们的信用卡设计。
準備好了嗎？選取形狀，前往選單，然後選擇 外掛程式 > 角度 > 套用模型。您會看到畫板中的設計以相同的角度顯示在形狀內。真棒！
角度外掛程式非常適合用於模型製作。
這樣就完成了。一張色彩繽紛的信用卡設計，您可以將其整合到任何更廣泛的金融科技模型中。做得很好！
如果您喜歡您的作品，我們很樂意看到它！使用 #MadeWithSketch 標籤在 Twitter 上與我們分享。
