网页模板sketch（网页模板图片）

本文目录一览：

• 1、sketch是干什么用的？
• 2、来认识一下Sketch
• 3、如何创建sketch 模板
• 4、如何用 Sketch 进行网页设计
• 5、【基础篇】夜雨原创玩转Sketch教程课时2：初识Sketch界面
• 6、sketch新手入门（中文版）-9 控件

sketch是干什么用的？

sketch是一款用来制作矢量绘图的软件。

sketch矢量绘图应用软件，一款适用于所有设计师的矢量绘图应用。矢量绘图也是进行网页，图标以及界面设计的最好方式。

但除了矢量编辑的功能之外，Sketch同样添加了一些基本的位图工具，比如模糊和色彩校正。但是Sketch只支持Macos，其他系统无法体验。

扩展资料

Sketch 软件的特点是容易理解，上手简单，对于有设计经验的设计师来说，入门门槛很低。对于绝大多数的数字产品设计，Sketch 都能替代 Adobe Photoshop，Illustrator 和 Fireworks。

Sketch一个有着出色 UI 的一站式应用。在 Sketch 中，画布将是无限大小的，每个图层都支持多种填充模式；

Sketch 不是一个位图编辑应用。如果使用者想修正一张照片或者用笔刷来画画，不建议使用该软件。

来认识一下Sketch

Jean-Marc Denis（原文作者，前Sparrow设计师，现在在Google工作）在参加WWDC 2013时认识了Sketch的开发团队，所以在第一时间尝试了Sketch，当时由于一些功能的缺失，所以还是折回去使用Photoshop了。过了一段时间，他发现设计师社区开始疯狂着迷于这款新的设计工具，所以决定再试一试，想看看迭代了一段时间的Sketch现在能完成多少原先他需要用Photoshop来做的工作。现在，他80%的设计工作都是由Sketch来完成的，所以写了这篇文章来帮助大家一起了解Sketch。

为什么我们会期待一个新的设计工具？因为当我们更多的关注效率和关注协作，就越发现Photoshop已经不足以满足我们的期待了。下面看看具体的理由：

Photoshop是为图像处理开发的，诸如路径和矢量工具都是后期才加上去的，所以如果你关心一下Photoshop的更新路径，用户界面设计师完全不是Adobe做这条产品时关心的用户群。所以，如果抛去那些复杂的功能，一个为用户界面设计师打造的设计工具完全可以做得更简单，更高效。

相信我们都会觉得为不同的设备输出不同分辨率的素材而痛苦不已吧。或许，你会使用一些第三方插件或是启用一些模板来处理这些事，但依然是很浪费时间的。

Photoshop的引擎是上个世纪为图像处理而打造的，非常的耗费资源，即使是启动一下都要等很久，更别说一次移动多个分组了。话说回来，由于要兼顾Mac和Windows平台，能做到这样已经不容易了。

大公司的执行效率实在太低。不知道大伙是不是和我一样，非常痛苦地等了好几个月才等到Photoshop对Retina屏幕的支持。诸如自动对齐的等功能我已经不做期待了。

有没有梦想过拜托机械的手动保存？Sketch可以做到。Sketch在工作的时候会不断地自动保存成果，并且允许你回复到此前的任一版本。

矢量图意味着可以任意扩展。你没有必要不断地去调整素材的尺寸，Sketch会自动就帮你维持一个像素级完美的作品。如果有的时候你必须用像素点来作图，比如说是画图标或者是插画设计，Sketch 也提供了从矢量切换到像素视图的功能。

你喜欢xScope吗？还是正在用选框工具来进行测量？又或者是难用的网格？Sketch的智能标尺可以帮你轻松地把设计元素的对齐方式、内外间距都调整完美。就我个人而言，这个功能非常节省时间而且避免了复杂的人工计算，是我觉得最有用的功能之一。

在Sketch里我们可以随时随地修改一个元素的圆角、高度和宽度。只需要简单地修改数值就可以轻松调整元素，对于刚从Photoshop切换过来的设计师而言非常好用。甚至会让你产生强烈的依赖。

在Sketch 里你可以很轻松地把多个图形合并，构成一个新的图形。并且Sketch在提供了多种图形合并模式的同时，还允许你随时修改已经合并图形的子图形。这项功能使得你可以很轻松地管理和创造更复杂的图形。

在Photoshop里想要让一个图层有多种混合效果是很困难的。但在Sketch里，你可以很容易给一个图层加上多种混合效果，看看下面的示例就知道了。

自动选择最接近的像素边界可以让一个图形或者是图层自动修正边距到一个像素级完善的位置。比如可以把一个宽度是5.3px的图形自动修正到5px，这样就不会有模糊的像素点和粗糙的图形了。我自己给这项功能设了一个快捷键（Command+Opitons+x），来确保我做出的每一个图形都像素级完美。这比人工一个一个按照网格修改图形高效得多。

有的时候你会做一些充斥文字的设计，样式链接可以帮助你设定一个固定的样式来快速地应用在新的文字上。如果你修改了其中任何一处的样式，那么所有链接该样式的文字都会自动更新到新的样式。并且，这项功能也可以应用在图形上。

用Photoshop的时候，最痛苦的事莫过于切割元素，然后到处素材。Sketch则可以帮助你快速地导出各种分辨率和格式（pdf, eps, svg, png, jpg, tiff）的素材，通常导出只需要一个点击，并且不用借助任何第三方应用程序。

作富文本设计的时候，布局会变得非常重要，这项功能可以帮助你快速地试验不同的方案。

其实可以把网格功能理解成按照纵横两个维度自动地结构化布局内容。这个对于排版布局而言，非常方便。

Sketch的文字渲染引擎非常出色，可以用来做很出色的文字布局和字体设计。因此，你可以放心地放弃Photoshop的抗锯齿功能。

如果你在做一些网页设计，Sketch可以帮助你快速地把你的成果到处成CSS样式。

这是一项小功能，但是确实可以节约你很多时间和精力。

Sketch Mirror是一个Universal App，可以方便你在iPhone或是iPad上查看自己的成果。（作者撰写这个文章的时候Sketch还没有推出官方的镜像工具，所以这一段是译者补充的）。

Sketch是一个小团队，发展非常快速。简单扫一眼Sketch的升级日志，你会发现每一个更新都会带来新的功能。

我非常建议你去使用Beta版本，你会见证Sketch快速的升级。

Sketch团队非常善于聆听用户的诉求，因而软件不断地变得更好。你可以去tenderapp上向他们提出新功能的要求。

如何创建sketch 模板

自己新建模板，创作好文件然后进入菜单栏的 File Save as Template。因为symbols符号功能是用于复用某一具体元素，比如一个按钮，它并不能在不同文件中共享，而模板则可以用来创建无数个独立的文件。

如何用 Sketch 进行网页设计

Sketch基本设置要了解。

画布

按住键盘 A 快捷键，可以创建画布。 Sketch 已经良心的为你默认设置了各种设备尺寸，你想要的全都有

栅栏

通过 Layout settings 设置栅栏[布局参考线]，这个功能好的真是不要不要的[下文回介绍其实际用处]，可以根据需要自主选择每列宽度，间隔宽度以及最外侧 margin 宽度，见下图。

这时画布上就出现了栅栏参考线，文字段落的宽度，按钮的宽度，图片的宽度都可以根据栅栏进行合理设置。通过栅栏布局可以极大的统一页面的布局设置，给人一种和谐美[Ctrl + L 可以快捷键显示/隐藏栅栏]，效果如下。

字体

注重对比和统一。对比是指在需要突出区别的地方用不同字号，粗细和字体突出不同。统一是指对于网站同一元素，使用相同的字体设置，比如 H1, Body Text. 英文字体建议两种即可, 一个 sans-serif 字体作为标题，显眼；一个 serif 字体作为正文，易读。可以提前设计好各个字体的数值，利用 Sketch 的 Style Text 功能进行保存，方便以后频繁使用。也可以再设计的时候，边做边保存[前者适合在经验用户，后者更适合初学者]，如下图。

对字体另外一个重点是确定 line height [行高]，确定行高的作用是方便确定控件上下 margin, 左右 margin 可以通过栅栏进行确定。比如你确定默认字体大小为 20px, 行距为 1.5，则行高 = 20px * 1.5 = 30. 那么控件之间的上下间距则可以设为 30px 的倍数，比如 30px, 60px, 90px, 以此类推。间距和行高相同可以使页面看起来更加和谐美观。

调色板

一个好的配色对界面美观的重要性不言而喻。Sketch 也贴心的为用户提供了颜色版用于记录颜色，方便你重复使用，见下图。

最主要的是一下几个颜色，背景色，默认字体颜色，减淡字体颜色，强调色，边框颜色，和适当数量的辅助色[Material Design鼓励用多种颜色，用鲜明大胆颜色]。这里再说一下阴影颜色，Material Design 建议使用 #000 全黑，然后减弱 opacity 不透明度，而不是直接设置灰度颜色。因为这样可以保证阴影不论在亮色还是暗色背景下都有一个良好的视觉效果。

操作

页面

Sketch 的左侧提供了页面导航列表。用户可以创建不同页面，同一页面中又可以创建不同画布。这样一来，用户便可以将网站的所有页面有条理的保存在一个 Sketch File 中[见下图]，it is amazing!

间距

Sketch 对于排版可谓是考虑的极其周到。学习 CSS 的朋友应该知道在排版时，对于 margin 的四个数值往往纠结不以，往往凭感觉设置。而 Sketch 可以在设计时就解决这个问题，鼠标选中指定元素，按下 Alt 键，界面自动现实该元素的 margin top, right, bottom, left. 精确到 1px 的设计，让设计稿和实现稿无缝对接，见下图。

Sketch 还提供了保存组件的功能。如果某些元素在设计中会重复出现，则可以利用 Symbol 功能进行保存，需要时直接插入即可。一次设计，循环使用。

结构

一个好的交互设计师需要对网站结构有一个非常清楚的认知。这个网站的目的是什么，用户群是谁，为了实现目的需要有哪些功能，这些功能如何组织成页面，页面之间如何跳转，功能如何实现等。比如该网站是销售网站模板的购物网站，导航栏有如下几项：主页，联系页，支持页，购物页，个人账户，购物车，如下图。

先设置主页，然后由主页发散延展到其他界面。当然，这一切应该在 UI 设计之前的交互稿就考虑清楚。UI 更加强调美观性，如何利用美观更好的引导用户实现既定目标。

交互

设计时需要考虑用户使用网站时的交互场景。

界面的交互状态，比如登陆和未登录时界面的不同状态，如下图。

元素的交互状态，Hover 和未 Hover，Click 和未 Click，是否 Disabled等。细节产生美！

插件

Sketch 的插件是独立与 Sketch 本身，可以第三方开发的。在这里像那些默默奉献的伟大程序员们表示无比的敬意。强推插件下载软件 Sketch Toolbox[见下图]。可以一键下载/卸载插件，再也不用从 GitHub 上下载然后拖到指定文件夹了，节省了大量时间。

【基础篇】夜雨原创玩转Sketch教程课时2：初识Sketch界面

安装并打开Sketch软件后，首先看到的是欢迎界面，在欢迎界面，我们可以选择新打开文档，或者打开历史已有的文档。

Sketch的主界面非常的简洁明了，主要分为菜单栏、工具栏、页面/组件、图层区、画布/画板、检查器等几个部分。

一共有12个一级菜单，比较常用的是“Sketch”、“文件”、“插件”这几个。

其中，在“Sketch”中，可以配置组件库和素材；在文件菜单中，可以选择从模板新建一个Sketch文档，或者导出的内容；在“插件”菜单中，可以支持我们按照并使用第三方插件。

菜单栏下方就是工具栏，这里放置一些常用的工具可供我们使用，例如用矩形工具画一个矩形。

右键点击工具栏，选择“自定义工具栏”，即可根据自己的需求定制工具栏。分成3步走：

中间的空白区域，我们称之为“画布”，是可以无限延伸的，我们可以在上面添加形状、线条、图像、文字等内容。

通过添加“画板”，即点击“画板”工具，可以在画布上添加一个画板。另外，Sketch还提供各种尺寸的画板预设，帮助你定义好界面设计尺寸。可以限定设计区域。

在画布的左侧和顶部边缘，有标尺显示，方便我们把握设计尺寸；也可以添加参考线来设计，在标尺上点击，可以添加参考线，把参考线拖动到标尺左上角的位置，松开即可删除参考线。

页面/组件位于工具栏下方，整个Sketch页面左上的位置，在Sketch中，可以用“页面”来组织、区分不同的设计内容，在“页面”上，点击“+”可以新增一个页面，双击页面名称，可以“重命名”页面。

另外，在“组件”面板可以维护组件，后续在组件篇章专门讲。

图层我们可以理解为界面的元素，包括形状、线条、图像、文字等元素，都可以是图层。点击图层右侧的“眼睛”图标，可以显示、隐藏图层；在图层栏底部，可以对图层进行筛选。

选中多个图层（可以在画布或者图层里圈选），右键点击呼出菜单，可以把它们归在一组。

在Sketch界面的右侧，就是检查器，主要是用来调整图层的大小、样式、阴影、模糊等属性，比如说调整矩形的颜色。

该系列课程已经全部上架网易云课堂，完全免费学习，基于最新版Sketch61.1制作，迭代更新速度快。 课程地址，点击篮字直达，可以提前学习全部课程。

对交互设计有兴趣的，可以购买收费课程《零基础入行交互设计》学习。 课程地址，点击篮字直达，现在购买，和夜雨1对1交流设计经验。

sketch新手入门（中文版）-9 控件

控件帮助我们加快我们的工作流，我们可以不断的重复利用我们设计中的元素，当我们对其中的元素改动时，所有的控件也都会更新，我们也可以利用覆盖层来控制我们的独立控件。

要创建一个控件，我们可以选择一个群组，一个美术板，一个层然后在工具栏中选择创建组件，或者选择层创建组件。给你的组件取一个名字，这是你的控件的父级元素，当你创建一个模板的时候，sketch会自动帮助你创建一个实例，如果你对母版进行了更改，会显示在所有实例中。

如果你在创建控件的时候，勾选了发送控件到控件页面，那么控件就会自动发送到控件层，如果你没有勾选，那么你将在当前页面看到控件。

选择 图层从控件中分离，任何与其有关的实例将变成文件夹，母版和实例分开，无关联。

当您创建了一个符号时，您可以在设计中插入任何现有的层。要执行此操作，请在层上单击控件，选择“替换为”，然后选择符号。您选择的符号将调整大小以适应层的大小。

有两种方法可以访问和在sketch中插入符号。

1.通过单击层列表顶部的组件，可以通过画布左侧的组件面板插入符号（图层和组件之间切换）在组件库中可以选择查看“所有”可用的符号以及仅属于文档或特定库的符号。

2.您可以使用“组件”面板底部的搜索栏快速找到要查找的符号，找到所需的符号后，只需将该符号直接拖放到画布上。 快捷键（command +shift+ f）

或者，可以通过顶部工具栏中的“置入”或使用“置入”菜单插入符号。从这里您可以查看文档符号或属于任何已启用库的符号并从中进行选择。

编辑控件有两种主要方法。可以编辑符号母版中的内容，也可以使用替代编辑单个实例。

找到你的母版或双击它的任何实例直接转到它。对主控形状所做的任何编辑都将同步到设计中主控形状的任何实例。完成更改后，选择“返回到实例”返回到实例并查看更改是如何跨实例同步的。

选择一个控件实例，您将在检查器中看到一个覆盖层。通过在检查器中编辑这些覆盖层，可以更改单个符号实例中的内容，而不更改其主实例或影响其任何其他实例。

注意：您还可以直接在画布中为符号实例设置文本覆盖。

选择符号实例并将鼠标悬停在其上以高亮显示任何可用的替代，单击其中任何一个以快速找到它，并在检查器中单独显示它。如果符号具有大量替代（或嵌套替代），则这很方便。

或者，在检查器中单击符号名称旁边的三角形，然后在那里选择。也可以控制单击“图层”列表中的替代以查看与其相关的选项。

注意：即使您已经专注于某个特定的覆盖，移动或复制它之类的操作也将应用于整个实例，而不是特定的覆盖层。您需要使用符号母版来更改覆盖层本身。

可以通过几种方式更改文本覆盖的内容。您可以双击画布上符号实例中的文本层，然后键入新内容，或键入检查器中的覆盖字段。删除该字段中的任何内容都会将其更改回符号母版中的文本。也可以使用字段上方的数据图标填充覆盖。

注意：如果替代文本比符号母版中原来的文本长，则sketch将在文本层扩展时移动文本层旁边的任何层。如果要修复图层并使文字在其上流动，则需要将其锁定在符号母版中。

可以使用填充检查器覆盖任何图像层或形状。您可以将图像拖到预览中，或选择“选择图像…”也可以通过单击数据图标使用数据填充图像覆盖。要删除图像，请单击图像预览并按backspace。

如果在设计中设置了文字样式或图层样式，则可以在检查器的“替代”面板中找到这些样式。

如果已将热点作为原型的一部分添加到符号母版，则可以覆盖其目标艺术板，或选择“无”将其禁用。

选择符号主控形状，并使用检查器中“管理替代”面板中每个可用替代旁边的复选框来选择在设计中的任意位置选择该符号的实例时哪些替代可用。

选择任意实例，然后单击检查器中“覆盖”面板标题旁边的“重置”图标，以删除和重置已应用于该实例的任何覆盖。

若要在不使用覆盖的情况下对单个符号实例进行编辑，您需要从菜单中选择图层›从控件中分离，将其与其主实例分离。您也可以快捷方式控制单击它，然后在那里选择“从控件分离”。按住选项键可将命令更改为从控件中分离所有内容，从而将控件及其包含的任何嵌套控件转换为组。

可以使用检查器中“控件”面板中的“组件”弹出框交换符号。从列表中选择控件或搜索要查找的控件，然后单击将其与当前选定的符号控件。

默认情况下， 交换控件将调整所选实例的大小，以适合其新的控件母版 。要在交换 控件 时保持实例大小不变，请取消选中组件弹出窗口顶部的“按原始大小交换”选项。

使用“缩放”命令，可以像任何其他图层或组一样缩放和调整控件的大小。从菜单中选择Layer＞Transform＞Scale…（ 或按⌘+K） 。边框等样式和属性将与符号本身成比例增加或减少，而不会影响母版控件形状。

若要在“元件”面板和“插入”菜单中将符号组合在一起，请使用以下格式命名符号：控件组名/控件名。 例如，名为Button/Normal和Button/Pressed的两个符号将成为名为Button的组的一部分。

注意：在一个组中出现两个或多个控件之前，它们必须出现在自己的子菜单中。

也可以通过“组件”面板组织控件。只需双击任何控件或组即可重命名它。您可以将控件拖放到现有的组中，或者只需拖动一个控件就可以创建一个新的组。

控件的排列是按照字母表的顺序排列的。

将控件母版发送到“符号”页可以帮助保持事物的组织，特别是在复杂的设计中。它也有助于减少使用控件母版或实例之间的混淆。

若要手动移动控件母版，请将其拖到“图层”列表中的“控件”页标题上，或控制单击它并选择“发送到“控件”页。

若要创建嵌套控件，请将符号实例插入“控件”页上的控件母版。现在，编辑该控件实例的主控形状时，它将在任何位置更新，包括其他控件主控形状中的实例。

也可以通过选择两个或多个控件实例并在工具栏中选择“创建控件”来创建嵌套控件。

注意：可以在彼此之间嵌套多少个控件是没有限制的，但不能在其主控形状中使用控件的实例。

#如何使用嵌套控件替代

若要使用嵌套控件以使其显示为替代， 需要有两个或多个大小相同的控件母版 ，并将其中一个用作嵌套控件。

当您在设计中选择控件实例时，您将看到将嵌套控件替换为任何其他相同大小的控件的选项。这在菜单中很有用，例如，当菜单中的按钮处于活动和非活动状态时。

若要快速访问某个嵌套替代的主控件，请在检查器中单击嵌套替代控件旁边的箭头图标。

当覆盖更改控件的大小时，智能布局将保持控件中各层之间的填充和间距。设置智能布局后，更改控件实例中的替代将自动调整其大小。

要使用智能布局，只需创建一个控件，并为其提供水平或垂直布局。创建该控件的实例并编辑其替代时，智能布局将使用控件主控形状中各层之间的间距和填充作为蓝图，并在调整实例大小时保持它们的一致性。

可以在检查器中设置智能布局属性（当编辑现有的控件母版）或创建新的符号时。

若要使用具有现有控件的智能布局，请指向它的主控器（您可以通过选择该控件的任何实例并在键盘上按Enter键快速到达那里），并选择您希望智能布局如何在检查器的布局面板下调整其大小。

除了选择控件是水平调整大小还是垂直调整大小外，还需要设置控件的调整方向（请将其与文本对齐方式类似）。可以从以下布局属性中进行选择：

垂直：

自上而下

自下而上

从中间

水平：

从左到右

从右向左

从中间

创建新控件时，可以使用“创建新控件”工作表中“名称”字段下的下拉菜单设置这些属性。

注意：将智能布局属性应用于具有文本层的符号时， 需要确保将其设置为“自动高度”（对于垂直布局）或“自动宽度”（对于水平布局） 。智能布局将符号母版中文本层的尺寸与实例中文本层的尺寸进行比较，以确定符号中其他层应如何调整大小，因此固定大小的文本层不会工作，因为它们始终保持不变。

当您提供符号智能布局属性时，您将在显示其布局方向的图层列表中，在其名称旁边看到一个新图标。

如果在已设置智能布局属性时更改控件母版的布局，则该控件的实例可能会出错。 若要解决此问题，请尝试单击检查器中“覆盖”面板下显示的“缩小实例以适应内容”按钮。

注意：您仍然可以对具有智能布局特性的控件中的图层应用调整大小约束。如果你想让一个特定的图层忽略你给它一部分的布局设置，这很方便。例如，可以使用调整大小约束来固定图层的大小，并使用具有水平或垂直布局的符号实例阻止其调整大小。

选择符号的智能布局属性时，将在检查器的布局面板下看到最小高度（垂直布局）或最小宽度（水平布局）字段。

将尺寸添加到这些字段将阻止符号缩小到最小尺寸以下，而不管其替代内容如何。如果将这些字段留空，则符号将缩小到任何大小以适合其内容。

#如何在符号中使用多个智能布局属性

对于更复杂的UI组件，您可能希望在垂直布局中包含水平布局（反之亦然），如下例所示。为此，可以将智能布局特性应用于符号主控形状中的组，以便在不同方向调整不同图层集的大小。

为此，请打开控件母版，选择要在不同方向调整大小的对象，然后对它们进行分组。现在，您可以将一组单独的智能布局属性应用于检查器布局面板下的该组。与符号本身一样，您将在图层列表中看到一个新的组图标，显示它们的布局方向。

如果您有一个控件，其中一个图层指示该符号的最小高度（如下面卡片示例中的图像），则对其旁边较短的文本图层应用覆盖将导致该符号使用不必要的填充调整大小。如果是这种情况，则需要在控件母版中将文本层和指定符号最小高度的层组合在一起。完成后，您将能够覆盖文本层，并且智能布局将知道在文本超过其最小高度之前不会增加整个符号高度。

智能布局不仅在覆盖更改符号实例的大小时有效，在隐藏符号时也有效。为此，您需要一组遵循符号母版布局方向的嵌套组件（例如，具有水平布局的菜单中的一行按钮）。通过覆盖面板隐藏其中一个控件将导致其他控件向上移动并填充空白点。这甚至适用于不同高度和宽度的符号。

关于网页模板sketch和网页模板图片的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。