【前端】Sketch 从零开始学

简介: 【前端】Sketch 从零开始学

**Everything you need to
Sketch gives you all the tools you need for a truly collaborative design process. From early ideas to pixel-perfect artwork, playable prototypes and developer handoff. It all starts here.**

Try for free

界面

Sketch 的界面设计的非常简洁。

顶端的工具栏包含了最重要的操作选项。右侧的属性检查器方便你调整选中图层的属性,左侧的图层列表面板则会列出当前文档中的所有图层,中间当然就是你正在创作的画布。

这里没有浮动面板,属性检查器将会根据你选中的工具来显示所需控件,这样你能始终不受打扰的在画布上创作。

画布

Sketch 的画布区域是无限大的,可以向任意方向无限延伸,你将拥有绝对的自由来规划自己的创作区域。

如果你想在画布区域中设置一个固定的画框,你只需添加一个或多个新的画板。例如,设计移动应用界面时,很多设计师会为应用的每一个屏都创建一个画板,然后排列开来以便查看。

你可以用矢量(分辨率无关)模式来查看画布,也可以打开像素模式来查看每一个像素导出成 JPG 或 PNG 等位图文件后的样子。可在像素缩放章节查看到更多内容。

新建

新建一个页面,命名为 Fonts,把资源中的 Artboard 复制到我们的页面中。此时可以按住 Command 点击一个文字(比如 Healine),然后选择 Organize Text Styles,确认 Type Style 拷贝成功。(是不是有种一夜致富的感觉)

建立导航栏

折腾了一堆准备工作,终于可以进行第一个组件的设计了。
回到 Page 1 页面,按 R 在Artboard 中 画一个 1088x64 的矩形。
在这里插入图片描述

属性检查器

界面右侧的属性检查器可以让你对正在编辑的图层或正在使用的工具进行属性调整。当你选中一个图层时,你会发现属性检查器被划分为几个区域。

通用属性

通用图层样式属性在属性检查器的顶端区域:图层位置、大小、不透明度、叠加模式(取决于图层类型)以及一些特殊选项,例如调整矩形圆角半径或多边形的边数。
在这里插入图片描述

样式属性

每一个边框、填充、阴影和模糊属性都有它们独自的选项。

要添加新的边框或填充及阴影,只需分别点击标题右侧的 + 按钮即可:

在这里插入图片描述

相关文章
|
6月前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
47 0
|
7月前
|
UED iOS开发
「 Sketch超实用教程 」元素基础
「 Sketch超实用教程 」元素基础
63 0
|
存储 Web App开发 算法
每个前端工程师都应该了解的图片知识(长文建议收藏)
随着web的发展,网站资源的流量也变得越来越大。据统计,60% 的网站流量均来自网站图片,可见对图片合理优化可以大幅影响网站流量,减小带宽消耗和服务器压力。
271 0
每个前端工程师都应该了解的图片知识(长文建议收藏)
|
JavaScript
🚀从零开始学习JS基础7️⃣🚀
断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。断点调试可以帮助观察程序的运行过程。
123 0
🚀从零开始学习JS基础7️⃣🚀
|
存储 JavaScript 索引
🚀从零开始学习JS基础8️⃣🚀
数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式。
130 0
🚀从零开始学习JS基础8️⃣🚀
|
JavaScript
🚀从零开始学习JS基础6️⃣🚀
在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。简单来说,流程控制就是来控制代码按照一定结构顺序来执行。
103 0
🚀从零开始学习JS基础6️⃣🚀
|
存储 JavaScript 前端开发
🚀从零开始学习JS基础9️⃣🚀
 在 JS 里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用 JS 中的函数。     简答来说,函数就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
123 0
🚀从零开始学习JS基础9️⃣🚀
|
存储 JavaScript 前端开发
🚀从零开始学习JS基础🔟🚀
在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。
188 0
🚀从零开始学习JS基础🔟🚀
|
存储 JavaScript 前端开发
🚀从零开始学习JS基础3️⃣🚀
变量简单来说就是一个装东西的盒子,专业来说变量是用于存放数据的容器。 我们通过 变量名 获取数据,甚至数据可以修改。 变量是程序在内存中申请的一块用来存放数据的空间。类似我们酒店的房间,一个房间就可以看做是一个变量。
145 0
🚀从零开始学习JS基础3️⃣🚀
|
JavaScript 前端开发 开发者
🚀从零开始学习JS基础5️⃣🚀
运算符(operator)也被称为操作符,**是用于实现赋值、比较和执行算数运算等功能的符号。**JavaScript中常用的运算符有: 算数运算符 递增和递减运算符 比较运算符 逻辑运算符 赋值运算符
121 0
🚀从零开始学习JS基础5️⃣🚀