前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >sketch入门第1部分:画板和形状Sketch使产品设计变得非常简单。准备好了吗?转到第2部分

sketch入门第1部分:画板和形状Sketch使产品设计变得非常简单。准备好了吗?转到第2部分

作者头像
iOSDevLog
发布于 2018-08-10 07:31:19
发布于 2018-08-10 07:31:19
2.9K0
举报
文章被收录于专栏:iOSDevLogiOSDevLog

第1部分:画板和形状


为什么我要写这个教程

今年,我在旧金山举行的大会上担任用户体验设计课程的助教。我在互联网上搜索了绝对初学者的素描教程,但是没有提到任何覆盖所有基础知识而没有提到Photoshop。所以我参加了一个研讨会,为学生们制作了这个教程。

本教程将教您Sketch 3的绝对基础知识,无论您是否具有设计背景。第1部分(您现在正在阅读的内容)侧重于画板和基本形状创建,第2部分介绍图层和文本样式,第3部分介绍符号和导出。让我们开始吧!

创建画板

首先,确保安装了Sketch 3。单击“文件”>“新建”创建新文档。当您看到空白屏幕时,请在左上角查看“插入”菜单。此菜单包含创建新图层所需的所有工具。

插入新图层

首先创建一个类似于画布的画板。您选择的大小决定了导出图像的最终尺寸。

画板工具

选择Artboard工具后,您可以像这样手绘绘制画板:

绘制画板

或者您可以查看右侧的“检查器”列。如您所见,有几种不同设备尺寸的预设尺寸。我选择了iPhone 5。

选择画板

注意:如果您需要调整画板的大小,只需选择其名称并拖动显示在角落上的白色框。

Sketch使产品设计变得非常简单。

如果你想看整个画布怎么办?让我们尝试使用位于屏幕顶部的工具进行缩小。

缩小

您也可以通过选择“视图”>“中心画布”或使用快捷键⌘+ 1来执行此操作

适合画布到屏幕

添加形状

现在您的画板完全可见,让我们添加一个矩形。位于“插入”>“形状”>“矩形”中。

矩形工具

我在画板的顶部做了一个细条,就像移动应用程序中的导航栏一样。

绘制矩形

接下来,找到右侧菜单,官方称为“检查员”。这里有一个“边框”部分,带有一个复选框。取消选中它以删除默认边框。

删除边框

我们还可以更改边框上方部分的填充。我使用#104F​​8A。您可以在吸管图标下方的框中输入此数字。

改变填充

请注意,如果单击填充窗口底部的+号,则可以保存此颜色样本以供日后使用!

准备好了吗?转到第2部分

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.07.25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
scetch入门 第2部分:文本,对齐和SVG在第3部分中了解如何导出文件
这是本教程第1部分的延续。在本部分中,我们将介绍文本工具,对齐以及在Sketch中使用导入的矢量图形。
iOSDevLog
2018/08/10
4.4K0
scetch入门 第2部分:文本,对齐和SVG在第3部分中了解如何导出文件
scetch入门 第3部分:符号和导出谢谢阅读!
符号非常适合组织您经常重复使用的设计元素。在这个例子中,让我们将袜子猴子图标变成符号。选择图标后,查看顶部菜单栏并选择“创建符号”
iOSDevLog
2018/08/08
1.1K0
scetch入门 第3部分:符号和导出谢谢阅读!
Sketch 91中文版「矢量图UI设计工具」
复制文档您现在可以直接从 Workspace 窗口将 Workspace 文档复制到您的草稿中。您可以通过右键/Control 键单击文档的缩略图来找到此选项。当您复制文档时,它不会包含任何评论、版本历史记录或特定共享设置,因此您将有一个全新的版本进行迭代,而不会影响原始设计。您还可以在 Web 应用程序中复制文档,包括其他人通过公共链接共享的工作区之外的文档。
啾咪啾咪
2022/08/23
1.1K0
Sketch for mac(矢量绘图UI设计)
Sketch for Mac是一款专业的矢量图形编辑工具,主要用于UI和UX设计。它提供了丰富的功能和工具,可以帮助设计人员更轻松地创建和编辑各种类型的矢量图形。
Mac小小心
2023/03/10
4050
Sketch for mac(矢量绘图UI设计)
Sketch颠覆者!静电的Figma完全学习日记-Day.02
静电说:在发表Sketch颠覆者!静电的Figma完全学习日记-Day.01后,我收到了不少小伙伴的留言。其中有一些表达了质疑的声音,大概是这样的:
用户5009027
2019/12/17
1.8K0
Sketch颠覆者!静电的Figma完全学习日记-Day.02
Sketch 94 mac,草图94中文最新版支持M1,支持macOS Ventura 13
Sketch 是一款专业矢量图设计软件,深受许多设计师青睐,非常适用于图标设计、网页设计等矢量图设计场合使用,为您的设计增添更棒的视觉效果,现为大家带来Sketch 94最新版本,需要的朋友别错过哦~
捧着风的少女
2022/10/26
11.4K1
Sketch 94 mac,草图94中文最新版支持M1,支持macOS Ventura 13
如何用Scratch 3绘制矢量图形 【Gaming】
Scratch是一种流行的用于创建视频游戏和动画的可视化编程语言。它还具有矢量绘图工具,任何人都可以使用它来创建独特的游戏和艺术。
五月Rambo
2019/11/10
6K0
如何用Scratch 3绘制矢量图形 【Gaming】
Sketch 插件开发官方文档合集插件基础您的第一个插件开发环境调试ActionAPI发布插件插件捆绑插件,脚本和命令插件位置更多关于CocoaScriptSketchTool参考资源
我们努力使Sketch成为梦想中的“设计师工具箱”。但是每个人都有不同的需求,也许你需要一个我们还没有实现的功能。不要担心:插件已经可以满足您的需求,或者您可以轻松创建一个插件。 如果您有兴趣扩展Sketch,那么您就位于正确的位置。在这里,我们展示Sketch可扩展性文档的概要以及如何快速构建您的第一个Sketch插件。 如果您只想使用现有的插件,请参阅插件目录。 你可以用插件做什么? Sketch中的插件可以做任何用户可以做的事情(甚至更多!)。例如: 根据复杂的规则选择文档中的图层 操作图层属性 创建
iOSDevLog
2018/05/17
6.5K0
Sketch69来啦!新增多项有用新功能,你更新了吗?
经过蛮长时间的等待,Sketch的新版本 69版本来啦。想想Skech的版本更新速度也是挺快的,下一个版本就又是一个大版本70了,不知道会有什么Amazing的功能。不过要说Amazing,69版本给了我们很大的惊喜。一起来看看这次新版本的更新体验吧。
用户5009027
2020/10/23
1.8K0
Sketch69来啦!新增多项有用新功能,你更新了吗?
【提升效率】新手最容易忽略的6个AI“冷技巧”
在使用AI软件的过程中,我们多多少少还是会遇到一些问题。那么今天段老师就来和同学们聊一下,我们在使用AI中的一些提升效率的小技巧。希望可以帮助到正在学习的你~
用户1730674
2019/05/30
1.8K0
「Adobe国际认证」Adobe Photoshop调整裁剪、旋转和画布大小
可以在扫描仪中放入若干照片并一次性扫描它们,这将创建一个图像文件。“裁剪并修齐照片”命令是一项自动化功能,可以通过多图像扫描创建单独的图像文件。
IT胶囊
2021/06/16
2.7K0
ai学习记录
界面: 多个预编辑区:制作图形,使用的图形放到工作区内,不使用在预编区。 没有Ctrl/Alt+delete的概念,没有前后景颜色。 新建:分辨率:矢量软件和分辨率无关; 新建时候不要勾选对齐到像素网格 存储:.ai:illustrator的默认格式。 .eps:支持矢量图形,ai可以打开;也可以被ps打开,打开之后图层是合并的。 PDF:可以跨平台(PC,苹果)跨软件打开。PDF输出(保存时):可以选择输出范围。PS打开PDF的注意事项:打开时选择单页,然后打开页面选项选择剪裁到媒体框。 JPG导出:文件——导出 勾选上使用画板 打开:不要用Crtl+O 打开位图;否则会变为嵌入文件; 置入:将图片拖拽到画布上松开;置入后图片上还有一个X; 置入图片之后,必须记得将AI和其他链接文件一同移动,否则链接将会丢失。 使用渐变工具:可以在填色目标上滑动改变渐变的角度和分布; 高级应用:当吸取目标为位图时:选择吸管I,按住shift键,在位图上吸取。 直接选择工具小白 A 作用:1选择移动锚点和路径 2.调节控制手柄,按住Alt键,可以控制单个手柄。 锚点的分类 A角点:有路径线,手柄为隐藏的。 B 平滑点: 有路径线,手柄在同一直线上,手柄长短可以相等或者不等,路径线为平滑弧线。 C.贝塞尔点:有路径线,手柄不再同一直线上,手柄长度可以不相等,路径线为尖角的两段弧线组成。 角点变换为平滑点(转换点工具),平滑点变贝塞尔点。(小白+Alt键) 路径描边转换为内部填充: 1.选择绘制的路径描边。 2.对象——扩展 路径查找器:Ctrl+shift+F9 1.分割: A.图形与图形:会将相交的区域独立出来;(分割后需解组) B.图形和描边:会沿描边切割图形。 2.修边 将图形重叠部分减去,形成多个独立的新图形; 3.合并 图像颜色相同合并,不同相减。 4.剪裁 (剪贴蒙版 Ctrl+7 针对矢量和位图) 下方的图形颜色显示在上方图形的范围内;只针对矢量图形; 5.轮廓 将填充的图形转换为描边图形,并且在每个交点处断开路径。 6.减去后方对象: 相减,保留上对象; Ctrl+N 新建 Ctrl+D 重复再制 Ctrl+Z 后退 D 默认描边和填充 Shift+X 调换填充和描边 Ctrl+G 编组 选中要编组的对象 Shift+ctrl+G 取消编组 Shift+ctrl+B 显示/隐藏定界框 Ctrl+X 剪切 E 自由变换 Ctrl+Shift+V 原位置粘贴 Ctrl+B 贴在后面 Ctrl+F 贴在前面 Ctrl+2 锁定选中的对象 Ctrl+F9 渐变面板 F6 颜色面板 V 选择工具 A 小白箭头 M 矩形工具 L 椭圆工具 多边形:在绘制的多边形上按Ctrl,单击“圆圈点”,拖动即可更改圆角多边形。(星形工具也可以) 光晕工具:单击拖动确定光晕大小,“上下”调整光线数量,松开鼠标,在另一位置拖动确定光晕长度及数量,“上下”更改光晕的数量,松开鼠标绘制完成。 区域文字:出现红色加号,表示文字溢出。 转曲:就是将文字转变为图形; 1.防止源文件拷贝到其他的计算机时,字体丢失。 2. 制作艺术字。 注意:转为曲线的文字不能修改字体;将发给客户的文件转曲;留给自己的不转曲。 标准:可读性,易读性 1.要选好基准字体(横竖粗细相等,不带装饰的字体) 2.创建轮廓/转曲(Ctrl+shift+O) 3.字体设计时结合文字的意思进行图形化处理; 4.能简则简,能连则连;
HUC思梦
2020/09/03
2.9K0
photoshop学习笔记
窗口——工作区——复位基本功能:让软件界面恢复到默认的标准状态 所有的控制面板都在窗口菜单中,可以对其进行隐藏和显示 按下TAB键可以隐藏或显示工具箱,属性栏,控制面板 按下SHIFT+TAB键,可以只隐藏控制面板 新建文档: 基于互联网设计(屏幕显示):单位:像素,分辨率:72,颜色模式:RGB 基于印刷设计时:单位:毫米MM,分辨率:300,颜色模式:CMYK (一)矩形选框工具(椭圆选框)M 按SHIFT键可以强制为正方形(正圆) 按ALT键可以保持中心点不变 同时按下SHIFT+ALT键,可保持中心不变强制为正方形(正圆) (二)背景色 前景色填充:ALT+DELETE(删除) 背景色填充:CTRL+DELETE(删除) 按D键,恢复到默认的黑白色 按X键,前背景色的切换 (三)移动工具V 功能:移动对象 复制:按下ALT键用移动工具进行拖拽 (四)图层 新建图层:CTRL+ALT+SHIFT+N 图层编组:CTRL+G (五)保存和打开 保存:CTRL+S 可以把内容存储起来 另存为:CTRL+SHIFT+S,把文件重新保存一份 默认的格式:PSD(源文件格式) 打开的方式:CTRL+O 把文档拖拽至软件中也可以打开 (六):移动选取与移动内容的区别 移动选区:绘制选区后,用矩形选框工具指在选区内,会出现白色箭头,可以移动选区。(属性栏中必须选 中的新选区) 移动内容:绘制选区后,用移动工具指在选区内,会出现黑色箭头,可以移动选区内的内容。 (七)选区的修改 边界:会得到有一定宽度的环形区域,会有羽化效果 平滑:把直角选区变成圆角选区 扩展:均匀的扩大选区 收缩:均匀的缩小选区 (八)自由变换CTRL+T 按下SHIFT键,保持比例不变 按下ALT键,保持中心不变 调整四个角点可以调整整体比例,调整四个边点可以调整宽度和高度 按下SHIFT加工具本身的快捷键,可以切换选中的工具 CTRL+k:首选项 (九)羽化SHIFT+F6 羽化:让边缘变得柔和,半透明 选区的布尔运算:加选区,减选区,与选区相交 载入选区:按下CTRL键,点击图层缩略图可得到相应的选区 (十)常用快捷键 取消选区:CTRL+D 第一步撤销CTRL+Z,第二步以上的撤销CTRL+ALT+Z)默认撤销步数为20步。 放大:CTRL+”+” 缩小:CTRL+”-” 抓手工具:空格 CTRL+J:通过拷贝的图层(复制图层) 橡皮擦工具:E
HUC思梦
2020/09/03
3.4K0
一个创建产品动画说明视频的新手指南
英文原文:A Step-by-step Guide to Creating Animated Product Explainer Videos
WindCoder
2018/09/20
3.2K0
一个创建产品动画说明视频的新手指南
一分钟绘制磷脂双分子层:AI零基础入门和基本图形绘制
Adobe illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件,是一款非常好的图片处理工具,简称AI。
生信宝典
2018/10/25
7.8K0
一分钟绘制磷脂双分子层:AI零基础入门和基本图形绘制
使用Docker部署paint-board轻松搭建个人云端画板教程大公开
嘿小伙伴们,是不是每次想要在电脑上挥洒创意的时候,都被那些复杂难懂的专业绘图软件搞得头都大了?别担心,今天我要给大家安利一个超级轻量级、超有趣的 Web 端画板——Paint Board!它不仅界面简洁易用,还能让你的灵感瞬间爆发!
YIN_尹
2024/12/24
1330
使用Docker部署paint-board轻松搭建个人云端画板教程大公开
Adobe Photoshop,选择图像中的颜色范围
“色彩范围”命令选择现有选区或整个图像内指定的颜色或色彩范围。如果想替换选区,在应用此命令前确保已取消选择所有内容。“色彩范围”命令不可用于 32 位/通道的图像。
IT胶囊
2021/06/08
11.8K0
ps快捷键
基础操作: ctrl+0=显示全图; ctrl+=放大; ctrl-=缩小; ctrl+j:复制当前图层到一个新层 ; ctrl+1 =实际像素显示。
mcxfate
2020/08/01
4.3K0
2020版PS快捷键_ps应用快捷键大全
说明:为避免篇幅过大,本文快捷键是基于Windows系统下Photoshop 2020版本的。Mac系统下的快捷键可按以下方式进行对应:Ctrl→Command,Alt→Option。有不能对应的,本文会给出说明。部分项目附加英文是为了方便记忆快捷键。
全栈程序员站长
2022/11/11
1.7K0
2020版PS快捷键_ps应用快捷键大全
UI设计师必须知道的 iOS和Android的APP图标设计指南
尽管图标非常小,但图标会在App Store和Google Play中显示,向用户传达app的信息,并且安装后能在主屏幕上找到它,因此图标非常重要。
用户5009027
2019/08/01
2.2K0
UI设计师必须知道的 iOS和Android的APP图标设计指南
推荐阅读
相关推荐
scetch入门 第2部分:文本,对齐和SVG在第3部分中了解如何导出文件
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档