恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
酷九合金社Sketch教程系列-IOS图标(下)
0.0°
2014-06-11 自译外文 教程 原作者: Sebastien Gabriel 举报 20671 138 65 19

我最喜欢Sketch 3.0的阴影工具。

首先我们选择“Icon base > Base” 图层。我们要给它添加3个层次的阴影。阴影的层次模式如下:

色值# 000000,透明度42% ,X 0 Y 10,模糊:16,阻塞0;

色值# 000000,透明度34% ,X 0 Y 4,模糊:14,阻塞0;

色值# 000000,透明度24%, X 0 Y 2,模糊:2,阻塞0,如图43。


最后我们要做的是“base” 上的很强烈的投影。

复制“base”图层,可以“Cmd+C,Cmd+V”复制也可以按住Alt拖动图形来复制。

复制完后我们需要去掉图层上的效果,用以创建新的效果,这时我们可以在右边检查器中取消阴影效果的勾选,然后点击上方的垃圾桶就能删除多余的效果了(图44)。设置填充图层#000000会得到图45。


重命名该图层为“Big drop shadow”并且将它置于“base”图层下方(如图46)。


现在我们要把这个图层往下挪,按住Shift键并且按住键盘向下键3次,如图47。


最后将投影设置不透明度20%设置高斯模糊7(如图48),此时你会发现生成一个漂亮的投影。


给按钮添加类似投影。

选择组“Knob base” 中的 “oval 2" 图层,复制一层提取出来重命名“Knob shadow” 拖动放在组“knob base”里,如图49。


除去这一层所有的效果填充颜色#000000并且向下移动10px(如图50),做到这一点后设置图层不透明度为10%,高斯模糊4px,效果很微妙,(如图51)。


让我们做一个华丽的阴影。复制这一层,使它往回走10px与旋钮居中对齐,我们需要修改下这个圆的形状。选择这个图层按回车或者双击鼠标你会看到(图52)。现在可以编辑路径了,注意你右边的检查器面板已经改变了。


选择底部的锚点,将这个锚点向下移动10px(图53),然后回车结束编辑状态。设置图层不透明度为20%,高斯模糊为8(图54)。


再复制一个圆作为阴影,我们重复刚刚的工作,设置不透明度为40%,在右侧面板我们修改下这个阴影的大小宽度为68,高度为80,并且高度与旋钮顶端对齐(如图55)。


最后,设置图层混合模式为叠加,得到一个不错的深蓝色的阴影(图56)。


我们现在要给旋钮添加一个很有层次的阴影。选择“Knob base>Oval 2"图层。开始添加阴影效果:

色值# 000000 ,透明度60%,x:0,Y 1,模糊:2,阻塞0。设置此阴影的混合模式为“叠加”

色值# 000000 ,透明度14%,x:0,Y 3,模糊:4,阻塞0

色值# 000000 ,透明度50%,x:0,Y 2,模糊:4,阻塞0

你应该看看这个(图57)。

这是我们现在做的阴影。


10 细节

做完之后我们需要添加两个小东西来当做ON/OFF

在旋钮组创建一个圆角矩形(U或者Insert>Shape>Rounded如图58),大小8 x 2半径为3或者更多。把它放在你的其他旋钮层并且命名为“pointer thingy”,我无法找到更好的命名。将其水平对齐并且处于底座的右侧。

除去圆角矩形的边框设置不透明度40%,色值为CA2DEA。

给它一点深度,添加阴影添加阴影:色值# FFFFFF,透明度 46%,x:0,Y 1,模糊:0和一个内阴影:色值# 000000,透明度 40%,x:0,Y 1,模糊:0。

设置内阴影图层的混合模式为“叠加”,您得到(图60)的结果。

在图层“color base” 上用椭圆工具(O)创建一个8 x 8的圆。置于旋钮的左侧(离旋钮10px),重命名为“OFF”(图61),去掉边框,颜色值为#FFFFFF,混合模式改叠加(图62)。

为了让它看起来更像一个“OFF”的按钮,让我们在它中间创建另外一个圆,这一次是6 x 6大小,去掉边框可以看到这个新建的圆能很好的契合在“OFF”按钮上(如图63)。

选中你的“OFF”图层和刚刚的圆图(64),执行命令“substract”你会得到这样一个环形(图65)。

创建“ON”,复制你的“OFF”层。重命名和移动旋钮的另一边,同样的距离(图66)。

点击层的左边三角形展开向量组,选择“Oval11”(图67)删除它得到(图68)。

你现在做到这一步!

11 输出

这个教程最后一步就是切图输出了。我认为输出是Sketch 3.0的一个极好的优点。

我想你们会想要导出1x(当前大小)和2x

选择你画板上的“colorful switch”在右侧检查器的底部你会看到一个“Make Exportable”的按钮,单击你会得到(图69)。

1x表示基线,即你当前的设计尺寸,单击右侧的“+”会添加一个新的输出窗口,选择2x他会在输出的时候自动放大2倍,当然你也可以更改后缀名(如图70)。

当你点击“Export colorful switch”,它会产生1X,自动扩展你的画板上@2x的输出选项和它所选择的格式。瞧!

附件有源文件

感谢您的观看,我们下期再见!!

更新:2014-06-11

下载
收藏

138人已收藏

酷九合金社

qq交流群:423655278 微信:conineacademy

  • 149

    作品

  • 6119

    粉丝

  • 16

    关注

  • 严选 | Mockups免费资源网站
  • 五月归来,看小伙伴们锋芒毕现
  • 不仅是设计,更是做人
  • 要始终坚持对美好事物的追求

    猜你喜欢

      2014-06-11 自译外文 教程 原作者: Sebastien Gabriel 举报 20671 138 65 19

      酷九合金社Sketch教程系列-IOS图标(下)

      0.0°

      你确定要举报酷九合金社Sketch教程系列-IOS图标(下)

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2014年06月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      65
      138
      19

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

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

      登录

      手机号

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

      登录
      第三方账号登录