无论您是设计应用程序、着陆页，甚至是徽标，模型都可以派上用场。 简而言之，设计模型是您完成产品的高保真渲染。 这是与队友、客户以及您可能正在游说或寻求反馈的任何其他利益相关者分享您的设计想法的好方法。
今天，我们将向您展示如何设计一个漂亮的信用卡模型，您可以在您的任何项目中使用它。 让我们开始吧！
如何一步步设计信用卡模型
在我们开始之前，让我们快速看一下最终结果
查看我们自己的 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 来对所有元素进行分组，并将其重命名为“Chip”。 这将使您的图层在以后易于排序！ 然后，将芯片放置在画板上，放置在非接触式图标的左侧。
我们已经创建了信用卡的所有前景元素。 几乎完成了！
6. 倾斜时间到了
在我们完成之前，让我们给信用卡一个润色。 我们将再次离开画板，直接在画布上进行设计。 点击 R 来绘制一个与画板大小大致相同的矩形，并移除边框。 然后，在选择形状的情况下，将其旋转 -45°，点击 ⌘⇧T 来触发变换工具，然后向下拖动顶部边缘，使其看起来像躺在平面上
变换工具将帮助我们使矩形看起来像躺在平面上。
接下来，我们将通过给每个角指定一个独特的半径值来使角变圆。 选择形状，前往检查器中的“圆角”部分，然后选择单个。 然后为每个字段输入以下值
- 20（左上角）
- 75（右上角）
- 100（左下角）
- 20 (右下角)
就像真正的信用卡有圆角一样，我们将给我们的信用卡添加圆角半径。
对于最后一步，请确保您已首先安装 Angle 插件，我们将使用它来倾斜我们的信用卡设计。
准备就绪后，选择形状，转到菜单，然后选择插件 > Angle > 应用模型。然后，您将看到来自画板的设计以一定的角度出现在形状内。很棒！
Angle 插件非常适合处理模型。
好了，您已经完成了。一个色彩鲜艳的信用卡设计，您可以将其集成到任何更广泛的金融科技模型中。做得好！
如果您喜欢您的作品，我们很乐意看到它！在 Twitter 上使用标签 #MadeWithSketch 与我们分享。
