App宣传视频制作神器,5月设计清单

图片 1

新旧结合,从头了解 Sketch 3 ——  快速复制排列

2017年10月10日,Sketch正式发布V47版本,带来了新功能Libraries,以及针对iPhone X和iPhone 8的支持,一起来看看更新了哪些内容吧。

图片 2

俗话说人靠衣裳马靠鞍,一个出色的展示作品可以极大提升产品的逼格,瞬间俘获用户或甲方的心。说到这方面,就不得不提苹果,每次新版iPhone的渲染视频一放出,真机都没有见到的网友们立即就下了订单。虽然视频的宣传效果这么好,但小公司却无能为力,因为要想做出苹果那样高逼格的3D视频成本实在太高了。

我们经常会有这样的需求,整齐的去重复排列某个按钮或者图标。这里有两个最快速的方法:

1.重要更新-Libraries(图书馆)

Sketch正式版本带来了重磅更新Libraries(图书馆),它可以理解为团队协作版本的“Symbol”,它具备了symbol的所有特性,而且支持设计团队成员之间的共享和协作。其实,Libraries(图书馆)并非是一个新的功能,Sketch插件“Craft”早就推出了Libraries(图书馆),但是,Sketch自身提供Libraries,能让国内团队应对更灵活的网络环境部署,例如在本地局域网上也可以使用Libraries进行协作。

Libraries的使用方法和“Symbol”差不多,为了区分本地的“Symbol”,Libraries的图标也有所不同,同时,更新V47版本后,Sketch提供了一个“IOS UI Design”的Libraries供我们试用,直接通过工具栏的“Symbol”即可试玩。更详细的使用方法,稍后会以更的详细教程给出,请留意。

题图:来自Sketch 44 版本更新介绍 blog

今天就给大家介绍一款最近刚上线的软件——Design Camera,他可以让你用傻瓜式的操作,轻松制作出苹果级别的APP宣传图或视频。

运用 alt 键 和 cmd D

2.重要更新-Smooth Corners(平滑角)

现在Sketch的矩形支持Smooth Corners(平滑角)的方式进行调整,使之更好地达到IOS的适配效果,这对IOS图标设计的支持进一步提升了。

具体的使用方法也比较简单,首先拉出一个矩形,然后设置矩形的“Radius”,再勾选下方的“Smooth Corners”即可,这时,你就会发现矩形圆角的细微变化:绿色比蓝色的圆角更平滑。

每月设计要闻,专注于互联网设计领域内容,汇总精选每月设计师需要了解的互联网设计动态。分为热点资讯、软件工具、设计经验、案例研究、网站推荐、深度思考等栏目。

有的朋友之前可能用过OneScreen这类截图套壳工具,Design Camera正是脱胎于此。只是除了图片之外,Design Camera还可以制作更加吸睛的视频。你只需要提供一张截图或一段录屏,甚至是只要将你的iPhone连接电脑,Design Camera 就可以实时读取 你的iPhone 的屏幕。

图片 3

3.重要更新-针对iPhone X和iPhone 8的支持

5月巨头们都纷纷举办了年中开发者大会,微软在其Build开发者大会上发布了Fluent Design设计语言。Google I/O 2017大会宣布谷歌战略正式从 Mobile First(移动先行)转向 AI First (人工智能先行),对于互联网设计行业是否会带有一定的影响呢?另苹果WWDC 2017也将在6月5日举行,值得关注。

图片 4

使用网格工具

(1)为iPhone X和iPhone 8添加了画板预设

也就是说,现在点击画板“Artboard”即可添加iPhone X和iPhone 8大小的画板了。

Sketch 44版本更新,带来了自适应布局功能,虽然以前也可以用Auto layout插件。Craft插件更新了直接在Sketch上制作原型的功能,但线上预览在国内体验不好,也可以用另一款Sketch原型工具mirr.io。而另一款设计工具Framer发布了新版本,作为一个原型软件,这一次将设计、原型、代码完美融汇,让懂前端代码的设计师更充分发挥设计能力。

▍颜色随意修改

图片 5

(2)自带的组件库也更新了IOS11和iPhone X的组件库

通过上文提及的“IOS UI Design”的Libraries,即可看到更新后的组件库,已经支持IOS11和iPhone X了,随手拖出iPhone X的刘海玩了一下......


Design Camera会根据你提供的素材,为你准备几个搭配的颜色让你挑选,手机的颜色也可以通过取色板修改,并不限于预设的颜色。此外,还可以方便的给手机添加阴影等效果,强弱可调。

May

4.其他更新-快捷方式等

其他一些小更新,可以了解一下即可。

以下为本月要闻清单:
Tips:链接中大部分国外文章来自medium的在墙外

▍视角自主调节

4

(1)现在可以使用“Command E”快捷方式导出单个图层

实测发现,这个快捷方式并不“快捷”,选中图层之后,还需要先点击右下角的“Make Exportable”,才能使用快捷键“Command E”.......

热点资讯

  1. 苹果“如何用 iPhone 7 拍照”系列视频教程:总共16个短视频基本教程。
  2. 微软推出全新设计语言 Fluent Design:其英文介绍、中文介绍、知乎讨论。
  3. Google I/O 2017 / Design Talks / 新 emoji 表情
  4. Sketch 44 版本更新:改进了Artboard,支持自适应布局功能,支持管理丢失的字体;改善了圆角处理方式,过窄过宽的角也能完美适应。
  5. 菜鸟发布了新的品牌标识 / 天猫品牌全新升级
  6. Framer发布新版本:设计、原型与代码的完美融汇 / DN讨论

Design Camera 可以灵活地从各个角度「拍摄」产品细节,只要用鼠标按住并拖动,就能让 iPhone 360° 任意旋转;按住 Shift 同时滚动鼠标或使用触控板,就能放大或缩小iPhone;按住 Option 滚动鼠标或使用触控板,可以让 iPhone 在背景中平行移动。

新旧结合,从头了解 Sketch 3 ——  蒙版

(2)编辑形状时插入新编辑点的快捷方式已从“Command”单击更改为“Shift”单击

在两个编辑点之间插入一个离两边距离相等的编辑点,按住键盘“Shift”键,再单击鼠标即可。

软件工具

  1. 交互原型工具收录清单:列出目前60 交互原型工具。
  2. Confetti:随机打散元素的Sketch插件,制作类似彩带背景。
  3. Lightwell:动画原型工具。
  4. Launchped:直接在Sketch上发布网站的插件。无需代码,一键生成并发布网站。
  5. React-SketchApp:以及如何通过其设计一套设计规范系统的文章。
  6. SVGito:专门针对于Sketch导出的SVG文件,压缩大小的工具。
  7. Craft插件:更新后支持直接在 Sketch 上制作原型,其教程/视频教程。除此还有其中的Library 库功能更新。
  8. Mirr.io:Sketch 上制作交互原型的工具,支持手机预览。
  9. illusion.ai:提供对话式UI交互的工具,动态展示用户需要的内容。
  10. Brand.ai:Sketch设计组件管理系统,配合 UX Power Tools 使用效果更佳。

图片 6

Sketch 虽然是个矢量编辑工具,但当我们在设计中使用图片时,Sketch也支持一些简单的位图功能,蒙版便是最常用的之一。

(3)其他方面,主要Symbol、阴影的性能改进等,还有一堆bugfix

设计经验

  1. 东京的导航设计:介绍日本东京的交通导航设计。
  2. 性别多样性的包容设计 文章
  3. 通过编写Sketch插件提高设计效率 文章
  4. 通过Sketch插件Launched,一周末制作一个网站 文章
  5. 移动端横向列表最佳实践:一些关于横向List需要注意的点,另外还有国内这篇App 设计中,慎用左右横滑设计。
  6. AI矢量icon绘制技巧:介绍了一些不错的画icon小技巧。
  7. 设计文件(Sketch)命名规范经验
  8. 又一篇VR设计师指南:系统的列出了设计方法、设计工具、交互基础。
  9. Sketch动态ICON:设计一套ICON,和颜色模版,可以动态地修改ICON并使用不同的颜色。
  10. Figma 适应布局的使用:介绍了如何使用约束完成自适应布局。另Figma工具的安利。
  11. 表单设计:一页只做一件事:放弃聚合展开式表单,而选择单页独立步骤表单的优势。

▍强大的细节渲染

创建蒙版

案例研究

  1. Apple Music Redesign / 译文&version=12020710&nettype=WIFI&fontScale=100&pass_ticket=8sTE8MGI8QaZntm cna7ZAiY2R CqxA7l9XsLMUpbXoToqCV0mrP9mYhyIuviTxo)
  2. Spotify 交互分析和Redesign
  3. Meetup

在应用的lens页面,可以修改“摄像头”的详细参数,比如焦点焦距等。甚至是iPhone背面玻璃反射的环境图像也能修改。

三角、圆、多边形,任何图形都可以设置为蒙版,画布上会只显示出蒙版图形之内的内容。

网站推荐

  1. Nick Jones个人网站:采用概念式的黄金螺旋滚动/滑动交互。
  2. 开始你的音乐创作:直接在浏览器上学习基础的音乐创作。
  3. UIPixels:免费Photoshop&Sketch源文件下载:Mockup / UI Kit / ICON。
  4. 1小时学习AI绘制ICON基础:介绍如何绘制线性ICON,比较系统。
  5. Google Doodles:查看历史Google Doodle,包含其创作思路。
  6. designer.how :各类设计工具视频教程。

图片 7

图片 8

深度思考

  1. 存在永恒的产品设计吗?
  2. 如果想要创新,那么别被数据束缚:周围充满了各种数据,数据不是我们做事情的驱动,而是要通过数据发掘更多的可能。
  3. 肖勇:设计教育不应停留在授“鱼”和“渔”:08奥运会奖牌“金镶玉”的主创设计师,央美设计学院教授,肖勇的访谈。

以上设计每周清单(05.22-05.28)由 shengbanx 整理。转载注明来源。

▍预设运动效果

Alpha 蒙版

如果实在不想花时间,可以使用最无脑的预设运动效果。多种选择,总有一个让你满意。

这是 Sketch 3新增的功能。Alpha 蒙版可以在菜单的图层选项中找到,你可以给蒙版的填充(而不是图片本身)设置透明度的渐变来产生更合适的效果。渐变如果有不同的色彩值是会被忽略的,整体效果只会受透明度的影响。

图片 9

图片 10

▍Sketch悬浮效果

Apr

Design Camera支持导入Sketch设计稿,并且可以识别Sketch中的图层和组件,并让它们形成悬浮效果,非常酷炫。

28

图片 11

新旧结合,从头了解 Sketch 3 —— 符号 & 共享式样

可惜的是,目前Design Camera只支持MAC,使用Windows的朋友只能耐心等待了。

UI 设计的过程中,我们常常会想重复使用某些元素,已达到整体风格和细节的统一,有时是一个按钮,有时是一种文字式样,有时则是图形填充和边框的式样。复用之后我们还希望这些元素可以保持同步,如果更改其中一个,其他的也会随之改变。Sketch 当中有这几个不同的方式来帮你实现:

符号 Symbols

符号是针对一个组(Group)的复用。比如重复使用的 header 或者 footer 或者某个按钮。

大家可以参考中文手册中关于符号的详细内容,以及这篇介绍 Sketch 3 新功能的文章中的视频。

共享图层式样 Layer Style

图层式样则仅仅针对图形:使用什么样的填充和边框,什么样的阴影和模糊,这些都是可以复用并同步的。

共享文字式样 Text Style

文本式样让你保持文本的一致性,设定好字体、字号、颜色,然后复用于多个文本。

最后你可以在共享列表中来管理所有的符号和式样,方便你删除、复制或者重命名。

图片 12

图片 13

当然,以上这三种都是复用后自动同步的,还有另一种比较简单粗暴的针对图形式样的编辑,那就是开始设计之前,先把某一式样设置为默认。在菜单中选择 编辑 > 设置为默认式样 (Edit > Set Style as Default), 这会替代Sketch 默认设置下的浅灰色填充和灰色边框,使你接下来新画的所有图形都使用你刚刚设置的式样,但他们并不是相链接的,也不会同步变动。

Apr

22

新旧结合,从头了解 Sketch 3 —— 模板

Sketch3这次的更新吸引了很多目光,大把大把的设计爱好者购入了Skecth认真体验和学习,为了方便新朋友们,我们会把新旧功能结合在一起,介绍几个 Sketch 的特别之处。

New From Template

这个功能让你从之前设定好的模板中直接新建文件(就像 Keynote 和 Pages 里面那样) Sketch 已经为大家设置好了几个最常用的模板,方便直接调用。

・iOS App Icon:按照 iOS User Interface Guidelines 的要求,每个画板都是图标所需的不同尺寸。

・iOS UI Design: Sketch 3 嵌入了 由 teehan lax 制作的iOS 7 UI套件,第一页是欢迎页面,所有的 symbols 在第二页哟。(我们会再下篇分享具体讨论symbols)

图片 14

・Mac App Icon:每个画板都是Mac图标所需的不同尺寸。

・Web Design:第一页包含四个网页设计的画板:Desktop HD、Desktop、Tablet Portrait 和 Mobile Portrait,非常直观。第二页同样包含简单的web UI 元素。

・Welcome to Sketch:这是 Bohemian Coding 团队制作的一个展示页面,Sketch 官网的最终实现效果也正是由此产生。如果你是初次使用 Sketch,我十分建议你打开这个模板看看,因为它本身已经是一份完整的 Sketch 文件了,你可以迅速了解到 Sketch 当中规范的文件组织结构是什么样的,图层层级是什么样的,一些最基本的操作是什么样的,这些都能帮你更快熟悉 Sketch。

模板的另一个好处是你可以自己新建模板,创作好文件然后进入菜单栏的 File > Save as Template。因为symbols符号功能是用于复用某一具体元素,比如一个按钮,它并不能在不同文件中共享,而模板则可以用来创建无数个独立的文件。

图片 15

色彩模式 RGB — HSB

在色彩面板中,单击 RGB 值下方,就可以转换到 HSB 色彩模式。当你想要制作一个同色系的色板的时候,HSB 模式就会非常实用。

图片 16

图片 17

Apr

14

快速查看图形间距离

这是Sketch里最令我惊喜的功能之一,根本停不下来。

・按住              ,并将鼠标悬停在画布上

图片 18

选中一个对象之后,按住alt 键, 将鼠标移至画布上,Sketch便会告诉你这个对象与画板各边框的距离。

・按住              ,并将鼠标悬停在其他对象上

图片 19

选中一个对象之后,按住alt 键, 将鼠标移至另一对象,Sketch便会告诉你两个对象之间的距离。

图片 20

图片 21

Apr

11

可运算输入框

Sketch 2.4.3之后加入了可运算输入框,支持基本的四则运算。

你会发现使用输入框比用鼠标在画布上拖拽要高效的多。

图片 22

图片 23

Apr

10

贴合最近的像素边缘

想要在屏幕上实现 pixel perfect 的效果?贴合最近的像素边缘帮你实现完美。

当某一图形的位置非整数值时,你可以进入编辑,选择 贴合最近的像素边缘功能,图像就会迅速靠在最近的整数位子值上。

图片 24

Apr

8

图形缩放

缩放是创作矢量图形很重要的环节之一,Sketch为我们提供了两种不同的缩放方法。

・鼠标拖拽缩放

图片 25

选中图形,从图形的一角拖拽鼠标,直接完成缩放,这样得到的图形会延续原图形的一切设定,比如圆角值,描边粗细。

・缩放工具

使用缩放工具,则只需输入你想要的大小,sketch会自动帮你把一切细节也进行相应的更改,比如整个图形放大值150%,那么圆角值也会变成150%,描边宽度也会变成150%。

图片 26

Apr

7

灵活的锚点模式

这是 Sketch 里非常贴心的功能之一,每一个锚点模式都可以单独控制,他们决定了每一个角是圆角还是直线角,锚点手柄的方向和长短。

・直线角:当你刚刚点击画布的时候,会添加一个直角,也就是说没有任何锚点,你所得到的便是一条直线。

・镜像:锚点会镜像对应。两个锚点将会与主点距离相同并且正好相互对立。当主点并非直角时,镜像便是默认的点模式。

・不对称:两个锚点到主点之间的距离是独立的,但他们依然相互对应。

・断开连接:锚点之间完全独立,互不影响。

・圆角:锚点将会以特定的内角半径渲染成圆角,非常适用于将一个矩形的一两个角变成圆角。

图片 27

Apr

4

图形快捷键

sketch里的图形快捷键和 Photoshop 或者Illustrator 略有不同,但习惯之后,能高效不少。

图片 28

图片 29

图片 30

创建矩形

创建圆角矩形

创建圆形

图片 31

创建文本

绘制矢量图形

铅笔工具

创建直线

按住 alt 键拖拽鼠标,将从中心点绘制图形

按住 shift 键拖拽鼠标,将绘制正方形,正圆和45度角的直线。

图片 32

当你熟悉这些快捷键之后,可以定制工具栏,把其他常用但是未设快捷键的图形放在工具栏中,比如剪头、三角形和星型,当然,你也可以自己为他们设置快捷键。

图片 33

Mar

28

图层列表的常用快捷键

相信我,当你的sketch文件越来越庞大时,你一定会爱上这些快捷键。

图片 34

搜索图层列表

图层重命名

图层中切换

完成重命名

图层隐藏/可见模式

图层锁定/解锁模式

图片 35

Mar

17

排列和复制画板

Sketch 为我们提供了一些常用尺寸的画板,带来一个完美的开始。

・利用网格工具,快速排列和复制画板

输入理想的行、列和边距的数值,就能得到理想的空白画板。

・一个画板一个UI元素

方便UI控件的管理,在导出时也能直接以画板名导出文件。

图片 36

图片 37

Mar

9

创作空间最大化,隐藏控制面板

如果你有时需要用很小屏幕的Mac进行创作——比如11寸的Air——那你一定不会放过任一个扩大画布展现空间的方法。

・定制工具栏

将常用且没有快捷键的功能通通丢到工具栏中,然后勾选 Icon Only 和 Use Small Size,以只显示小号的工具图标。

图片 38

・隐藏控制面板

还有一系列快捷键,让你灵活的隐藏控制面板。

图片 39

隐藏工具栏

隐藏图层列表

隐藏检查器

同时隐藏图层列表和检查器

图片 40

本文由澳门皇冠金沙网站发布于科技资讯,转载请注明出处:App宣传视频制作神器,5月设计清单

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。