本文概述
- 为什么要用Looper?
- 教程
Looper可让你减少插图制作时间, 同时创建完全原始的插图。它是一个新的Sketch插件, 可让你通过多次复制, 移动和旋转对象来创建独特的形状和图案, 从而使插图更加弯曲。
今天, 我将展示如何使用零绘图技能, 在20秒或更短的时间内为你的应用程序设计, 横幅和背景创建令人难以置信的插图。
随意下载我在教程中创建的原始Sketch文件。
为什么要用Looper? 我一直在研究各种插件和应用程序, 以帮助我创建原始插图, 并且我发现Looper效果最佳, 因为它使我能够在几秒钟内创建复杂的插图, 而以前我只是梦想自己创建一个。你可以创建多种类型的插图, 例如规则或随机的图案, 背景, 甚至徽标形状。

文章图片
教程 常规Looper流程和技巧
使用Looper时, 你始终必须从一个简单的形状开始。要运行” 循环” , 可以使用CMD + L, 也可以通过以下方式浏览插件菜单:PLUGIN> LOOPER> LOOP。你可以在单个图层或一组图层上使用Looper。
请记住, 如果要创建复杂的大型图案, 则计算机可能需要很长时间才能呈现结果。另外, 我注意到, 如果你使用键盘上的向上和向下箭头设置其值, 则Looper的效果会更好。如果在使用向上或向下箭头的同时按住SHIFT键, 则这些值将增加10, 而不是1。

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

文章图片

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

文章图片

文章图片

文章图片

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

文章图片

文章图片

文章图片
饰物

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

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

文章图片

文章图片
3D效果

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

文章图片

文章图片
粒子球

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

文章图片

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

文章图片

文章图片

文章图片
Tron 1982 –建筑网格

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

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

文章图片

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

文章图片

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

文章图片

文章图片

文章图片
快死星了

文章图片

文章图片

文章图片
深海

文章图片

文章图片

文章图片
【立即使用Sketch和Looper创建弯曲的插图】? ? ?
在srcmini设计博客上进一步阅读:
- 电子商务UX –最佳做法概述(带有信息图)
- 以人为本的设计在产品设计中的重要性
- 最佳UX设计器产品组合–启发性的案例研究和示例
- 移动接口的启发式原理
- 预期设计:如何创建神奇的用户体验
推荐阅读
- 不断发展的表情符号(为信息的新面孔设计)
- 不要试图改变世界,而是要设计一个玩具
- 遵循趋势(敬意 vs 设计抄袭)
- 教程(如何创建自定义图标Webfont)
- Android开发 广播监听系统的各种状态
- 人工智能APP-人脸识别Face Detection
- 人工智能APP-物体识别
- app+pc的sdk
- 基于Dapper的泛型Repository