个性化阅读
专注于IT技术分析

立即使用Sketch和Looper创建弯曲的插图

本文概述

你花费多少时间尝试为你的设计创建独特且富有创意的插图?可能比你想要的更长。

Looper可让你减少插图制作时间, 同时创建完全原始的插图。它是一个新的Sketch插件, 可让你通过多次复制, 移动和旋转对象来创建独特的形状和图案, 从而使插图更加弯曲。

今天, 我将展示如何使用零绘图技能, 在20秒或更短的时间内为你的应用程序设计, 横幅和背景创建令人难以置信的插图。

随意下载我在教程中创建的原始Sketch文件。

为什么要用Looper?

我一直在研究各种插件和应用程序, 以帮助我创建原始插图, 并且我发现Looper效果最佳, 因为它使我能够在几秒钟内创建复杂的插图, 而以前我只是梦想自己创建一个。你可以创建多种类型的插图, 例如规则或随机的图案, 背景, 甚至徽标形状。

使用Sketch和Looper制作的插图

教程

常规Looper流程和技巧

使用Looper时, 你始终必须从一个简单的形状开始。要运行”循环”, 可以使用CMD + L, 也可以通过以下方式浏览插件菜单:PLUGIN> LOOPER> LOOP。你可以在单个图层或一组图层上使用Looper。

请记住, 如果要创建复杂的大型图案, 则计算机可能需要很长时间才能呈现结果。另外, 我注意到, 如果你使用键盘上的向上和向下箭头设置其值, 则Looper的效果会更好。如果在使用向上或向下箭头的同时按住SHIFT键, 则这些值将增加10, 而不是1。

Sketch的Looper插件-流程

抽象形状

用Looper和Sketch制作的抽象形状

理解Looper如何工作的最好方法是创建完全抽象的东西。从矢量工具开始, 绘制你喜欢的任何形状。然后运行你的循环(CMD + L)并随意进行设置。

Sketch形状设置
Sketch设置的Looper

同样, 你也可以创建整个背景。在图层上添加一些渐变效果会为你带来非常酷的效果:

用Sketch和Looper制作的最终抽象背景
Sketch形状设置
Sketch设置的Looper
订阅srcmini设计博客并接收我们的电子书

简单模式

用素描和弯针制作的图案

Looper不仅是生成抽象形状的理想选择, 而且还是创建简单, 创意或随机模式的理想选择。在上面的示例中, 我使用了一个矩形来形成整个图案。要构建均匀分布的模式, 请使用Looper中的”形成网格”部分。我通过旋转和不透明度将图案随机化, 这在不到10秒的时间内给了我奇妙的效果:

在Looper for Sketch中创建图案
Sketch起始形状设置
Sketch样式设置的Looper

饰物

使用Sketch和Looper制作的3个装饰品

你还可以使用Looper创建数学上完美的装饰品。画一条垂直或水平线, 并在其旁边添加一些元素。我用直线和圆创建了一个简单的示例。查看下面的内容, 看看仅通过更改份数就可以创建多少个不同的装饰品。从最小数量的形状副本开始, 然后逐个增加, 这是一个好习惯。这样, 你将看到你的模式如何随时间变化。

使用Sketch和Looper创建装饰品

请注意, 我是如何仅使用默认的旋转功能并以两个副本开头的:

Sketch起始形状
Sketch设置的Looper

3D效果

使用Sketch和Looper制作的3D图像

我注意到, 通过玩转Sketch图层, 可以创建令人印象深刻的3D效果。制作3D图片的关键是在初始形状中添加一些渐变和阴影, 然后在”移动”部分中复制该形状。旋转和缩放在这里也有帮助:

Sketch起始形状设置
Sketch设置的Looper

粒子球

在Sketch和Looper中用粒子制成的球体

通过复制单个点可以构建什么?好吧, 一方面, 你可以创建一个由粒子制成的球体。在生成大量具有随机比例和不透明度的点之后, 只需在Sketch中将其用椭圆形遮罩即可:

Sketch起始形状
Sketch设置的Looper

波浪效应

一条直线能做什么?通过沿着一条轴将线移动几个像素并非常缓慢地旋转, 你可以创建一个很酷的波浪, 如下例所示:

用素描和弯针制作的波浪
Sketch起始形状
Sketch设置的Looper

Tron 1982 –建筑网格

受Tron 3D启发的图片通过Sketch和Looper重新创建

最后但并非最不重要的一点, 让我们从Tron重新创建插图。通过复制两个简单的形状(直线和矩形), 你可以构建透视图网格:

Sketch起始形状

你要做的就是在这些形状上使用Looper两次。首先, 复制矩形, 比例按百分比递增。你可以在”不透明度”部分中增加所有实例的不透明度。在第二步中, 将行复制为默认设置。

用Sketch和Looper重新创建的Tron 3D插图

等等!在20秒内制作出看起来像Tron的透视网格!

Sketch设置的Looper
Sketch设置的Looper

你可以使用透视网格来创建其他3D插图, 如下例所示:

用于创建插图的透视构造网格
用于创建插图的透视构造网格

其他例子–悉尼

在这一点上, 你可能已经注意到Looper为你提供了无限的可能性来制作真正复杂的插图。在下面, 我又做了三个鼓舞人心的示例, 每个示例都有一个初始形状和创建它们所需的设置, 以便你可以复制它们或将其用作创建自己的插图的基础。

悉尼歌剧院的素描和Looper插图
Sketch起始形状设置
Sketch设置的Looper

快死星了

用素描和Looper说明几乎死亡之星
Sketch起始形状设置
Sketch设置的Looper

深海

用素描和Looper描绘的深海生物
Sketch起始形状设置
Sketch设置的Looper

• • •

在srcmini设计博客上进一步阅读:

  • 电子商务UX –最佳做法概述(带有信息图)
  • 以人为本的设计在产品设计中的重要性
  • 最佳UX设计器产品组合–启发性的案例研究和示例
  • 移动接口的启发式原理
  • 预期设计:如何创建神奇的用户体验
赞(0)
未经允许不得转载:srcmini » 立即使用Sketch和Looper创建弯曲的插图

评论 抢沙发

评论前必须登录!