订阅摹客文章

免费获取优质的设计资讯!

文章分类
【友情推荐】人人秀,H5活动制作工具,3分钟完成制作。

了解更多
热门文章
Mockplus是什么?

更快更简单的原型设计工具,微软、联合国国贸中心、华为、百度、东软、育碧、中石油、Oracle、西门子、IBM都在用,你呢?

开始使用
2019,都在用iDoc了!

更高效的协作设计工具,产品团队必备。智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。

免费使用
入门教程 了解更多

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

设计资源 > 设计文章 > 【新手适用】12个最佳的Sketch入门视频教程

【新手适用】12个最佳的Sketch入门视频教程

Chloe 2019-01-11 151007

Sketch是很多设计师必备的设计工具,但不少人反馈说想要学会Sketch很难。作者是一名Sketch爱好者,曾经也是一名小白,后来学习了大量Sketch的教程视频,最终已经能够熟练使用Sketch了。下面就来推荐12个Sketch的最佳教程。


1. Sketch App Tutorials

作者:LevelUpTuts

观看次数:1,281,378

内容:

这是一个非常全面的Sketch教程系列了,一共25个教程,学完可以立马上手Sketch。


  • Sketch 3概论
  • 了解画板
  • 网页
  • 使用Inspector定型形状
  • 使用文本样式
  • 网格和布局
  • 对齐和分配
  • Sketch 3中的形状
  • 创建和使用符号
  • iOS设计UI工具
  • Foundation 5 UI Kit
  • Bootstrap 3 UI工具包
  • 安装和使用插件
  • 动态按钮
  • 5个非常有用的提示和快捷方式
  • 非常有用的提示和快捷方式之二
  • 使用Sketch Toolbox进行插件管理
  • 使用自由资源扩展草图
  • 如何在Sketch 3中创建动画GIF
  • Sketch 3的4个伟大的画板插件
  • Sketch 3.4新功能
  • 设备显示的本地共享
  • 如何轻松制作流程图 - Sketch 3

Sketch App Tutorials


2. Intro to Sketch - Beginners guide to Sketch Basics

作者:Jesse Showalter
观看次数:79,832

主要内容:

在本视频中,作者介绍了在专业设计工作中使用Sketch需要了解的所有基础知识。看完视频后,你应该就可以能够下载安装,开始使用Sketch了。


  • 简要介绍UI
  • 画板
  • 设置网格
  • 工作敏感
  • 页面 vs 画板
  • 添加形状
  • 详情面板
  • 设置文本样式
  • 使用符号
  • 对齐,测量和调整工具
  • 插件
  • 导出

Intro to Sketch - Beginners guide to Sketch Basics


3. Sketch App Awesomeness - Top 10 Features

作者:Learn UX

观看次数:53,239

主要内容:

这篇教程主要教大家Sketch最棒、应用最广泛的十大功能。


  • Sketch 10大主要功能

Sketch App Awesomeness - Top 10 Features


4. Sketch App Course

作者:Learn UX

观看次数:1,253,343

主要内容:

本系列课程旨在展示Sketch的全部功能,教大家如何充分发挥功能的作用。有一些课程为理论课程,例如导出图形;有些课程更加注重实践,例如实用的UI项目例子。


  • 快捷键
  • 实用技巧技巧
  • 导出图形
  • 矢量工具和符号
  • 颜色,图标和排版
  • 实用的UI项目例子

Sketch App Course


5. Sketch Tutorial – Create a web design in Sketch App

作者:Skillthrive

观看次数:39,202

主要内容:

这篇教程主要是教大家如何一步步在Sketch中创建和设计一个网页项目,实用性非常高,值得一看。


  • 使用混合模式微调颜色
  • 使用布尔运算创建自定义形状
  • 创建阴影
  • 制作和编辑形状
  • 添加和编辑文本
  • 设置并保存调色板

Sketch Tutorial – Create a web design in Sketch App


6. Design a Website Landing Page in Sketch

作者:Cody Brown

观看次数:46,988

主要内容:

在本视频中,作者介绍了Sketch的一些主要功能。为了详细地展示制作过程,作者创建了一个虚构的网站登陆页面,非常具体。


  • 插入画板
  • 创建网格
  • 构建导航标题
  • 创建导航链接文本样式
  • 设计一个Hero滑块
  • 使用符号设计内容部分
  • 添加Testimonial

Design a Website Landing Page in Sketch


7. Sketch App Tutorial – Build a music app landing page in Sketch

作者:Skillthrive

观看次数:16,158

主要内容:

了解如何在Sketch App中设计音乐应用程序登录页面。


  • 在Sketch中使用布尔运算
  • 创建alpha蒙版
  • 构建循环进度条
  • 制作和编辑形状
  • 添加和编辑文本
  • 创建透明文本
  • 设置和保存渐变
  • 使用图像创建阴影和填充形状

Build a music app landing page in Sketch


8. 5 Essential Sketch App Tips • Sketch for Mac Design Tutorial • Design, Process, & Workflow

作者:Jesse Showalter

观看次数:20,560

主要内容:

这篇教程分享了一些作者日常爱用的Sketch小技巧。以下所有5个技巧都不需要插件,都是Sketch开箱即用的。


  • 内阴影线
  • 减小文件大小
  • 将图像拖入填充面板
  • 使用命令,找到两点之间的中心
  • 嵌套符号

5 Essential Sketch App Tips


9. Sketch 3 Tutorial | Interacting with Objects

作者:Joseph from LearnSketch.com

观看次数:13,213

主要内容:

本教程主要教选择并与画布上的对象进行交互。虽然非常基础,但却是大家很容易忽略的Sketch功能知识点。


  • 选择并与画布上的对象进行交互

Sketch 3 Tutorial | Interacting with Objects


10. Organizing Symbols in Sketch for Mac | Sketch Design Tutorial

作者:Jesse Showalter

观看次数:12,640

主要内容:

这篇教程主要教如何组织Sketch Library。


  • 了解Symbols的工作原理
  • 命名和分类Symbols
  • 使用插件清理混乱

Organizing Symbols in Sketch for Mac | Sketch Design Tutorial


11. Sketch App UI Design to Android XML Tutorial

作者:Angga Risky

观看次数:91,585

主要内容:

使用Android Studio将设计页面转换为Android XML,来设计移动APP起始页面。


  • 应用设计转换为Android XML

Sketch App UI Design to Android XML Tutorial


12. Movie App Design - UI/UX Animations Tutorial with Sketch & Principle

作者:Travis Here

观看次数:17,300

主要内容:


在本视频教程中,我们将介绍如何使用Sketch和Principle为电影应用设置动画!

  • 动效设置

Movie App Design



其他Sketch资源推荐:

1. Sketch最佳插件

Mockplus iDoc

一款设计协作工具,深受产品团队的喜爱。能帮助设计师将设计稿一键上传并生成标注切图、代码样式,以便交付给前端工程师。主要功能有:智能标注、一键切图、多样批注、交互原型、全貌画板、团队管理。实现了从产品到开发,只要一个文档。


Content Generator Sketch Plugin

做 Mock up 的时候就再也无需操心占位内容,它可以自动随机填充男性、女性或者自然风光的图片。


Sketch Measure

超级智能的帮你在作品上添加图形尺寸、距离、颜色和文本属性的附注,方便快捷,而且成品整洁漂亮。


Rename It

帮助你批量的修改图层名称,快捷键 control + command + R 。


Dynamic buttons

管按钮内的文本有多长,这个小插件都能让文本和按钮保持固定的 padding。


【来啦!彩蛋君】Mockplus个人版免费赠送福利!限时限量!

Mockplus对接iDoc了,将原型接入产品工作流,增加了原型标注、评论、对比设计稿、全貌呈现等功能,诚邀体验!赠送Mockplus个人版!数量有限,先到先得!

专属激活码:Mock2019;

激活数量:限量150个;

有效期:2019年9月30日

激活地址:https://www.mockplus.cn/user/upgrade (登录/注册后输入激活码即可)

Plus,发布Mockplus原型到iDoc,还有更多大礼等你拿!

上一篇
10个2018年度最佳网站设计实例赏析及原型分享

Thomas   01/14

转变被动型设计思维 建立高效的设计流程

精分青年卤大湿   01/10

下一篇