Ⅰ sketch软件windows下怎么打开
想学习sketch,使用sketch的童鞋有福了,本文教你怎么在windows中打开sketch文件。
本方法是通过avocode来作为中转的,所以本教程需要以下3个条件:
1.mac上的sketch
2.avocode软件
3.了解avocode,并且熟悉使用
废话不多说来,切入正题,下面开始介绍在windows中打开sketch文件的流程
一、在mac中打开sketch,打开要在windows中打开的文件
二、点击菜单栏中的“Plugins”=》“Sync to Avocode”
三、等待弹出界面出来之后,点击sync
四、当同步完成之后,会在浏览器中自动打开一个页面,要求你添加project
五、点击ADD TO PROJECT ,在弹出的界面中输入project名称等信息,然后点击SAVE CHANGES
六、现在可以转到windows了,离胜利不远了,在windows中打开avocode软件
七、等软件打开之后,你会发现,刚刚的project已经出现在了软件中,现在可以自由编辑了,开始享受吧。
Ⅱ mac sketch 文件怎么打开
把来源更改为任何来源就可以打开。协同工具更推荐选择Pixso协同设计。Ⅲ 如何用 Sketch 进行网页设计
Sketch基本设置要了解。
画布
按住键盘 A 快捷键,可以创建画布。 Sketch 已经良心的为你默认设置了各种设备尺寸,你想要的全都有
栅栏
通过 Layout settings 设置栅栏[布局参考线],这个功能好的真是不要不要的[下文回介绍其实际用处],可以根据需要自主选择每列宽度,间隔宽度以及最外侧 margin 宽度,见下图。
这时画布上就出现了栅栏参考线,文字段落的宽度,按钮的宽度,图片的宽度都可以根据栅栏进行合理设置。通过栅栏布局可以极大的统一页面的布局设置,给人一种和谐美[Ctrl + L 可以快捷键显示/隐藏栅栏],效果如下。
字体
注重对比和统一。对比是指在需要突出区别的地方用不同字号,粗细和字体突出不同。统一是指对于网站同一元素,使用相同的字体设置,比如 H1, Body Text. 英文字体建议两种即可, 一个 sans-serif 字体作为标题,显眼;一个 serif 字体作为正文,易读。可以提前设计好各个字体的数值,利用 Sketch 的 Style Text 功能进行保存,方便以后频繁使用。也可以再设计的时候,边做边保存[前者适合在经验用户,后者更适合初学者],如下图。
对字体另外一个重点是确定 line height [行高],确定行高的作用是方便确定控件上下 margin, 左右 margin 可以通过栅栏进行确定。比如你确定默认字体大小为 20px, 行距为 1.5,则行高 = 20px * 1.5 = 30. 那么控件之间的上下间距则可以设为 30px 的倍数,比如 30px, 60px, 90px, 以此类推。间距和行高相同可以使页面看起来更加和谐美观。
调色板
一个好的配色对界面美观的重要性不言而喻。Sketch 也贴心的为用户提供了颜色版用于记录颜色,方便你重复使用,见下图。
最主要的是一下几个颜色,背景色,默认字体颜色,减淡字体颜色,强调色,边框颜色,和适当数量的辅助色[Material Design鼓励用多种颜色,用鲜明大胆颜色]。这里再说一下阴影颜色,Material Design 建议使用 #000 全黑,然后减弱 opacity 不透明度,而不是直接设置灰度颜色。因为这样可以保证阴影不论在亮色还是暗色背景下都有一个良好的视觉效果。
操作
页面
Sketch 的左侧提供了页面导航列表。用户可以创建不同页面,同一页面中又可以创建不同画布。这样一来,用户便可以将网站的所有页面有条理的保存在一个 Sketch File 中[见下图],it is amazing!
间距
Sketch 对于排版可谓是考虑的极其周到。学习 CSS 的朋友应该知道在排版时,对于 margin 的四个数值往往纠结不以,往往凭感觉设置。而 Sketch 可以在设计时就解决这个问题,鼠标选中指定元素,按下 Alt 键,界面自动现实该元素的 margin top, right, bottom, left. 精确到 1px 的设计,让设计稿和实现稿无缝对接,见下图。
Sketch 还提供了保存组件的功能。如果某些元素在设计中会重复出现,则可以利用 Symbol 功能进行保存,需要时直接插入即可。一次设计,循环使用。
结构
一个好的交互设计师需要对网站结构有一个非常清楚的认知。这个网站的目的是什么,用户群是谁,为了实现目的需要有哪些功能,这些功能如何组织成页面,页面之间如何跳转,功能如何实现等。比如该网站是销售网站模板的购物网站,导航栏有如下几项:主页,联系页,支持页,购物页,个人账户,购物车,如下图。
先设置主页,然后由主页发散延展到其他界面。当然,这一切应该在 UI 设计之前的交互稿就考虑清楚。UI 更加强调美观性,如何利用美观更好的引导用户实现既定目标。
交互
设计时需要考虑用户使用网站时的交互场景。
界面的交互状态,比如登陆和未登录时界面的不同状态,如下图。
元素的交互状态,Hover 和未 Hover,Click 和未 Click,是否 Disabled等。细节产生美!
插件
Sketch 的插件是独立与 Sketch 本身,可以第三方开发的。在这里像那些默默奉献的伟大程序员们表示无比的敬意。强推插件下载软件 Sketch Toolbox[见下图]。可以一键下载/卸载插件,再也不用从 GitHub 上下载然后拖到指定文件夹了,节省了大量时间。
Ⅳ sketch是干什么用的
sketch是一款用来制作矢量绘图的软件。
sketch矢量绘图应用软件,一款适用于所有设计师的矢量绘图应用。矢量绘图也是进行网页,图标以及界面设计的最好方式。
但除了矢量编辑的功能之外,Sketch同样添加了一些基本的位图工具,比如模糊和色彩校正。但是Sketch只支持Macos,其他系统无法体验。
(4)sketch使用方法扩展阅读
Sketch 软件的特点是容易理解,上手简单,对于有设计经验的设计师来说,入门门槛很低。对于绝大多数的数字产品设计,Sketch 都能替代 Adobe Photoshop,Illustrator 和 Fireworks。
Sketch一个有着出色 UI 的一站式应用。在 Sketch 中,画布将是无限大小的,每个图层都支持多种填充模式;
Sketch 不是一个位图编辑应用。如果使用者想修正一张照片或者用笔刷来画画,不建议使用该软件。
Ⅳ 用Sketch如何做切图
1、实现选中想要的Group切图保留透明部分。
注意事项:
矢量绘图也是进行网页,图标以及界面设计的最好方式。但除了矢量编辑的功能之外,Sketch同样添加了一些基本的位图工具,比如模糊和色彩校正。
Ⅵ 如何使用sketch绘制矢量路径
绘制一个合适大小的圆。
绘制一个矩形,置于圆上。调整两者相对位置关系,直到适合绘制最终结果的程度。
使用路径相减功能,利用矩形对圆进行切削。该功能在
菜单栏→
Edit
→
Combine
→
Substract
中。因为各个路径组合命令相当常用,建议添加
Combine
工具图标到工具栏中,或是记熟快捷键。
使用剪刀功能(菜单栏→
Edit
→
Paths
→
Scissors),将弓形的弦切去。
这是上述操作得到的结果。
复制一份,垂直翻转,移动位置直到两者节点相接。
然后连接路径(菜单栏→
Paths
→
Join,快捷键为
Command
+
J),得到如图结果。
调整描边粗细至所需的值,并且将路径端点形式设置为圆弧。位置在界面右侧的参数调节区域中。
最后,将描边矢量化为形状。命令的位置在
菜单栏→
Edit
→
Paths
→
Vectorize
Stroke.
过程如下图,可点进原图观看。在第八布可能需要进入路径编辑模式(双击形状,或者选中后使用工具栏中的
Edit
图标)来调整中间锚点的控制杆,以使曲线过渡更为自然。同时,我使用的是
Sketch
2,功能位置有可能与
Sketch
3
存在些微的差异,可使用
OS
X
帮助菜单中的搜索框来查找。
Ⅶ 如何高效使用Sketch
自从知道xcode6支持使用矢量图后就开始用sketch,顺手记录下使用中的一些能够提高效率的方法
Sketch适用范围
sketch主要是做图标和界面的。如果是板绘或者处理照片还是用Photoshop之类的比较合适。和ps相比,sketch的优势是开启速度会快很多,是用来原生开发,支持退出后再开启保持退出状态等特点,这些都是ps所没有的。
图层操作
command+d复制图层,或者按住option键拖动
按住shift键能够选择多个图层
按住shift键能够能够严格按照垂直活水平移动
按住shift键改变图层大小是按等比变化
按command加上方向键会精确到像素的调整
图层透明度可以使用快捷键进行调节,选中一个图层按1到9的数字快速将图层透明度从10%到90%,按0调成100%
command+shift+l 锁定图层
绘制图形
可以在Insert > Shape里找到预设的一些图形,比如圆形,方形等基本图形。按o添加圆,r添加矩形,l添加直线,u添加圆角矩形,t添加文本
按v可以自己绘制图形
绘制时按住shift画Sketch会自动按45度对齐前一个点适合绘制直线
善用布尔运算将简单的图形组合成复杂的图形,布尔运算有四种,合并形状(Union),减去顶层形状(Substract),与形状区域相交(Intersect),排除重叠形状(Difference)
布尔运算后可以使用扁平化功能(Flattening),使用后会将其合并成一个图形
复制旋转是个比较有意思的功能,能够很方便绘制出类似花瓣的效果,通过菜单进入 图层 > 路径 > 复制旋转 (Layer > Paths > Rotate Copies)即可。如果希望让复制的图形独立出来,可以分离路径通过菜单 编辑 > 路径 > 分离 (Layer > Paths > Split)即可。
画出粗细不均效果的线条效果可以使用描边宽度 通过菜单进入 图层 > 路径 > 描边宽度 (Layer > Paths > Stroke width),然后点击希望加宽的地方以添加锚点拖动使之变宽
填充可以按从下到上的顺序叠加
选中图层control+command+m创建蒙版
control+c会出现放大镜,然后可以方便选择颜色替换当前选择对象的颜色
画布的控制
使用空格进行抓手移动画布
按command加鼠标滚轮进行画布放大和缩小
control+p能够切换到像素模式查看,相当于输出png后点开图片查看的效果。
control+g开启关闭网格
按住option键能够看到各个对象之间的距离
command+1缩小至能看到所有对象,command+2放大到选中对象到屏幕适合的大小,command+0缩小至100%
Symbol共享元素,一次编辑所有地方都能够生效。
什么会影响Sketch的性能
模糊
阴影
多页面
文本转轮廓
Ⅷ 如何用Sketch进行网页设计
基本设置
画布
按住键盘 A 快捷键,可以创建画布。 Sketch 已经良心的为你默认设置了各种设备尺寸,你想要的全都有,如下图。
Artboard
栅栏
通过 Layout settings 设置栅栏[布局参考线],这个功能好的真是不要不要的[下文回介绍其实际用处],可以根据需要自主选择每列宽度,间隔宽度以及最外侧 margin 宽度,
Layout settings
Settings details
这时画布上就出现了栅栏参考线,文字段落的宽度,按钮的宽度,图片的宽度都可以根据栅栏进行合理设置。通过栅栏布局可以极大的统一页面的布局设置,给人一种和谐美[Ctrl + L 可以快捷键显示/隐藏栅栏],效果如下。
Layout effect
字体
注重对比和统一。对比是指在需要突出区别的地方用不同字号,粗细和字体突出不同。统一是指对于网站同一元素,使用相同的字体设置,比如 H1, Body Text. 英文字体建议两种即可, 一个 sans-serif 字体作为标题,显眼;一个 serif 字体作为正文,易读。可以提前设计好各个字体的数值,利用 Sketch 的 Style Text 功能进行保存,方便以后频繁使用。也可以再设计的时候,边做边保存[前者适合在经验用户,后者更适合初学者],如下图。
Font categories
对字体另外一个重点是确定 line height [行高],确定行高的作用是方便确定控件上下 margin, 左右 margin 可以通过栅栏进行确定。比如你确定默认字体大小为 20px, 行距为 1.5,则行高 = 20px * 1.5 = 30. 那么控件之间的上下间距则可以设为 30px 的倍数,比如 30px, 60px, 90px, 以此类推。间距和行高相同可以使页面看起来更加和谐美观。
Ⅸ sketch 文件格式怎么打开
Sketch格式的文件可以使用Pixso协同设计打开,该软件无缝衔接以往工作,支持Sketch、XD、SVG等文件导入导出,自由进行Sketch的文件格式转换。并且,文件自动保存到云端,一键回溯到任意历史版本,再也不用担心文件丢失。素材库集成众多大厂优秀的设计系统,所有 UI 设计师均可直接拖拽复用,从此省去大量模块化设计环节的重复劳动。