来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。 如果你是一枚交互设计师或者UI设计师,那么你一定知道Sketch这个强大的矢量设计软件;如果你用过Photoshop,那么在你接触了Sketch之后就能了解到这款产品相对于PS的优点,说不定会跟我一样变成一个Sketch的死忠粉。 扁平化设计的流行和屏幕分辨率的提升推动了Sketch这款软件的流行。 什么是SketchSketch是一款矢量绘图应用,而矢量绘图无疑是目前进行网页、图标以及界面设计的最好方式。 Sketch有以下特点:
但是Sketch也不是十全十美的,比如它对于位图的处理能力就远不及PS。但这并不影响它成为一款优秀的设计软件。 Sketch界面图片来源:极客学院ERICYU Sketch的界面重要包含五部分的内容:page,layer,画板,检查器和工具栏。 Step 1 导入图片+画出一个正圆 导入图片+画出一个正圆 Step 2 将图片置于正圆之上,并右键选中圆形,点击“USE AS A MASK” 将图片置于正圆之上,并右键选中圆形,点击“USE AS A MASK” Step 3 完成! 注意把圆形的边框设置为透明。 完成,注意把圆形的边框设置为透明 布尔运算——图层之间的关系 在刚刚的头像下面,制作一个个性标签,运用图层之间的布尔运算。 画两个一模一样的圆形,其中一个圆形与矩形形成substract的关系。 (只需要在Layer中拖拽圆形至矩形即可) Artboard内置画板
自定义工具栏 Sketch基础工具添加、选择、移动图层添加图层 当你按住Shift键添加图层时,创建的是正圆或者正方形或者正多边形。 按住COMMAND+D可以批量复制图层。 按住Alt键可以复制一个图形。 可以将图层归为组。 图形的编辑
图形点的控制手柄
在蒙版上创建文字,避免模板限制文字超出蒙版区域
Step 1 选择Mask的模式 设置ALPHA蒙版 Step 2 选择渐变方式 fills选中渐变样式
旋转复制效果 文本处理将文本转换为轮廓 转化后,可以使用渐变作为文字样式。 图片编辑
实战应用下面这张图片是我制作的简书app登陆页面,大家可以运用上面学到的技巧来进行制作。 简书登陆页面(自创版) 制作步骤如下:
快用Sketch动手做一个属于你的登陆页面吧! 本文转载自:简书作者:粽小喵 |
|