APP设计Sketch教程(04)-钢笔与路径

sketch是一款矢量软件,提起矢量软件,那么大家一定会想到各种路径,想到路径,就有节点,想到节点,就有贝塞尔曲线,然后一定会有的东西就是钢笔。扯到钢笔,对于很多人来说,这一定是个不太愉快的回忆,钢笔是绘图软件中很难掌握的工具之一。如果用不好,我们就没法画出各种不规则的形状出来,要么不够平滑,要么奇形怪状惨不忍睹。

那么sketch中的钢笔工具会是什么样子呢?我们在界面中找到钢笔形状的图标,如果找不到,可以在工具栏中右键,然后选择自定义工具栏,将钢笔工具拖动到工具栏中便于使用,顺带一提,钢笔工具的快捷键是V,也就是Vector的首字母,这样就不会忘了,和钢笔工具相似的工具还有铅笔(Pencil,快捷键P),编辑(Edit,木有快捷键)。

点击钢笔工具后,你的鼠标就会变成钢笔形状,在画布上随意点击,即可添加节点。静电在画布上画了个三角形。此时,我们会发现,右侧的属性栏发生了变化,多出了很多可选择项目。同时工具栏的Edit图标变为选中状态。

右侧属性栏

1.Finish Editing -如果我们完成了钢笔的操作或者编辑,那么可以点击此按钮完成编辑,鼠标恢复为箭头。

2.Open Path -如果我们绘制了一个封闭图形,选择此项后,路径将打开变为开放状态。

下方四个图标:

1.Straight -如果我们绘制了一个有弧度的节点,那么点击此按钮后,节点将直接变为折线,弧度消失,并且在这种模式下,只能调整节点位置,不能设定弧度了。(仅在此种模式下,下方Corners选项会生效,调整corners参数会得到平滑的弧度。这种方式有好有坏,缺点是不容易进一步调节,大家可以自行选择使用)

2.Mirroed -如果我们想将三角形的某个角加入弧度,那么我们切换到Mirrored,这时此节点两侧出现滑杆,我们可以调节滑杆的长度和位置来对此节点的弧度和节点两侧的线进行条件,但此种模式下,不论你拖动哪一测的滑杆,调节效果会由节点位置呈镜像移动,适合画圆形等对称的形状。

3.Disconnected -此时滑杆效果仅仅对你当前拖动的一侧生效,调节更加灵活。

4.Asymmetric - 翻译过来就是不对称的。 当选中这种状态的时候, 节点两侧的滑杆始终保持直线,但一侧调整节点到节点的位置可以随意变化。

下方的Round: Full Pixels 以及下拉框中的其他两个选项,静电查了许多资料,也做了一些实验,但始终搞不明白具体作用是什么,如果有哪位大神了解,欢迎一起交流.

继续下方的Fills和borders,一个为填充颜色,一个为边框颜色.其中Fills中的Blending选项则可以理解为不同的颜色叠加模式.如下图,我们使用一个红色的圆叠加在一个绿色的圆上方,在红色的圆上使用不同的blending选项,则会出现不同的颜色叠加效果,这与photoshop等软件中的图层叠加模式有些相似.

简单的滤镜效果

接下来的选项,是sketch提供的一些简单的图像效果,分别为阴影,内阴影,模糊,投影效果.我们可以对一个元素同时运用多个图像效果. 点击右侧加号,即可同时设置多个图像效果,比如投影,多个方向的投影可以使投影效果更真实.

剪刀工具(Scissors)

对于路径的操作,有时候我们需要创建一个不封闭的路径,这个时候,我们可以使用见到工具,将两个节点之间的路径”剪断”,这样就会构成一个不封闭的路径了.同时还可以填充颜色. 如果找不着剪刀工具,请从自定义工具栏中将他拖动到常用工具栏中.

大家可以亲身实践以便更好理解sketch中钢笔工具的独特之处,他的操作方法是和photoshop等我们经常使用的软件是有些许差别的。

多个路径的操作

对于多个路径或者矢量图形,sketch提供了四种组合方式. 这是图形操作中常用的功能.

Union(组合):将两个矢量图形组合,如下图第二排第一个图形

Subtract(减去):将两个图形中相交的轮廓从第一个轮廓中减去

Intersect(相交):取两个图形的相交部分

Difference(挖空):取两个图形中的不相交部分.

独特功能:沿路径排列的文本

前几天有朋友在教程下方留言问静电,sketch是否有文本沿路径排列的功能,静电要告诉大家,这个是有的.来,看看静电是怎么做的吧.

1.创建一段文本与一条路径

首先使用文本工具创建一段文本, 然后运用钢笔工具创建一条路径,如下图.

2.选中文本,然后Type>Text on Path

3.拖动文本到路径上即可.这时我们可以左右拖动观看不同的文本沿路径排列的效果,同时可以调整文本间距等属性,以达到自己满意的效果.如果我们对曲线效果不满意,或者对文本不满意,则双击即可进入文本或者曲线的编辑状态,分别编辑即可.

4.如果要取消文本沿路径排列的效果,使用鼠标将文本拖动到路径外即可.或者在菜单Type>Text on Path中将此选项的对勾取消.

将文本转换成路径功能

将文本打散,可以根据自己的需要做出独一无二的字体,这也是静电在AI或者FW中经常使用的功能,但是很遗憾,静电要告诉大家,这个功能在sketch中基本上就是鸡肋,当你选择菜单中的Type>Convert Text to Outlines后,字体虽然转换成路径了,但静电的电脑基本属于一步一卡的状态了.所以如果大家想用sketch来做字体,那么静电还是劝大家先缓缓吧.使用其他工具设计完成然后再导入sketch中,是个不错的选择.

时间: 2024-11-09 06:05:20

APP设计Sketch教程(04)-钢笔与路径的相关文章

从零开始学APP设计SKETCH

SKETCH设计教室!从零开始学APP设计SKETCH 首先我们打开这个美丽的宝石.主界面如下,我们看到,顶部是工具栏,一大堆的按钮.下边默认分三栏,左边是页面,图层等等的操作. 中间是空白的工作区(画布),右侧是属性栏,我们可以在这个界面中调节元素的各种属性. 这个时候有人可能会问,我的工具栏不是这个样子的,空空如也!你是怎么做到的? ok,要有一个舒服的工作流程,首先我们要把自己的工作区域弄的舒舒服服,各种工具随手拈来. 第一步:定义sketch的工具栏 在有图标的空白地方点击右键,在弹出的

APP设计利器Sketch

APP设计利器Sketch,这几天的练习作业. 玻璃杯牛奶.png 灵感星球.png 注:灵感星球造型来自游戏Walkr. 水滴.png 水滴依然不会画,画得不通透,求指教. 晚上照着图片画,水滴没画出心得,倒是找到一个画鸡蛋黄的方法,我也是醉了... 水滴2.png Icon 这是在简书上找的教程画的,可以直接搜索:<Sketch 练习 - iOS 图标> 从此看到不爽的UI可以直接自己调整了,爽! Branch UI设计

Angular系列----AngularJS入门教程04:迭代器过滤(转载)

我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视着你的应用,并且在发生回归的时候迅速报告. 请重置工作目录: git checkout -f step-3 我们的应用现在有了一个搜索框.注意到页面上的手机列表随着用户在搜索框中的输入而变化. 步骤2和步骤3之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 控制器 我们对控制器不做

安卓app设计规范整理和Android APP设计篇(转)

随着安卓智能手机不停的更新换代.安卓手机系统越来越完美,屏幕尺寸也越来越大啦!比如最近小米的miui 6的发布和魅族手机系统的更新等等. 以小米MIUI6的安卓手机来说,MIUI6进行了全新设计,坚持“内容才是本质”的设计哲学,重新提炼内容,简化图标设计. 所以,我们在进行安卓APP设计时,需要好好调整之前的设计规范和设计细节.根据目前流行的安卓手机的系统体验来完成我们的安卓APP设计规范.应该说这是整理出最全面的安卓app设计规范. 25学堂站在不断更新和完善安卓app设计规范为宗旨!利用周末

一看就懂的Android APP开发入门教程

一看就懂的Android APP开发入门教程 作者: 字体:[增加 减小] 类型:转载 这篇文章主要介绍了Android APP开发入门教程,从SDK下载.开发环境搭建.代码编写.APP打包等步骤一一讲解,非常简明的一个Android APP开发入门教程,需要的朋友可以参考下 工作中有做过手机App项目,前端和android或ios程序员配合完成整个项目的开发,开发过程中与ios程序配合基本没什么问题,而android各种机子和rom的问题很多,这也让我产生了学习android和ios程序开发的

2015年的移动APP设计趋势

App中的色彩 公认的,色彩始终是设计的一部分.不过,近来很多app将色彩当作设计的基础使 用,而不只是点缀.色彩可以营造氛围,极大地影响了app的整体体验.当你把一个色彩缤纷的app和一个几乎纯白的app进行比较,就能清晰体会到这一 点.通常,颜色用来树立app的个性,比如友好.有趣或优雅. 看看Rubie.Sky.Rise或Peek这样的app.设计中充斥着华丽的色调,因为色彩是设计中最显著的部分.Rubie和Peek诠释了暗色设计不一定要使用黑色和深灰色.不要自我束缚,尝试使用深紫色或深红

[转载]AngularJS入门教程04:双向绑定

在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f step-4 你应该发现除了搜索框之外,你的应用多了一个下来菜单,它可以允许控制电话排列的顺序. 步骤3和步骤4之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 模板 app/index.html Search: <input ng-model="query"&g

Android APP开发入门教程

这篇文章主要介绍了Android APP开发入门教程,从SDK下载.开发环境搭建.代码编写.APP打包等步骤一一讲解,非常简明的一个Android APP开发入门教程,需要的朋友可以参考下. 工作中有做过手机App项目,前端和android或ios程序员配合完成整个项目的开发,开发过程中与ios程序配合基本没什么问题,而android各种机子和rom的问题很多,这也让我产生了学习android和ios程序开发的兴趣.于是凌晨一点睡不着写了第一个android程序HelloAndroid,po出来

2、Django实战第2天:app设计

app设计:五大模块 users 用户管理 courses 课程管理 organization 机构和教师管理 operation 用户操作管理 新建上面4个模块的app [email protected] > startapp users [email protected] > startapp courses [email protected] > startapp organization [email protected] > startapp operation 为了方便