sketch放入app组件
在本Sketch UI教程中，您将学习如何设计旅行应用程序登录屏幕设计。
对于初学者，您将学习如何创建简单的按钮，如何复制样式属性以及如何保存和使用符号或嵌套符号。 所有这些小功能将简化您在本Sketch UI设计教程中的工作。
接下来，使用简单的形状，路径和矢量形状构建技术，您将学习如何在Sketch UI设计中添加像素完美的图标。 最后，您将学习如何在Sketch设计中添加文本内容和图像填充。
有关如何调整或改善最终Sketch UI设计的更多启发，您可以在GraphicRiver中找到大量资源。
要完全重新创建本教程中介绍的内容，您将需要Envato Elements提供以下资源。 或者，您可以用其他地方的免费字体和图像替换这些资产。
从工具栏或菜单转到插入>画板 （或按A ）， 检查器将显示画板模板的列表。 单击iPhone 11模板以创建414 x 896 px画板。 完成后，点击Escape取消选择画板。
从工具栏或菜单转到插入>形状>矩形 （或按R ）。 创建一个尺寸与画板相同的形状（ 282 x 150 px ），确保它覆盖了整个画板并且保持选中状态。
转到“ 检查器”面板，然后将焦点放在“ 样式”部分。 取消选中“ 边框”复选框以禁用应用于矩形的边框，并保留默认的“ 填充颜色”。
从工具栏或菜单转到插入>形状>矩形 （或按R ）。 创建一个320 x 60 px的形状，确保其保持选中状态，然后将焦点放在“ 检查器”面板上。
首先，让我们使用X和Y输入框以数字方式放置此新矩形。 在Y框中输入在X盒47和730的形状应该移动到画板的底侧，如下面的图所示。
继续关注“ 检查器”面板，将“ 半径”滑块拖动到30 ，然后移至“ 样式”部分。 禁用现有的Border并将Fill颜色更改为＃F9732E 。
从工具栏或菜单转到插入>文本 （或按T ）。 在画板上单击一次，然后在“ 检查器”面板中的“ 文本”部分上聚焦。
选择Alma Mono 字体，将大小设置为20 ，将颜色设置为白色（ #FFFFFF ），然后只需键入文本“ SIGN UP” 。 如下图所示放置它。
选择橙色的圆角矩形以及“签名”文本，然后从工具栏单击“ 创建符号 ”，或者在菜单中选择“ 图层”>“创建符号 ”。 将符号命名为“橙色按钮” ，然后单击“ 确定” 。 这将创建一个独立于画板的主符号 。 如果您更改了母版，则它还将显示在文档中该符号的任何实例中。
从工具栏或菜单转到插入>形状>矩形 （或按R ）。 创建一个新的320 x 60 px形状，确保它保持选中状态，并集中在“ 检查器”面板上。
同样，使用X和Y输入框以数字方式定位您的选择。 输入下图所示的值，然后将“ 半径”滑块拖动到30 。
继续关注“ 检查器”面板，然后移至“ 样式”部分。 禁用现有的Border并将Fill颜色更改为＃4FD44E 。
确保仍选择绿色形状，并使用工具栏中的“ 创建符号”按钮将其另存为符号。 将此新符号命名为“按钮绿色” ，然后单击“ 确定” 。
在创建一个简单的嵌套符号时，专注于两个主符号。
转到插入>文档>绿色按钮 ，将实例添加为绿色符号。 将其完全放置在“橙色按钮”主符号上方，然后从工具栏中单击“ 向后”按钮，将新添加的符号实例移到文本后面。 最后，事情应该看起来像第二张图片。
返回画板，请注意，底部按钮现在为绿色。 发生这种情况仅仅是因为在上一步中对其主符号进行了更改。
选择此符号实例，然后将焦点放在“ 检查器”面板中的“ 替代”部分。 打开按钮绿色下拉菜单，选择无符号删除“按钮，绿色”标志覆盖和返回到符号的原始实例。
移至顶部按钮，右键单击它，然后转到替换>文档>橙色按钮 。 从“ 检查器”面板移至“ 符号”部分，在文本替代框中输入“ SIGN IN” ，并保持“ Button Green”符号替代。
从工具栏或菜单转到插入>形状>矩形 （或按R ）。 创建一个130 x 25 px的形状，确保其保持选中状态，然后将焦点放在“ 检查器”面板上。
使用X ＆ Y输入框，如下图所示数字化您的选择，然后将Radius滑块拖动到12.5 。
在“ 检查器”面板中的“ 样式”部分上，禁用现有的“ 边框” ，将“ 填充颜色”更改为黑色（ ＃000000 ），并将其“ 不透明度”降低到70％ 。
完成后，点击Commnad-Option-C键盘快捷键以复制所选样式。
从工具栏或菜单转到插入>文本 （或按T ）。 在画板上单击一次，然后在“ 检查器”面板中的“ 文本”部分上聚焦。
选择San Francisco字体 ，将大小设置为10 ，将颜色设置为白色（ #FFFFFF ）。 键入下面显示的文本并将其放置，如下图所示。
从工具栏或菜单中转到“ 插入”>“形状”>“椭圆形 ”（或按O ）。 创建一个60像素的圆圈，确保其保持选中状态，然后使用X和Y输入框以数字方式放置所选内容，如下所示。
从“ 检查器”面板中的“ 样式”部分集中，禁用现有的“ 边框”并将“ 填充”颜色更改为黑色（ ＃000000 ）。
确保仍然选择了您的黑色圆圈，然后转到“ 排列”>“制作网格” 。 输入下图所示的属性，然后单击“ 制作网格”按钮。 如下图所示，这将添加黑色圆圈的三个副本。
依次选择这些圆圈，转到“ 检查器”面板的“ 样式”部分，然后将黑色替换为如下所示的颜色。
转到视图>画布>显示所有指南以启用智能指南 。
从此Web和社交图标矢量集中导入所需的四个图标。 调整它们的大小，将颜色更改为白色（ #FFFFFF ）并如下图所示放置它们。 智能指南将使您更轻松地完美地使这些图标居中。
从工具栏或菜单转到插入>形状>矩形 （或按R ）。 创建一个新的180 x 25 px形状，确保其保持选中状态，然后将焦点放在“ 检查器”面板上。
使用Smart Guides如下所示放置您的选择，然后将Radius滑块拖动到12.5 。
在“ 检查器”面板上的“ 样式”部分上，禁用现有的“ 边框” ，将“ 填充颜色”更改为白色（ #FFFFFF ），并将其“ 不透明度”降低到70％ 。
从工具栏或菜单转到插入>文本 （或按T ）。 在画板上单击一次，然后在“ 检查器”面板中的“ 文本”部分上聚焦。
选择San Francisco字体 ，将大小设置为10 ，将颜色设置为黑色（ ＃000000 ）。 键入下面显示的文本并将其放置，如下图所示。
从工具栏或菜单转到插入>形状>矩形 （或按R ）。 创建一个110 x 25 px的形状，确保它保持选中状态，然后按Command-Option-V粘贴几步之前复制的样式属性。
使用Smart Guides定位您的选择，如下所示，不要忘记将Radius滑块拖动到12.5 。
从工具栏或菜单转到插入>文本 （或按T ）。 在画板上单击一次，然后在“ 检查器”面板中的“ 文本”部分上聚焦。
选择San Francisco字体 ，将大小设置为10 ，将颜色设置为白色（ #FFFFFF ）。 键入下面显示的文本并将其放置，如下图所示。
从工具栏或菜单转到插入>形状>矩形 （或按R ）。 创建一个320 x 60 px的形状，确保它保持选中状态，然后按Command-Option-V粘贴几步之前复制的样式属性。
使用智能向导将您的选择放置如下所示，不要忘记将“ 半径”滑块拖动到30 。
专注于上一步中制作的圆角矩形的左侧。 从工具栏或菜单中转到“ 插入”>“形状”>“椭圆形 ”（或按O ）。 创建一个30像素的圆圈，确保其保持选中状态，然后使用X和Y输入框以数字方式放置所选内容，如下所示。
从“ 检查器”面板中的“ 样式”部分集中，禁用现有的“ 边框”并将“ 填充颜色”更改为白色（ #FFFFFF ）。
选择在前两个步骤中制作的黑色圆角矩形和白色圆圈，然后复制它们（ Command-C> Command-V ）。
确保仅选择副本，然后如下图所示放置它们。 再次，智能指南将派上用场。
专注于底部的白色圆圈。 从工具栏或菜单转到插入>形状>矩形 （或按R ）。 创建一个12 x 10 px的形状，并将其放置在第一个图像中。 将“ 半径”滑块拖动到2 ，禁用“ 边框”并将“ 填充颜色”设置为＃D8D8D8 。
使用相同的工具，创建8 x 10 px的形状并将其放置，如第二个图像所示。 这次将“ 半径”滑块拖动到4 ，禁用“ 填充”并聚焦在“ 边框”上 。 将颜色设置为＃D8D8D8 ，将其宽度增加到3并检查“ 内部对齐”按钮。 确保此形状保持选中状态，然后转到“ 图层”>“转换为轮廓”以将该笔划转换为可编辑的矢量路径。
选择这个步骤做两个形状，然后在工具栏中单击按钮联盟 。
从工具栏或菜单转到插入>形状>矩形 （或按R ）。 创建一个2 x 4 px的形状并将其放置在第一个图像中。 将“ 半径”滑块拖动到1 ，禁用“ 边框”并将“ 填充颜色”设置为黑色。
选择此黑色圆角矩形以及上一步中制作的形状，然后从工具栏中单击“ 减”按钮。
选择锁图标以及后面的白色圆圈，然后从工具栏中单击“ 减”按钮。 最后，事情应该看起来像第四个图像。
向上移动到剩下的白色圆圈。 专注于底部的白色圆圈。 从工具栏或菜单中转到“ 插入”>“形状”>“椭圆形 ”（或按O ）。 创建一个20像素的圆圈并将其放置在第一张图片中。 复制此形状（Command-C> Command-V），选择副本并将其放置，如第二个图像所示。
选择在此步骤中制作的两个形状，然后从工具栏中单击“相交”按钮。
从工具栏或菜单中转到“ 插入”>“形状”>“椭圆形 ”（或按O ）。 创建一个8像素的圆圈，并将其放置在第一个图像中。
选择两个灰色形状以及后面的白色圆圈，然后从工具栏中单击“减”按钮。 最后，事情应该看起来像第三个图像。
从工具栏或菜单中转到“ 插入”>“形状”>“椭圆形 ”（或按O ）。 创建一个44像素的圆圈，禁用边框并将填充颜色设置为#FFFFFF 。
双击此新形状以激活编辑模式。 选择最低点并将其向下拖动22px 。 拖动时按住Shift键可将所选内容的移动限制在垂直轴上。 完成后，双击该点将其从镜像点变为直线点。
确保仍选择上一步中制作的形状，然后转到“ 图层”>“路径”>“偏移路径...” 。 将“ 偏移”滑块拖动到-8 ，然后单击“ 确定” 。 选择结果形状，然后将“ 填充颜色”更改为黑色。
从工具栏或菜单中转到“ 插入”>“形状”>“椭圆形 ”（或按O ）。 创建一个42像素的圆圈并将其放置在第一个图像中。 将其与黑色形状一起选择，然后从工具栏中单击“ 相交”按钮。
从工具栏或菜单中再次转到“ 插入”>“形状”>“椭圆形 ”（或按O ）。 这次创建一个16像素的圆圈，用黑色填充并放置它，如第四个图像所示。
选择水滴形状，然后在“ 检查器”面板中的“ 样式”部分上进行调整。 禁用填充并激活边框 。 将其颜色更改为白色，并将“ 宽度”增加为8 ，然后确保已选中“ 中心”和“ 圆角连接”按钮。
选择两个黑色形状，然后将其填充颜色更改为白色。
选择第二个图像中突出显示的三个形状，然后从工具栏中单击“ 组”按钮。 确保已选择您的组并将其放置，如第三张图所示。
从工具栏或菜单中转到插入>文本 （或按T ），然后添加两段文本。
选择光环 字体，将大小设置为50 ，将颜色设置为白色（ #FFFFFF ）。 键入以下所示的文本并将其放置，如下图所示。
首先，下载希腊岩石和蔚蓝泻湖的鸟瞰图 照片或您喜欢的任何其他照片。
选择覆盖整个画板的灰色矩形，然后从“ 检查器”面板中的“ 样式”部分集中。
单击填充颜色井，然后在弹出窗口中单击右侧的图像填充按钮。 通过选择选择图像中选择你的形象......而你草图设计完成。
这是它的外观。 我希望您喜欢这个Sketch应用程序设计教程，并且可以将这些技术应用到将来的项目中。 请不要在评论部分分享您的最终结果。
随意调整最终的Sketch设计，使其属于您自己。 您可以在GraphicRiver上找到一些很好的灵感来源，并提供有趣的解决方案来提高您的Sketch UI技能。
翻译自:
sketch放入app组件
本文发布于:2024-01-28 20:30:41，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170644504510084.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
