学Sketch:如何快速使用Sketch绘制一个登录界面设计

分享到:更多 ()

Bohemian Coding出品的Sketch是一款极佳的交互设计工具。在这篇初级水准的教程中,我将向你展示如何使用Sketch进行设计。不需要你之前对这个软件有所了解,放轻松,用你的空闲时间来学些新的知识。

我将向你展示如何设置一个简单的绘图板,如何使用基本的工具创建图形、布尔操作、检查面板和图层列表。我们将要看到如何改变属性,组织图层,载入图像和其他你在使用Sketch的过程中需要使用的技术。

(@设计派小温 小编多嘴一句:目前Sketch只有Mac版本,所以使用Windows的同学可以只看看设计方面的内容,跳过操作方面的。)

1设置绘图板

第1 步

让我们先来新建一个文件吧。你打开了Sketch3了吗?好的,这就是你需要做的!让我来解释一下。Skecth默认为你设置一个没有边界的画布供你工作,你在创建元件的时候不用担心元件会超出边界。

让我们接着往下走,老添加一个绘图板。绘图板使得你在没有边界的Sketch画布上有一个固定的框架。

要创建新的绘图板,在顶部的菜单栏或者工具栏中选择插入——绘图板,点击并拖动至画布之内,你会发现在你拖动的时候Sketch显示了长度和宽度值。创建一个600*800px的绘图板。

sketch-make-artboard

提示:我们可以根据需要创建任意数目的绘图板,我们同样可以在屏幕左侧图层列表中改变绘图板的名称,或者使用右侧的观察器面板改变它的位置和角度。想要删除绘图板的话,选中绘图板并按下Delete键。

sketch-rename-artboard

sketch-artboard-size-position

例如,我们使用观察器面板将绘图板的位置改为X=0 Y=0。你也可以在画布上随意拖动绘图板的位置。

提示:选择视图——显示网格来激活Sketch的默认网格。在你需要的时候它们能帮助你准确定位。

第2步

现在我们要来改变绘图板的颜色。选择你的绘图板并注意观察器面板,找到背景色选项并点击右边的色块,一个颜色选择器会弹出来。选择一个你想要的颜色。你选择什么颜色并不重要,在这里我们据习惯选择一种较浅的灰色。

sketch-color-picker

你的绘图板完成了,现在我们开始布局工作!

sketch-artboard

2.设计基础

第1步

选择插入——形状——矩形,在你的绘图板上创建一个360*500px 的矩形。就像创建绘图板的步骤一样,你可以随便画一个矩形并通过观察器面板调整它的属性。看看,用了网格事情就好办得多!

第2步

选择矩形,注意观察器面板,取消勾选来移除矩形周围的边框。选择填充并将其设置为白色。我们同样可以在观察器面板中设置圆角,将半径滑块拖到10 的位置。

sketch-fill-radius

第3步

使用插入——图形——椭圆创建一个40*4px的圆形。记住,你可以随便画一个椭圆然后在观察器面板中调节它的参数。现在,将它拖动到矩形的中上部分,使用工具栏中的缩放工具,如果你需要放大的话。

sketch-creating-circles

第4步

创建另一个20*20px的圆形,将它与第一个椭圆居中对齐。当移动它的时候,你会发现智能辅助线能够帮助你进行对齐。

skech-creating-circles-2

事实上,想要确认你的元件正确地对齐了,按住Option键,Sketch将会显示元件之间的像素单位距离,就像下图所示的那样:

sketch-smart-guides

第5步

现在我们要将我们绘制的两个圆形变成一个环形了。直接同时选中这两个圆,或者通过图层面板选中也可以,点击工具面板中的减去。

sketch-substract-operation

现在我们就得到了如下所示的图形。

sketch-substract-operation-result

选择这个环形并同时选中你的矩形,在工具面板中选择合并。

sketch-union-operation

呃……我们在这做什么呢?当我们需要一个非基本图形,我们需要自己做——通常情况下我们可以是钢笔工具做,但是通常一个复杂图形可以分解为几个基本图形。我们可以对这些图形进行布尔运算(翻译小编表示大开眼界)。Sketch提供了合并,减去,交叉和差别四个布尔运算来帮助你基于简单图形创建复杂图形。

这些操作都是非破坏性的,所以你可以在图层面板中选择那些基本图层并进行修改。在图层面板的右侧你可以看见有几个小标志显示了某个图形的布尔运算方式,你可以单独地改变它们。

sketch-boolean-operation

第6步

我们的基本形状就几乎完成了!确定你的图形仍处于被选择状态,看观察器面板,选择阴影选项,颜色R=38 G=30 B=10 Alpha=50 X=0 Y=20 Blur(模糊)=20 Spread(扩展)=0。最后你的图形应盖像如下的样子:

sketch-main-shape

3.登录元件

登录界面应当有输入窗口和按钮,那就让我们开始吧!

提示:你可以锁定你的图形来避免误操作。选择图形并选择组织——锁定图层,在图层列表中就会出现一把小锁提示你这个图层已经被锁定了。

第1步

使用矩形工具,创建一个280*50px 的图形,去除边框,将填充色设置为R=239 G=87 B=46,半径设置为2并将它放置在如下图所示的位置。

sketch-create-login-button

第2步

另外新建一个280*70px 的矩形,并 将它用白色填充起来,半径设置为2,将边框厚度调整为1并将边框颜色调整调整为R=234 B=234 B=234。将它移动到橙色矩形的上方,距离10px。将这个图像复制一遍,并将复制出的图形向上拖动80px。

sketch-creating-input-fields

第3步

现在使用矩形工具创建一个20*20px的方形。使用白色填充,半径设置为2,边框厚度设置为1,边框颜色设置为R=234 G=234 B=234。将它移动到橙色矩形下方10px处。现在你的绘图板应该看起来像是这样:

sketch-login-form

第4步

好的,现在我们要来添加一些说明性的文字。选择文本工具然后在画布的任何位置单击以插入文本。你可以看到观察器面板同时进行了切换以便让你看到当前文字的属性。

提示:你可以拖动一个方框来限制文字的边界,当文字太长时,它就会减小文字的大小。

输入USERNAME并在观察器面板中调整它的属性:使用Montserrat font字体,大小=11 间距=1 颜色R=204 G=204 B=204。

重新U型安泽文集工具并添加Armando或者随便你想要的任何文字,使用Montserrat font字体,大小=24 间距=0 颜色R=113 G=87  B=44。同时选中这两段文字并将它们以如下方式放置。

sketch-text-login

第5步

上面的步骤完成了用户名输入框的设置,现在讲文本复制一次并向下80px移动它们到第二个矩形框内,修改文字内容。

第6步

添加新文字,分别采用如下的设置。你将要用到Open Sans font字体。

sketch-ui-text-layers

你或许已经注意到Forget your password添加了下划线。要做出这种效果,在观察器面板中点击文本选项按钮来添加装饰性效果。

sketch-ui-decoration-text-options

现在应该如下图所示:

sketch-ui-final-login-form

关于图层组织的啰嗦

现在我们应该回过头来看看图层面板了。我们应当时刻注意给图层进行重命名,或者至少给它们进行编组。想要创建编剧,你只要选取一个或更多图层,然后点击工具面板的编组按钮。你也可以将一个组中的原件拖动到另外一个组中。

一定要注意使用编组功能——不仅仅是在这篇教程之中而是你每一次的创作中,你会感谢从今天开始培养的这个习惯的。

sketch-ui-organize-layers

4.添加logo

我们已经创建了登录界面需要的原件了,现在我们要添加一些品牌形象内容。

第1步

打开我在教程后附带的logo_icon.svg文件。你可以看到这个icon是由几个简单图形做成的。

sketch-ui-using-svg (1)

第2步

使用矩形工具,创建一个30*60px的图形并将它按下图所示方式放置,这一次并不需要100% 和我一样。记住,你可以使用网格和Option键。

sketch-ui-vector-operations-1

第3步

现在在图层面板上,将矩形拖入Shape组,将它放置在顶部。你可以使用这种方式得到一个新图形,这就是Sketch中布尔操作的威力(一众软件冷笑中……)!

sketch-ui-vector-operations-2

第4步

你还记得我们之前谈到的图层面板右边的小图标吗?现在我们就要用到这个功能了,将第一个改为减去,第二个改为差异。

sketch-ui-vector-operations-3

第5步

非常简单的一部,确认你的新合成图形被选择。选择图层——路径——合并。这样做之后你就会失去这三个子路径和可编辑性,但是以后的步骤就会简单许多。

第6步

保持图形的选择,点击工具栏中的编辑按钮,你会看到观察器面板和图形本身都发生了一点变化,在画布上拖动以选中所有的锚点。

sketch-ui-vector-operations-4

看观察器面板,然后将角度调整为5。然后在填充属性中选择第二种填充类型,线性渐变。你将会看到由一条直线所连接的两点。线上的每一个点都代表着渐变中的一种颜色。

sketch-ui-gradient-color-1

想要改变这些点的颜色,在画布上单击这个店,你会发现观察器中的颜色选择器跳转到当前的颜色,在选择器中做调整,那么渐变点也会发生相应的变化。了解这些以后,我们来将第一个颜色调整为R=245 G=166 b=35,第二种颜色调整为R=239 G=87 b=46。

sketch-ui-gradient-color

最终效果应当是这样的:

sketch-ui-logo-final-shape

第7步

复制这个形状并将它添加到先前的登录界面去。

sketch-ui-logo-final-1

第8步

现在logo 差不多完成了,现在我们来添加一些文字。输入你想输入的随便什么,但是在教程里我使用了myapp,相应的属性设置都在图里。

sketch-ui-logo-final-text

我们的登录界面完成了!

sketch-ui-final-login

5.添加背景

第1步

Sketch除了支持基于矢量的图形,也允许我们添加位图图像。我选择的背景是来自Unsplash的一幅图像——非常漂亮的摄影作品!我选择了Nick West的这个图像

现在回到你的文件。在图层面板中选择绘图板然后选择插入——图像并选择这个图片。警告:这个图片相当的大!我们需要在观察器面板中将它缩放小一些,缩放到1280*876px大小或类似会更加有利于编辑。将它放置在X=0 Y=0的位置然后确保它在所有图层的底部!

提示:如果你在选择绘图板的情况下导入图像,Sketch就会自动以当前绘图板为轮廓创建遮罩。将该图片移到绘图板外面会去除这种遮罩效果。你可以在Sketch的官方说明文档中找到桁架详细的说明。

sketch-ui-background

第2步

在Sketch中我们可以使用色彩调整功能给图片去色,这个功能也在观察器面板中。我们可以调整饱和度、明度和对比度。将饱和度设置为0并将对比度设置为1,9。

现在创建一个600*800 px的矩形。将它贴左上边放置。在图层面板中将它放置于图片图层的上方。将它复制一次并将它们俩的属性按下图进行设置:不透明度100%,混合模式:正片叠底,颜色R=173 G=166 B=152,第二个(上方的那个)不透明度50%,混合模式普通,颜色R=173 G=166 B=152。

完成了!

最后的效果应当是这样的:

sketch-ui-background-2

我希望你能喜欢这个教程!

等一等!还有呢!

嗯,现在你已经创建了一个UI元件了,为你的登录表单添加一些额外的细节会非常有用,不是吗?我在教程中教给你的技术应该已经能够帮助你做出如下的效果了:

sketch-extra-elements

觉得自己能做吗?把你的成果发到评论中来吧!期待你的作品!

最后是说好的附件下载:GitHub

原文:Armando Sotoca

原载:tuts+

翻译:设计派-小温

 

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » 学Sketch:如何快速使用Sketch绘制一个登录界面设计

1
分享到:更多 ()