类型说明项目:实验性数字工作流

Trevin是WebFX的业务开发高级总监。他参与过450多个营销活动,20多年来一直在建设网站。他的作品被《搜索引擎土地》、《今日美国》、《快公司》和《公司》推荐。

预览

点击下面的预览可以看到放大图

简介

这种实验性的数字工作流程,我们进行了大量的实验,跳过了铅笔和纸的草图阶段(这是我在我的文章中提倡的)前一教程)在Illustrator CS5中特别容易,有了新的工具,如形状构建工具和笔画宽度工具,以及绘制命令,如在后面绘制和在里面绘制模式。

我还将谈论我如何利用我的图形平板电脑,使这个数字流程更好,更快。

在本教程中,您将看到一个总体概念:为了拥有“最流畅”的工作流,您应该尽可能多地记忆和定制快捷方式。

要从本教程中获得最大的收获,您必须了解Illustrator CS2及以上的基础知识。

第一步:找到字体

当做说明性排版艺术作品,可考虑使用较粗的字体(参阅此系列的免费粗体无衬线字体),因为它们给了我们更多的表面积。我在这里使用的字体是Futura Extra Black。

步骤2:在Illustrator中创建一个新文档

现在打开Adobe Illustrator,创建一个新文档(Cmd/Ctrl + N),然后使用如下所示的建议设置。

在Illustrator中创建一个新文档

步骤3:制作一个布局网格

对于这幅作品,我首先做了一个网格,只是为了得到一些比例和结构。

首先,制作一个矩形,填充A4风景画板。使用任何你想要的笔画和填充。

制作布局网格

要将其切割成网格,使用拆分成网格命令,通过对象>路径找到。

制作布局网格

我使用了6×6”的设置,没有排水沟。一旦你将矩形分割成网格,点击Cmd/Ctrl + 5将其转换为参考线。

您也可以通过“查看>指南>制作指南”使用“制作指南”命令。

从布局网格开始总是好的,尤其是在排版工作中,因为它给了你一些结构和一些规则(如果需要的话,你总是可以打破这些规则)。

制作布局网格

第四步:造单词

用文字工具(T)用你想要的粗字体输入你想要的单词。我输入了“DESIGN instruction”。

造词

用选择工具(V)选择你的类型,并通过输入>创建轮廓(Shift + Cmd/Ctrl + O),使它们成为轮廓。

造词

提示:按住Option/Alt键,然后把你的字体拖到粘贴板上复制一份,以防你以后想要更改任何单词。

选择轮廓的类型,然后按Shift + Cmd/Ctrl + g取消分组,每个字符现在都可以自己选择,以调整其字距、跟踪、前导和其他特征。

我们本可以在文字仍然是一个可编辑文本对象的情况下使用字符面板来调整跟踪和引导,但我更喜欢这样做,因为我觉得我可以更好地控制每个字符的空间和位置。

此外,有不同的做事方法总是好的;它让你对工作充满激情。

注意并记住“上一个对象”(Option/Alt + Cmd/Ctrl +])命令和“下一个对象”(Option/Alt + Cmd/Ctrl +[)命令的快捷方式。使用这些快捷键配合左、右、上、下方向键来移动字体。这比每次你想要选择下一个字符时都要把手移到鼠标上要容易得多。

造词

新建一个没有边和参考线的窗口

在继续进行字母间距和前导调整之前,首先创建一个新窗口(window > new window)。

造词

在新窗口中,找到应用程序栏上的“安排文档”下拉菜单,然后选择“2-Up”选项,该选项将垂直并排显示您的工作。

造词

在其中一个窗口(取决于偏好-可以是左边或右边),切换隐藏边缘(Cmd/Ctrl + H)和隐藏参考线(Cmd/Ctrl +;)。

这样做可以让你有一个窗口,它总是在一个很好的可视范围内,不受参考线和选择边的干扰。

第六步:把单词切碎

下面是参照网格并调整了跟踪和引导后的型号。单词“DESIGN”也被分开,这样每个字母都可以用不同的笔画和填充来着色。

造词

在黑色填充类型上,使用钢笔工具(P)在它上面创建一个图案,白色笔画,填充为None。

造词

选择“DESIGN”类型和白色描边,然后对选区应用活动油漆(对象>活动油漆)。

造词

当一切仍然选中时,应用分割效果(effect > Pathfinder > Divide)。需要注意的是,您应该使用效果而不是命令;探路者面板下的“分割”命令将无法完成我们想要完成的任务。

造词

当仍然选中时,展开所选对象的外观(object > Expand appearance),这应该会导致该类型被分割成不同的部分。

现在按D键将默认的黑色笔画和白色填充应用到剪切文本上。

我喜欢在上色之前这样做,因为这给了我一个很好的起点。

造词

步骤7:着色技术-颜色样本+滴管工具

你是否曾被色彩灵感所困?如果是这样,那么只需看看Illustrator中可用的各种样本库即可。对于这件作品,我选择了儿童物品配色方案(Window > Swatch Libraries > Kids Stuff)。

造词

虽然Illustrator中的色板面板非常方便,但我更喜欢在我的实际工作画板(或画板外的空间-纸板)上制作我自己的一套色板样本。

首先,用矩形工具做一个完美的正方形,在工具面板上点击工具,然后按住Shift并在画板上拖动一个正方形。

然后Alt/Option +拖动这个正方形来复制。完成后,点击Cmd/Ctrl + D复制正方形。

造词

现在你有了这些正方形,选择你想要的色板颜色,只需拖放正方形对象来填充它。

造词

选择所有的正方形并将它们的笔画改为None。

现在你已经有了这些样本,是时候使用滴管工具(I)作为油漆桶工具的替代品了。

用滴管工具,从你已经创建的色板中采样一个颜色,然后选择/Alt +单击你想要上色的物体。

第八步:细化工作时间

下面的水滴细节形状由一个圆形和一个矩形组成。它们是使用形状构建工具(Shift + M)组合的。要使用这个工具,你首先必须选择你想要组合的两个形状。

然后使用工具在想要合并的区域中拖动两个形状。

要制作水滴的阴影,选择你刚刚组合的形状,并按Shift + D切换到后面绘制模式。

在后面绘制模式激活时,Option/Alt +拖动形状,在它后面复制一个副本。

一旦形状完成,将其拖放到画笔面板中,使其成为艺术画笔,确保在出现的对话窗口中选择按比例缩放选项。

使用笔刷工具(B),选择你刚刚创建的笔刷,然后为这个特定的细节创建一个新图层,因为这是一个很好的实践,将你的细节分离到另一个图层上,以保持你的工作有组织,并使它们易于隔离和选择。

在新图层上,在按住Shift键的同时,刷到艺术上-这可以确保你画在一条直线上。

当你对你的细节笔触感到满意时,按Cmd/Ctrl + A(选择> all)选择图层的所有内容,并通过对象>展开笔触的外观。注意这样做是如何将笔刷变成可编辑路径的。

现在你可以使用上面讨论的技术,使用你的颜色样本和滴管工具来给它们上色。

在下面的例子中,我使用相同的填充色作为基础色,对于阴影,颜色是基础色的更深变体。填充色不一定要比填充色深。

注意,红色的水滴带着紫色的阴影。我用紫色是因为它是相邻的颜色。我发现考虑到元素周围的颜色会给作品带来更大的深度和真实感。

步骤9:一些对比鲜明的形状来吸引人

最好有与类型工作有对比的元素。它提供了兴趣和个性。在下面的例子中,我选择“INSTRUCT”,并应用圆角效果(effect > Stylize > round Corners)。

我想提醒你们,这种效果并不完美;这只是一个开始。

一旦你应用了圆角效果,而选择仍然活跃,转到对象>展开外观。

接下来,是时候“巧妙处理”锚点了。使用直接选择工具(A),转换锚点工具,以及任何你喜欢的工具来清理锚点,并细化圆角效果产生的路径。

步骤10:添加更多细节

由于这个项目的有机性质,我倾向于跳来跳去,做不同的事情。这里,我再一次展示了更多的细节。为什么?

没有别的理由,只是因为我喜欢。这时项目开始变得更加直观和自然。

在制作这些细节和元素时,有一种玩耍和实验的元素,你只需要记住玩得开心,探索不同的技术,想出有趣的东西和新方法。

我首先为我的新细节工作创建一个新图层。这只是让后面的选择更容易。

我用椭圆工具和探路者面板创建了几个对象,并使用滴管工具技术为其上色。

但随后我又冲动地想回到“INSTRUCT”类型,并为其添加更多细节。

所以我稍后会重新审视这个图层,并完成我的细节。

步骤11:完成细节工作的另一种方式

在通过动态绘制+分割技术添加细节到“指导”之前,创建一个新层,然后复制“指导”填充到它上面,这样你就有了一个副本。这只是当我要对花了一段时间才做出的事情做出重大改变时,我有时会采取的预防措施。

在原来的“指示”层,双击“N”进入隔离模式。

在隔离模式下,选择“N”并锁定它(对象>锁定>选择)。

与“N”锁定,使用钢笔工具(P)与黑色笔画和填充无波浪线。通过按住Option/Alt并拖动复制所需的波浪线。

一旦你完成波浪线,解锁“N”对象通过对象>解锁全部。

现在应用我们在本教程前面讨论过的Live Paint + Divide效果技术,用波浪线切割这个形状。

步骤12:增加更多自发的细节工作

再次,为一个新元素创建一个新图层,并将其合并到我们的作品中。

这个设计元素是简单地用一个白色的圆在一个蓝色的圆上面。一旦圆圈被绘制使用椭圆工具(L),他们然后分组(Cmd/Ctrl + G)。

当选择工具(V)打开后绘制模式时,只需按住Option/Alt并点击并拖动,就可以在后面复制它们。

为了创建变化并调整单个云泡的位置,我使用了组选择工具(通过单击并按住工具面板中的直接选择工具找到)。在具有组的画板区域上单击一次,可以选择组内的各个对象,双击则可以选择组内的组;一个非常方便的工具!

在这一点上,我开始用黑色填充云的想法。

但我真的不愿意选择每一个白色填充的对象;只是会花太多时间。这时我们的魔棒工具(Y)变得很方便。在工具面板中选择工具,然后隔离云层,以确保只有云层是可选择的。

然后在魔棒面板,切换填充选择设置,直到你只能选择白色填充。

一旦选择,改变填充颜色,如你所愿。

步骤13:塑造构图

新建图层frame。

在新建的frame图层中,用矩形工具创建一个与画板相同大小和位置的矩形,然后剪切(Edit > cut或按Cmd/Ctrl + X)。

制作另一个比画板大得多的矩形,然后按Cmd/Ctrl + F将先前的矩形粘贴到前面。

用选择工具(V)选择这两个项目,用形状构建工具(Shift +M),在中间的矩形中选择/Alt +单击,显示画板的内容。

正如你所看到的,形状构建工具是Illustrator CS5的一个强大的补充,因为它是一个直观的探路者。

步骤14:用描边宽度工具和艺术笔刷创建高光

我们将使用新的CS5描边宽度工具在我们的构图上轻松创建高光。

开始绘制高光,首先用直线工具(\)画一条线。这一行的描边颜色应该突出于云颜色之上,它的填充值应该为None。同样,在描边面板(Cmd/Ctrl + F10),确保它有圆形的结束。

在工具面板中选择描边宽度工具。

这个工具真的很有趣,所以只管玩它。关于这个工具,需要知道的方便的事情是,如果你想调整笔画的一个边缘,按住Option/Alt并拖动工具。

如果你想操纵笔画的两边,用这个工具拖动,它会一起改变两边。

若要使此形状为填充路径,请选中它并展开其外观。

拖动这个新形状到画笔面板,使其成为一个艺术画笔。

这是一个好主意玩周围的设置在艺术笔刷选项对话框。

对于这个特殊的例子,我尝试了拉伸指导之间的选项。这是有用的,当你只需要特定的元素拉伸,当你使用这个艺术刷,但想要保持元素的一端完整。

后来,我改变这个艺术笔刷的设置回到比例比例;这一切都是关于尝试和错误。

添加一个新的高光层,因为这个设计元素可以变得非常丰富。

现在是时候用画笔工具(B)在你的新艺术画笔上刷了。当这样做的时候,有时我发现我不小心把它画得太长了;这是当我使用剪刀工具(C)切割艺术画笔的路径。顺便说一下,如果你不能立即看到剪刀工具,点击并按住工具面板上的橡皮擦工具。

一旦你切割了路径,使用你的选择和/或组选择工具来选择不需要的位,然后按退格或删除来删除它。

步骤15:更多的元素-内部绘制的介绍

有时我很容易感到无聊,所以我必须跳来跳去,做不同的事情来保持创意的流动。我创建了一个“实验”层来测试想法。

下面是一个元素,我已经使用绘制内部模式。

上面的设计元素是我在这个图层中创建的第一个元素的副本,但我改变了颜色。我用选择工具选择了白色填充形状(如果你有分组元素,用组选择工具)。

复制对象(Cmd/Ctrl + C)并粘贴到前面(Cmd/Ctrl + F)。

按Shift + D,直到你看到盒子周围模糊的正方形。

当对象仍然被选中时,取消选择对象(Shift + Cmd/Ctrl + D)。接下来,在这个对象中创建其他元素,你会发现这种模式会自动掩盖你在内部绘制模式下绘制的任何东西。

要将已创建的形状提交到路径中,请选择对象内的路径,然后执行我们前面谈到的分割效果>扩展外观技术。

现在我将向您展示粘贴到内部模式,但首先,我将介绍如何制作一个将粘贴到对象内部的条纹元素。

首先,创建如下所示的对象,然后双击它以进入隔离模式。

选项/Alt +拖动该元素复制一份,然后按Cmd/Ctrl + D复制更多份。

用直接选择工具,选择这些矩形的顶部锚点。

同样用直接选择工具,移动这些锚点,这样它就创建了一个倾斜的形状。

下面是我在几步前保存的初始云元素的副本。选择整个对象并应用分割命令,这次通过寻路器面板(Shift + Cmd/Ctrl + F9)。

然后用魔棒工具,在这个对象中选择相同颜色的东西,并用形状构建工具将它们组合在一起。

我想在浅蓝色填充内粘贴元素,但在此之前,我需要使它成为一个复合路径(对象>复合路径> make)。

选择复合路径,并按Shift + D,直到它在内部绘制模式。

剪切(Cmd/Ctrl + X)或复制(Cmd/Ctrl + C),然后粘贴(Cmd/Ctrl + V)这个复合形状的倾斜元素。

步骤16:要做一些剧烈的改变吗?然后另存为

像这样的数字工作流程的本质严重依赖于无休止的实验,但有时我们可能会觉得实验受到阻碍,因为我们需要一段时间才能创造出我们迄今为止所创造的东西。

如果你急于尝试,那就“另存为”(文件>另存为),然后在新文件上尝试不同的配色方案、构图、布局等等。

这是一个很好的习惯,当你要大幅度改变你的作文。

步骤17:自定义Wacom平板电脑

对于我正在做的作品,我想把每个字母与我为它们制作的细节组合在一起。这需要我使用组选择工具,选择基本字母和细节,剪切它们,粘贴它们,然后在仍然选中的情况下,对它们进行分组。我发现对这篇文章中的每个字母都这样做有点乏味。

因此,为了自动化这个过程并加快我的工作流程,我进入我的系统首选项> Wacom平板电脑(适用于Mac)/启动>所有程序>平板电脑>钢笔平板电脑(适用于Windows)。

选择“应用程序”选项卡的“添加”按钮,然后添加Adobe Illustrator。

使用Illustrator作为此窗口中选定的应用程序,自定义一个平板笔按钮来执行多个快捷键,例如按钮剪切(Cmd/Ctrl + X),粘贴(Cmd/Ctrl + F),并对当前选择进行分组(Cmd/Ctrl + G)。

这不仅有利于加快我们的工作流程,还能确保我们始终如一地做事。

步骤18:使用画板进行试验的另一种方法

在执行这一步之前,转到文件>另存为,并将您的工作另存为另一份副本,因为这是相当激烈的解构。

下面是这个作品的元素组合在一起的愿望。

现在是时候彻底破坏这首曲子的构图了。你现在做了Save As一定很高兴吧?

把不同的元素分开。在这里,我决定把它们放在纸板中,只留下背景。

开始将元素放回去,调整元素的位置、比例和其他转换属性,但也可以随意调整其他属性,如颜色、笔画等。

要在同一文件中尝试不同的构图和实验变体,您可以使用画板工具(Shift + O)在选项栏中启用移动/复制画板选项。

选定对象后,在活动画板中间拖动Option/Alt +。你现在会看到画板和艺术品复制在一起。

下面你可以看到,我对这幅作品的构图进行了三次实验,直到我找到了一个我喜欢的基本构图。我将进一步开发左下角的画板。

步骤19:使用粘贴记忆图层选项重新开始

选择所有你想调整和发展的艺术品。

在图层面板中,启用粘贴记忆图层选项。

创建一个与当前文档具有相同尺寸和设置的新文档。然后粘贴(Cmd/Ctrl + V)在新文档的艺术品。注意图层是如何在这个新文档中保留的。

保存该文档。

步骤20:在调整对齐和间距时使用参考线

在新文档中,启用标尺(查看>显示标尺或按Cmd/Ctrl + R切换其可见性)。

新建一个参考线图层。

开始从顶部和左侧的标尺中拖出参考线进行对齐和空间调整。在下面的例子中,我使用了一个参考点,比如角色的基线。现在您可以定位和转换其他字符,使它们与参考线对齐。

如果在使用转换工具(如缩放、旋转等)时,将参考点重新定位到参考线上,这个过程会变得更容易。

在调整空间时,您可能会发现将一组参考线复制到另一个位置是有益的。对于这个例子,我这样做是为了使前导空间一致。您可以使指南可选,然后通过按住Option/Alt并拖动(如果它们是解锁的)来复制它们。

然而,当对齐对象时,你需要锁定参考线,因为你不想不小心移动它们。

因此,记住Lock Guides快捷键(Option/Alt + Cmd/Ctrl +;)是很实用的。

步骤21:创造深度的错觉

获取或重新创建每个角色的基本形状。制作它后面的基础字符的两个副本(当你在绘制后模式时发送到后面),然后偏移每一个(对象>路径>偏移路径),使它们显示在字符的顶部和底部。

用图案字符主色的较深变体(和较浅变体)为底部形状着色。在本例中,颜色为蓝色。

如果你愿意,对每个字母都这样做。

把这些基本形状的角磨圆。

您可以使用铅笔工具编辑路径,直接选择工具(编辑锚点),转换锚点,或添加/删除锚点工具;选择权在你。

步骤22:重叠元素

一旦你按照期望的间隔和对齐字符,开始重新将元素引入组合。

我使用一些元素重叠在角色上,因为它也强调了深度的错觉,并为作品带来凝聚力。

步骤23:反思你的作品

偶尔,我喜欢坐下来,放下绘图板,反思我的作品,看看可以做些什么来改进它。

在这个过程中,我认为也许需要用一些元素把作品绑在一起,让构图更有凝聚力。

为了制作一个元素来引导眼睛,并给作品带来凝聚力,我首先在背景层上面新建一个层。

然后创建如下所示的元素。注意它是如何从D字符开始逐渐变细的形状-在D字符处最粗,并向右下角逐渐变细。

步骤24:试错

仍然希望在作品中创造凝聚力,现在我想创建白色元素,将“指示”这个词联系在一起。

我首先用铅笔工具创建一个漩涡路径,使这个路径的笔画粗和圆的结束。

现在使用我们新发现的工具:描边宽度工具。试验并使路径在不同的部分逐渐变细。

通过复制和组合“INSTRUCT”字符的基本形状,使用形状构建工具或探路者面板。

展开你所做的白色改变笔画的外观,然后Shift +单击基本字符形状。

选择这两个元素,选择形状构建工具,然后选择/Alt +拖动/点击工具,使白色笔画看起来像编织在字符内外。

我发现仅仅是白色的锥形笔画不足以将“INSTRUCT”联系在一起。因此,再次复制字符基形状,将它们发送到主要字符形状后面,然后应用偏移路径效果(effect > Path > Offset Path)。

应用效果后,展开这个选区的外观(对象>展开外观)。

如下所示,我删除了白色领带的中间部分,因为它开始与偏移的路径冲突。

步骤25:着色(不重复,但直观)

为了让这部分更突出,我在一个单独的图层上给它一些阴影。这个图层上的阴影元素是用钢笔工具(P)手工制作的。

在着色时,你将使用三种工具:颜色面板(F6),钢笔工具(P)和滴管工具(I)。我建议你记住这些工具的快捷键,因为它将使重复的着色过程更加有机和有趣。

将颜色面板移到你工作区域的中间也是一个好主意,这样在这部分过程中就很容易够到。

如果您有图形平板电脑,您可以自定义钢笔按钮来激活滴管工具和钢笔工具。

当我做一些重复性的事情时,我喜欢自定义这些按钮。

在做这种着色工作时,你可能会发现使用本教程前面建立的两个视图非常方便。

第26步:细节真的很重要

我发现我们之前做的高光已经不能用了,所以我删除并修改了它们。

不要害怕拿出和改变那些根本不起作用的东西;你会发现,大多数时候,这样做可以提高作品的质量。

为了给作品一种背景感和空间感,我给了它一个非常基本的阴影和一些纹理细节,表明它是在沙地上。

近。暂停片刻,再一次反思你的作品。检查是否有需要调整的地方,比如偏离的锚点、偏移路径等。

当你高兴的时候,你的作品就可以输出了。

你可能想用它作为桌面背景,打印海报,无论什么。

步骤27:导出时间!

一旦你对你的作品完全满意,就可以把它导出为JPG格式了。

进入“文件>导出”。

指定名称、要保存的位置和文件格式。确保选中“使用画板”选项,然后瞄准所需的画板。

使用以下设置,就完成了!

教程汇总

在本教程中,我希望您已经获得了一些有价值的见解,了解数字工作流如何能够非常直观、有机、实验性和有趣,特别是在图形平板电脑和Illustrator CS5中的新功能的帮助下。

我想与你们分享的主要信息是,游戏、实验和不时停下来反思你的工作是这种数字工作流程的组成部分。

最后,我希望本教程已经告诉你不要害怕尝试和错误,如果它们与作品不和谐,可以更改/删除元素。

WebFX职业

加入我们的使命,为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!