本文概述
- 为什么要用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