恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

Sketch之学习笔记

原创文章 分类: 经验/观点 版权: 原作者: 原作者 举报
12219 36 14 3
2014-08-15
0.0

  Sketch是一款矢量绘图应用,随着扁平化的界面风行,这款应用无论在元素定位操作和界面效果展示,支持多分辨率输出上都有着优秀的表现,而PS在这些需求方面相对显的有些吃力,感觉有点杀鸡用牛刀。   

但是sketch在位图方面的表现还是远不及ps,没有漂亮的笔刷,没有丰富的图片滤镜功能,当需要图片效果设计的时候还是需要回归到我们强大的ps怀抱当中去的。

以下是个人的一点学习心得,有兴趣了解的朋友可以看看帮扫下盲

 

1界面

在Sketch 里没有浮动面板,最顶端的工具箱包含了最重要的操作,软件默认给出的工具比较少,主要工具都放在insert这个工具按钮里了,点击下拉才能找到你要的设计工具,感觉和ps比起来很不方便,这里我们可以用快捷键的方便来调用工具,或者点击右键选择Customize Toolbar项,编辑顶端的工具箱,把常用的工具放到外面来,减化对工具寻找的步骤

说明: Macintosh HD:Users:angline:Desktop:屏幕快照 2014-08-15 上午10.02.06.png

2画布和页面

一个文件里可以有多个页面,同时一个页面里面可以存在多个画布,画布的添加方式通过Artboard工具创建,在这个工具里除了可以自己定义尺寸大小外,里面也有很多常用界面尺寸,可以很快速的帮我们创建工作区

说明: Macintosh HD:Users:angline:Desktop:屏幕快照 2014-08-15 上午10.12.06.png

这么多格式是不是减少了不少工作量,点一下就搞定了。太适合懒人了

 

3图形编辑

在编辑图形的时候,检查器会显示出四种不同的点模式:

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

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

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

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

 

 corners这个功能非常实用,可以针对不同的角设置不同的圆角数值,效果是不是很棒!!!

 

4蒙版

分为两种

・图形蒙版,选择 编辑 > 用所选图形做为蒙版 (Edit > "Mask with Selected Shape")

・ALPHA 蒙版,选择图层 (Layer) > 使用蒙版 (Use Mask) >ALPHA 蒙版 (ALPHA Mask) 来实现

 

5文本

文本的编辑和ps基本很像,但是其中有一个要点就是文本框的宽度属性(在对齐功能的下面)可以被设置为自动或者固定。自动大小文本框意味着它会自动扩展以容纳你输入的一切文本。固定大小文本框则会在你输入更多内容时保持现有宽度不变,而增加文本框的长度。其实就是多行文本和单行文本的意思。

Sketch 使用操作系统原生的字体渲染,因此文本看起来都会很棒。使用原生字体渲染的好处就是当你进行网页设计时,你可以肯定作品中的文本都是精准的。

Mac OS 系统使用了一种叫子像素抗锯齿效果 (subpixel-antialiasing)的技术来提升文本渲染效果,Sketch 里也是采用的这一种。

    苹果最初发布 iPhone 时,他们决定不用子像素抗锯齿技术来渲染手机上的文字,原因是显示器上的像素都是由红绿蓝的光形成的,而 iPhone 是可以横屏竖屏切换的,也就是说这些本来垂直排列的红绿蓝像素会突然水平排列,这样一来,整个子像素抗锯齿技术就崩溃了。苹果可以保持竖屏时候的文字渲染,放弃掉横屏的情况,但他们理智的决定保持竖屏与横屏的体验一致。

所以每当你在为 iPhone 或者 iPad 设计交互页面,你都需要记住这一点:在画布上,Sketch 会帮你对文字进行子像素抗锯齿渲染,但在移动设备上,文字并不会被这样处理。你需要告诉 Sketch 无需进行子像素抗锯齿渲染,通过 Sketch >Preferences > General, 取消选择 subpixel-antialiasing。

 

设计技巧和ps,ai差不多,就不多啰嗦了,这里再介绍几个功能亮点给大家

亮点一  复制旋转

菜单栏中进入 图层 > 路径 > 复制旋转 (Layer > Paths > RotateCopies).,当你编辑好一个形状后可以使用该功能轻易的生成一个旋转形状

这个是我随手画的1分钟成形,而且你可以更新丰富图像是不是很好用


亮点二  描边宽度

描边宽度工具让你任意改变图形边框的宽度。选中一个矢量,在检查器中设定边框,然后在菜单栏中进入图层 > 路径 > 描边宽度 (Layer > Paths > Stroke width)。现在再点击画布上的图形边框,添加一个宽度锚点,你可以拖拽这个锚点使描边变宽或变窄。

说明: Macintosh HD:Users:angline:Desktop:屏幕快照 2014-08-15 上午11.05.43.png

 

亮点三 无限的阴影,样式等效果。

说明: Macintosh HD:Users:angline:Desktop:屏幕快照 2014-08-15 上午11.12.35.png

 

是不是很有趣,其它更详细功能介绍你可以到官网上找到,下一个项目是不是可以试一把sketch呢,哈哈哈哈

 

相关资源推荐http://www.sketchappsources.com

angline

7粉丝/37关注

一鸣惊人当仁不让lv.1收藏家lv.3勤学标兵lv.1原创小生
一些人物练习采购门户改版分析

你确定要举报Sketch之学习笔记

如果查出恶意举报,十天内禁止提交任何举报申请。

0/200

上传证据: 超过10M的附件请使用网盘地址

点击上传附件

对谁可见:

全部设计师
  • 全部设计师
  • 推荐设计师和认证设计师

您确认要推荐?

该作品发布时间:2014年08月15日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录
//

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN