Sketch学习教程：快速创建一个登陆页

2018-09-1810:06:53原型设计Comments3,353 views字数 1569阅读模式

扁平化设计的流行和屏幕分辨率的提升推动了Sketch这款软件的流行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

什么是Sketch

Sketch学习教程：快速创建一个登陆页文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch——矢量绘图应用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch是一款矢量绘图应用，而矢量绘图无疑是目前进行网页、图标以及界面设计的最好方式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch有以下特点：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

  • 矢量文件，不失真；
  • Symbol（图形样式）和Style（文本样式）功能，有利于批量修改和复用；
  • 每个图层都支持多种填充模式（Fills可以添加/隐藏填充效果）；
  • 多种尺寸导出功能，可导出部件；
  • 自动保存所有历史记录，便于追溯修改。

但是Sketch也不是十全十美的，比如它对于位图的处理能力就远不及PS。但这并不影响它成为一款优秀的设计软件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch界面

Sketch学习教程：快速创建一个登陆页文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

图片来源：极客学院ERICYU文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch的界面重要包含五部分的内容：page，layer，画板，检查器和工具栏。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

  • Page：页面管理；
  • Layer：页面下的图层；
  • 蒙版：图片遮罩效果（右键，选择use as a mask）

Step 1 导入图片+画出一个正圆文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch学习教程：快速创建一个登陆页文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

导入图片+画出一个正圆文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Step 2 将图片置于正圆之上，并右键选中圆形，点击“USE AS A MASK”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch学习教程：快速创建一个登陆页文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

将图片置于正圆之上，并右键选中圆形，点击“USE AS A MASK”文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Step 3 完成! 注意把圆形的边框设置为透明。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch学习教程：快速创建一个登陆页文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

完成，注意把圆形的边框设置为透明文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

布尔运算——图层之间的关系文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

在刚刚的头像下面，制作一个个性标签，运用图层之间的布尔运算。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch学习教程：快速创建一个登陆页文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

画两个一模一样的圆形，其中一个圆形与矩形形成substract的关系。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

（只需要在Layer中拖拽圆形至矩形即可）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Artboard：画板，快捷键A，内置了多种尺寸的画板；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch学习教程：快速创建一个登陆页文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Artboard内置画板文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

检查器：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

通用属性：可调整大小。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

样式属性：填充（颜色、图片），模糊、渐变、阴影等效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

工具栏文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

右键工具栏选择customize可以自定义工具栏。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch学习教程：快速创建一个登陆页文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

自定义工具栏文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch基础工具

添加、选择、移动图层文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch学习教程：快速创建一个登陆页文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

添加图层文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

当你按住Shift键添加图层时，创建的是正圆或者正方形或者正多边形。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

按住COMMAND+D可以批量复制图层。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

按住Alt键可以复制一个图形。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

可以将图层归为组。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

图形的编辑文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

点的控制手柄文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

当创建一个矩形时，双击四个角上的锚点可以选择不同类型的手柄。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch学习教程：快速创建一个登陆页文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

图形点的控制手柄文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

蒙版文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

限制蒙版：不希望文字被蒙版所裁切，可以右键点击“Ignoring underlying mask”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch学习教程：快速创建一个登陆页文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

在蒙版上创建文字，避免模板限制文字超出蒙版区域文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

ALPHA蒙版文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

通过设置ALPHA模板，可以让图片拥有渐变效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Step 1 选择Mask的模式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch学习教程：快速创建一个登陆页文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

设置ALPHA蒙版文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Step 2 选择渐变方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch学习教程：快速创建一个登陆页文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

fills选中渐变样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

剪刀工具和复制旋转工具文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

剪刀工具：可以剪切矩形的一条边，让它变成一个开口的矩形；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

复制旋转工具，可以得到一个图形的360度旋转复制后的效果，如下图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch学习教程：快速创建一个登陆页文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

旋转复制效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

文本处理
运用TEXT STYLE可以复用文字样式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch学习教程：快速创建一个登陆页文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

text style文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

将文本转换为轮廓（矢量）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

将文本的一笔一划都变为path。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch学习教程：快速创建一个登陆页文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

将文本转换为轮廓文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

转化后，可以使用渐变作为文字样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

图片编辑文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

位图编辑文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

高斯模糊效果；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

color adjust工具：亮度、对比度、饱和度；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

建立选区、裁剪；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

建立9宫格图片，可以将图片各部分的比例确定下来，进行大小改变。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

实战应用

下面这张图片是我制作的简书app登陆页面，大家可以运用上面学到的技巧来进行制作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

Sketch学习教程：快速创建一个登陆页文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

简书登陆页面（自创版）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

制作步骤如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

  • 创建画板：选择artboard的iphone 5大小
  • 设置背景：设置背景为白色
  • 基本布局：调用sketch库的template（在菜单栏file下面的第二个选项），选择iOS UI design，选择iphone上方的状态栏为白色（图中看不出来，因为背景色也是白色）；
  • 画出输入框（利用布尔运算）
  • 微博登陆按钮：创建矩形。
  • 注册按钮：橘黄色的箭头。
  • 文字：选择宋体，转化为轮廓。
  • 细节完善：小图标制作，线条颜色微调。

快用Sketch动手做一个属于你的登陆页面吧！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4984.html

  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/yuanxing/4984.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定