Sketch制作一幅夏日海滩元素的线条画作-实战教程-Sketch教程

原文地址:

Create a Summer Inspired Stroke Art Typography Piece using Sketch

在本教程中将告诉你如何只用线条和平面色彩来制作一个时尚排版片。我们将使用Adobe Illustrator的替代软件——Sketch,Sketch是由Bohemian Coding公司开发制作,并可以提供免费试用服务。随着Adobe公司宣称不再开发Fireworks,Sketch这一矢量软件凭着它自身具备一系列独特的功能和工具成为一个非常好的替代选择。

在这篇教程中我将尝试尽可能多用基本工具和功能,以让你能更好的自己熟悉这个新软件。一旦你习惯了该软件,你可能会发现有更容易、更快的方式来实现相同的功能。

此外,你也可以在Illustrator或其他矢量软件中按此步骤制作。只要你对下面使用到的工具名称与用途有基本了解,这些步骤将很容易互相转换。“带好防晒霜,太阳超级大。”


1.创建文档

首先,让我们打开Sketch,建立画板。如果您以前从未使用这个应用程序,可能需要一分钟以适应新的软件环境。它的工具和功能布局都与Adobe Illustrator完全不同,也没有浮动面板和窗口。

一切都可以在主画板上或周围进行操作。你会发现主要区别是,图层面板在画板的左侧,而工具是沿顶部布局,而各种工具的参数设置则在画板右侧。

步骤一:

一旦你有了创作灵感,通过单击应用程序窗口顶部的画板图标开始。选中该选项,在中央画板上单击并拖动以创建画板。也可以直接绘制出正确的尺寸,最简单的方法:创建一个简单的方形画板,然后使用右侧的Inspector面板,手动输入精确尺寸。对于这个项目,画板尺寸是1300×600px。可以将画板名称设置为默认或者在左边的图层面板上双击画板名称,就可以实现改名。

步骤二:

由于我们这次的作品是相当模块化的,所以启用网格工具使工作更得简单,以便我们能更有效地工作。选择视图图标(位于应用程序窗口顶部,画板图标旁边),然后选择网格设置,然后输入下图的设置。然后再次单击视图图标,并确保网格工具启用。


(译者注:3.0.4版本中视图图标在顶部工具栏的右边)

步骤三:
在这个项目中,我们将重复使用一些工具,所以我们将通过自定义设置让其更易用:右键单击工具栏或前往显示>自定义工具栏......在这里可以添加一些工具。基本工具都已经涵盖,但我们将把频繁使用的剪刀工具拖到一个显眼的位置。如果你觉得某些工具有帮助,请随意添加。

步骤四:

因为成品只有三种颜色,而且是扁平化设计,所以我们填充画板充当背景。为此,请单击工具栏顶部的图形图标(译者注:3.0.4版本中通过Insert>Shape进入),选择矩形(R)工具。单击并拖动以画出一个包含整个画板的形状。默认情况下,栅格捕捉已启用,所以这应该是一件容易的事。矩形创建后,你可以在应用程序右端找到Inspector面板,并通过取消选择复选框来去掉描边,并填充下图的橘粉色(颜色为FF6862)。完成后,右键单击图层并选择锁定图层,防止以后误操作。



2.制作文本:“Summer”

步骤一:

现在要创建自定义文本“Summer”。放大界面以看清步骤,然后单击顶部的图形图标(译者注:3.0.4版本中通过Insert>Shape进入),选择圆角(U)工具并创建一个40X50px的圆角矩形。在右侧Inspector面板上,去除填充颜色并调整描边的位置为居中,宽度为5px,半径为40,并设置为奶油色(如下图,颜色为FFD0B0)。此外,请调整描边的端点和角点至中间的选项(译者注:3.0.4的选项在描边的设置中,请看下图)。



(译者注:建议这里创建图形的共享样式)

步骤二:

另外一个可能有些陌生的特点是,一旦形状绘制完,Sketch会自动切换到选择工具。没有必要为了选择或移动图形而进行工具的来回切换。Illustrator的用户可能需要一些时间来适应,因为你的第一反应将会是按“V”键以使用“选择”工具。但在Sketch里按“V”是使用矢量工具。一旦习惯,长期下来将会大大节省时间。一个圆角矩形刚刚已经绘制好了,按住Alt键,然后单击并拖动来创建图形副本,并直接将其置于原图形的下方,使新图形的顶部和旧的底部相接。

步骤三:

按住Shift键然后单击两个形状,并从应用程序窗口的顶部选择Union(并集)。此时这个新图形依然被选中,然后前往 Edit > Paths > Scissors或在上端工具栏选择剪刀工具(之前添加过)。鼠标悬停在图形上的部分路径将会显示为蓝色,而单击其中一条路径则其会被切除。

因此,删除上图右下处和下图左上处的路径,从而形成一个“S”形,所以上下裁剪的部位是对称的。

裁剪完成后,到Inspector面板并调整位置选项如下图。

步骤四:

相信你现在对该软件已有了大致的了解,接下来让我们重复上述过程来制作其他字母,从而组成第一个单词“Summer”。值得注意的是,其他小写字母的高度都是首字母“S”的一半。

对于“u”这个字母,我们将像之前一样创建圆角矩形并剪掉其顶部曲线。注意要在“S”与“u”两个字母之间的留一些空间,这里将采用10px的间距,即字母之间都会有一条网格线。因为制作的圆角矩形为40X50px,你会发现,一旦“u”上方的曲线被删除,其高度就不再是“S”的一半了。

所以,选中图形,从工具菜单顶部单击Edit按钮并点击的两个开口点之一。然后,按住Shift并单击另一个开口点。你会注意到开口点如果被选中,则周围将出现一个较暗的环,然后按住Shift键,单击并将此点拖动至“S”高度的一半。为了完成“u”,我们将使用Line工具,但其有点不同于其他的形状工具。Line工具能自动捕捉到图形边缘,然后你就可以直接沿着边缘来画线,这样你的线就会变清晰。然而,由于我们的边不是偶数,所以Line工具在这里作用并不大。我们需要做的是单击矩形(R)工具,在“u”右侧边沿线创建一个正方形,然后如图删除不三条多余路径。接着将组成“u”的线条组合起来,通过菜单Arrange > Group Layers。

步骤五:

依然是这些步骤,继续完成“Summer”的其他字母。最简单的方法是,直接把刚刚完成的“u”复制并旋转,以完成两个”m's”。你也可以按住Alt键同时单击拖动“u”以同时进行复制与移动。然后按Command键,用光标移动到边框角落即可以旋转图形,旋转180度,也可以在Inspector面板里的Rotate直接输入角度。因为旋转完后图形会稍微偏移,所以需要根据网格重新调整图形。然后选择环形(即不要那条竖线),按住Alt键同时单击拖动以进行复制,“m”就完成了。

步骤六:

制作“e”需要一些额外操作:创建另一个40×50px的圆角矩形,并用剪刀工具如图移除最右边的一段直线。

切换到Edit工具,如果光标的右下角有一个“+”,证明这个路径上是可操作的。如下图,在右下路径与网格相交的地方补充一点,切换回剪刀工具,删除该路径的上部。

再用矩形(R)工具创建一个40×10px的矩形,然后用剪刀工具减去矩形顶部和左侧线条,以完成字母“e”。


步骤七:

我们继续制作“r”:接复制字母“m”,用剪刀工具剪掉多余的线条就完成了。如下图。



3.制作文本:“Lovin'”

步骤一:

基于单词“Summer”的基础,我们将使用一些其他的方法来完成单词“Lovin'”。

选择矩形(R)工具,并创建一个40×100px的矩形。再选择编辑工具,然后单击左下角的定位点。然后工具栏下方将会出现一组新的选项,将圆角调整为20px。(译者注:3.0.4的圆角半径设置依然在检查器面板)最后用剪刀工具删除顶部与右侧的路径,修剪出“L”的造型。

步骤二:

字母“O”相当的简单,所以不再赘述,只需确保它的大小与其他形状相同(40×50px)。“V”这个字母也是相当简单;从形状列表中选择三角形工具,并创建一个40×50px的三角形,然后将其旋转180度,最后用剪刀工具删掉最上面的路径。

步骤三:

制作“i”:首先,选择矩形(R)工具创建一个高50px的矩形,宽度无所谓,我们只需要左侧的那条路径。接着用剪刀工具删掉上、右、下的路径。用同样的手法制作“i”上面的点,高度为10px。


步骤四:

“n”可以通过简单复制之前制作的“m”来完成,只需删除多余的环状部分即可。

最后创建单引号,重复上面“i”的操作即可,注意这次高度是15px哦~

步骤五:

最后,确保字母的位置一致,把上述制作的“Lovin’”的所有字母组合在一起。然后单击组合好的“Lovin’”,最后在Inspector面板按照下图输入数据以调整位置。



4.制作文本:"Happened So Fast’“

步骤一:

在画板上选择一个新的点,以制作最后一个文本。该文本比我们之前所做的都要小,所以我们将使用更小的边框来创建。边框除了大小改为4px,其他的例如颜色、圆角一概不变。

选择矩形(R)工具,并创建一个15×30px的矩形。然后用剪刀工具减掉顶部和底部的路径。再创建一个矩形,使矩形的其中一个端部相交与“H”的正中间,然后除去不需要路径,组合在一起。


步骤二:

接下来制作“a”,选择椭圆形(O)工具,创建一个15×15px的圆。再切换到矩形(R)工具,并在圆的最右边创建一个高度为15px矩形(宽度无要求),删除上、下、右的路径。接着将他们组合在一起。


步骤三:

两个“p”通过按住Alt键同时点击拖动,以复制刚才制作的“a”来完成。将复制后的“a”旋转180度,然后确保它与网格对齐。在组图层中选择那条直的路径,单击并拖动它最下面的点,拖到30px。选择“p”的组图层,复制并放到合适的位置。

步骤四:

制作“e”:先创建一个15×15px的圆,再选择编辑工具。将光标定位再右下四分之一处(如下图),接着单击创建一个新的点。切换回剪刀工具,剪掉刚刚创建的点与最右点之间的那一小段路径。然后正如之前所做过的一样,创建一个矩形并减去上、左、右的路径以充当e中间那横线。注意矩形不要遮住“e”的那段缺口。

步骤五:

因为之前也做过“n”,这里就不再赘述了。但如果你要复制之前所做的图形,记得将线条宽度调为4px并整体缩小到合适的大小。因为之前也制作过“e”,直接复制过来放在“n”的右边。而“d”则可以通过复制“p”并旋转180度来完成。

步骤六:

“s”的制作跟之前做的没太大区别,但要注意的是这次是用两个15×15px的正圆。

因为“S”开始是一个新单词,所以它与前一个字母的间距要大于之前我们所制作的。所以我将其与“d”的间距设置为30px(两字母之间有五条网格线)。

步骤七:

“So”中的“o”很简单我们就不多说了,接下来讲下一个单词中的“F” 。制作方式跟之前所作的“H”有所相似(译者注:矩形大小为15x30),把下、右的路径减去,接着用矩形工具作“F”中间的横线。注意矩形宽度是10px。

步骤八:

因为“a”之前做过,这里只需要复制即可,要注意“a”与“F”的间距应该以与“F”短横线之距离为准。

然后再制作“s”,创建一个15×15px的圆,用剪刀工具减去左上与右下的路径。切到编辑工具,单击选中最下面的点,然后按住Shift键并点击最顶端的点,从而使其闭合。最后将上述组合成“s”,接着旋转45度。

步骤九:

制作“t”:用矩形工具制作一个25px高的矩形,只留一条侧边。再创建一个10px宽的矩形,并与之前的侧边顶部对齐,只留下边。

步骤十:

最后,将所有字母组合在一起,如下图放置。

文字部分已经完成了,让我们继续完成其他的装饰。


5.制作一个椰子树 

步骤一:

先从树干开始:首先,用矢量(V)工具画一个如下形状。我试图让作图变得更简单,所以绘制的点基本上都在网格上。作图时可以以下图作为参考。画完之后用剪刀工具剪掉最上与最下的两条曲线。最后将边的颜色改为棕红色(颜色为D93A36)、宽度调为5px。如下图布局。

步骤二:

为树干添加一些分割。用矢量(V)工具创建6条分割线,各间距大概为20px。你会注意到当你复制并拜访这些元素的时候,Sketch会自动显示它与其他元素之间的距离。分割线可以摆放得随意一些,这样更具特色。

步骤三:

然后我们将创建一些椰子;用圆形(O)工具创建3个20×20px的圆。这些圆的描边设置为5px,颜色为与树干相同的棕红色,并且用与文字相同的奶油色填充。

步骤四:

继续完成棕榈叶:选择椭圆形(O),创建115×50px的椭圆形,描边颜色也为棕红色,而图形的填充色选择与背景色一致,这在之后进行图层遮盖时将有所帮助。接着选择矩形(R)的工具,并建立覆底椭圆形下班部分的矩形。然后到左侧图层面板上,选择这两个图层,接着在顶部工具栏中选择Subtract工具。

步骤五:

用向量(V)工具创建3个三角形的形状,作为棕榈叶的开口。在制作的适合你可能需要稍微放大图形。3个三角形创建好之后,再次到左侧图层面板上,选择所有三角形和半椭圆形状,接着在顶部工具栏中选择Subtract工具。如果你对切口形状不满意,则可以点击该图标图层旁边的箭头来手动调整。Sketch中有无损的“结合”选项,这个是非常非常棒的~确认无需修改之后,到顶部工具栏选择Flatten,以使这次的Subtract固定不能修改。

步骤六:

把棕榈叶拖出来,现在只需要复制它并进行旋转与对程的操作,5片就够。你可以随意摆放它们,只要不要遮住文本,而且我们之后需要用它们来制作其他元素。在左边我先创建了两个,一个是原来的另一个旋转了45度并缩小宽度至105px。接着将它们两一起复制并水平翻转,然后对齐。最上面那个我旋转了-45度,并缩小宽度至93px。

步骤七:

最后,在树干的底部添加一个边框然后再进行处理,创建一个宽90px的矩形,接着修建无关路径。



6.制作一把遮阳伞

步骤一:

制作遮阳伞,首先我们选择椭圆形(O)工具创建110 X110px的圆。接着选择矩形(R)的工具,并建立覆底椭圆形下班部分的矩形。然后到左侧图层面板上,选择这两个图层,接着在顶部工具栏中选择Subtract工具。最后选择永久拼合。

步骤二:

然后用三角工具,创建一个90×55px的三角形(去边框,颜色为奶油色),放在半圆里。前往图层面板,将半圆放在三角形之上。

步骤三:

选择矩形(R)工具,创建一个至少高120px的矩形。其中一边经过半圆的中心,然后用剪刀工具减去无关路径。再调整图层顺序,使得该直线位于底部。

步骤四:

最后将遮阳伞整体组合起来,并将其旋转-45度,并如下图放置。


7.制作小鸟

步骤一:

现在制作小鸟对你来说简直易如反掌,我们需要做的就是画圆、复制、剪切,最后再旋转复制。首先,选择椭圆形(O)工具,创建一个50×50px的圆圈。用剪刀工具,删除至只剩上半圆。按住Alt键同时单击并拖动来创建这种形状的副本,并使两条路径相接。

步骤二:

复制刚刚制作的小鸟,调整大小并旋转。我想在画作中用三只鸟,尺寸、位置坐标、旋转角度都在下图。



8.制作冲浪板

步骤一:

先制作主体板:选择矢量(V)工具,并创建下图的形状。我想强调的是下图已经完全给出详细处理方法,你跟着来就行。

$("#article_img_list_wrap p img").css("display", "inline").parents("p").css("text-align", "center"); jQuery(function ($) { $("#article_img_list_wrap img").each(function () { var _this = $(this); if (_this.width() > $("#article_img_list_wrap").width()) _this.width($("#article_img_list_wrap").width()); }); });