了解最新技术文章
无论您是设计应用程序、登陆页面，甚至是徽标，模型都可以非常方便。简而言之，设计模型是成品的高保真渲染。这是与队友、客户以及您可能向其推销或寻求反馈的任何其他利益相关者分享您的设计想法的好方法。
今天，我们将向您展示如何设计一个漂亮的信用卡模型，您可以将其用于任何项目。让我们深入了解一下吧！
在我们开始之前，让我们快速看一下最终结果：
查看我们自己的Tiago Alexandrino的原始教程！
首先，让我们设置画板——这将有助于定义信用卡的大小和形状。点击A触发画板工具，然后单击画布上的任意位置并拖动，直到画板达到 830x540 像素。您可以在检查器中手动调整这些尺寸，因此如果拖动时不完全准确，请不要担心。
画板是可选的，但它们将有助于创建与信用卡大小和形状相同的固定设计区域。
接下来，让我们为卡片添加背景图像。我们从Unsplash获取了一个彩色的、抽象的渐变——这是一个很棒的网站，可以找到各种免费使用的图像。请记住，我们将向画板添加各种前景元素，例如信用卡芯片、徽标、姓名和卡号。因此，最好选择干净的背景图像，以保持模型的可读性。
专业提示：想要在不离开 Mac 应用程序的情况下将 Unsplash 图像添加到您的设计中吗？单击工具栏中的“插入”按钮，然后选择“数据”>“Unsplash”。
最好使用干净的背景图像来帮助保持信用卡模型的可读性。
我们希望我们的模型可信，所以让我们添加一些标准卡详细信息 - 从姓名和卡号开始。点击T文本工具，然后单击画板左下角开始输入任意 16 位数字。请务必在每四位数字后添加一个空格！
在数字下方添加另一个文本层以开始输入名称。完成后，点击esc退出文本编辑模式。然后，按住⇧并单击两个文本图层以同时设置它们的样式。前往检查器将字体更改为Courier New并将大小更改为32。
接下来，我们将添加一个徽标和一个非接触式图标 - 您可以从我们的工作区获取这两个图标！将徽标放在画板的左上角，将非接触式图标放在右侧（大约中间位置）。
您可以从我们的工作区获取信用卡徽标和非接触式图标！
是时候创建信用卡芯片了。在这一步中，我们还将暂时离开画板，直接在画布上设计所有这些 - 您喜欢的任何地方！
点击R矩形工具并绘制一个 128x90 的矩形，前往检查器删除其边框，并将其圆角半径指定为 16。
为了设计芯片，我们将暂时离开画板并直接在画布上创建它。
为了使芯片具有闪亮的金属外观，我们将对其进行渐变填充。选择矩形并再次转到“检查器”，但这次转到“填充”面板。打开颜色弹出框并将填充类型更改为线性渐变。接下来，直接在画布上拖动调整起点和终点，使渐变形成从矩形左上角到右下角的对角线。然后沿着渐变线再添加四个颜色点。您可以单击并拖动每个点来调整它们的位置并保持它们的间距均匀。
现在渐变已全部设置完毕，让我们为每个点指定一个独特的颜色。您可以通过一次单击一个点来更改每个点的十六进制代码。从左上角到右下角，对六个点中的每一个使用以下十六进制代码：
#A4A4A4（左上）
#DFDEDE
#848484
#BCBABA
#979797
#D2D2D2（右下）
作为芯片的最后一步，我们将通过创建六个小矩形来给它一些凹槽。但别担心，我们只需要创建一个然后复制它！
再点击R一次，创建一个 50x22 的矩形。将其圆角半径设置为 11，将其边框宽度调整为 3，然后删除填充。
接下来，我们将使用与我们为芯片提供的类似的对角线线性渐变为其提供边框填充 - 从矩形的左上角开始，到右下角结束。我们将再次在中间添加四个点，只是这一次，我们将使用以下十六进制代码：
#979797（左上）
#FFFFFF
#848484
#979797
#FFFFFF
#979797（右下）
然后，沿渐变调整点，使第三个点接触矩形的顶部，第四个点接触底部。
添加完渐变后，将其复制五次，这样总共就有六次。然后，将所有六个形状放入我们在步骤 4中制作的芯片内，形成两列，每列三个。
最后，通过选择并点击 来对所有元素进行分组⌘G，并将其重命名为“Chip”。这将使您的图层稍后易于排序！然后，将芯片放在画板上非接触式图标的左侧。
我们已经创建了信用卡的所有前景元素。快完成了！
在我们结束之前，让我们对信用卡进行最后的修饰。对于这一点，我们将再次离开画板，直接在画布上进行设计。点击R绘制一个与画板大小大致相同的矩形，并删除边框。然后，选择形状后，将其旋转 -45°，点击⌘⇧T以触发变换工具，然后向下拖动顶部边缘，使其看起来像放在平坦的表面上：
接下来，我们将通过为每个角指定一个唯一的半径值来圆化角。选择形状，前往检查器中的“角”部分，然后选择“单独”。然后为每个字段输入以下值：
20（左上）
75（右上）
100（左下）
20（右下）
对于最后一部分，请确保您首先安装了角度插件，它将用于倾斜我们的信用卡设计。
准备好后，选择形状，前往菜单，然后选择“插件”>“角度”>“应用模型”。然后，您将看到画板上的设计以相同的角度出现在形状内。光滑！Angle 插件非常适合处理模型。
现在你就得到了它。丰富多彩的信用卡设计，您可以将其集成到任何更广泛的金融科技模型中。不错的工作！
如果您喜欢您所做的事情，我们很乐意看到它！使用主题标签#MadeWithSketch在 Twitter 上与我们分享。
现在你就得到了它。丰富多彩的信用卡设计，您可以将其集成到任何更广泛的金融科技模型中。不错的工作！
24小时免费咨询
请输入您的联系电话，座机请加区号
