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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
酷九合金社Sketch教程系列-IOS图标(上)
0.0°
2014-06-12 自译外文 经验/观点 原作者: Sebastien Gabriel 举报 33284 209 94 28

我使用Sketch将近一个月多点,现在我又足够的信心用教程的方式来分享我工作的一部分,我将描述我如何使用它的许多有趣的功能来创建一个彩色的图标。

我想使用一种简单而深入的教程方式。本教程是为Sketch初学者设计的,我将会花时间来描述你可能已经知道的知识点。如下图是将要达到的效果。

如果你有一些步骤不清楚可以下载源文件参考。

好了,来吧!


1 打开界面

首先你需要拥有一款Sketch,你可以从商店购买,如果你手头有点紧的话可以先使用试用版。

打开界面,此刻你不需要任何模板,直接新建界面即可。


2 创建画板

正式开始工作之前,我们需要创建一个画板,这与AI一样。

创建画板的方式:一我们可以通过插入的方式进行绘制,默认工具栏的最左边的小加号点开即可看见,选中“Artboard”或者你直接按快捷键A在工作区绘制也一样。最后我们会在界面最左边的检查器中找到画板的属性值,设置“400 x 300”px即可。


3 填充一个彩色背景

现在我们已经准备好了一个画板,给它一个背景基调,你可以在制作完图标以后再添加,但是背景的产生的环境色会决定你图标的色彩。

为了这个教程我来回做了很多次,现在我们切入正题。

快捷键R当然也可以选择(插入>形状>矩形,如图4),让绘制的矩形充满画板,此时你需要注意到它的属性值会出现在右侧的检查器中(Fill是填充颜色,Color是边框颜色)如图6。


取消边框颜色,设置填充颜色为十六进制值类型#A846FF(图7),现在点击颜色面板右上角的“+”你会看到他会新增一个颜色填充面板,选中选择线性渐变,渐变梯度为从左上到右下(如图8)。


接着是设置渐变填充的属性值,确保你的形状的左上的颜色是# FFFFFF(白色)和右下方的颜色是# 000000(黑色)。点击渐变颜色选择器或者直接点击图形右下角的小圆点设置色彩为#000000(黑色)透明度0,具体透明度设置详见图9颜色面板下红色方框内。选择左上角白色设置不透明度60。


再次点击“+”创建一个新的颜色填充,这一次是一个径向渐变填充。


确保左上方和右下方的颜色是白色和黑色。设置它们的透明度都为50。最终得到一个超级闪亮的霓虹灯效果即从亮到暗紫色的梯度,如图12。


最终背景效果完成,全选你的背景图层(Cmd+G)打包成组,双击左侧图层列表的组(或者是Cmd+R)将打包的组命名为Background。


4 使用内置IOS模板

现在让我们开始创建我们自己的图标。

这里我们可以使用内置的ios图标模板,而不必重新创建那个相当复杂的圆角矩形。

单击(File>New from Template>iOS App icon),会创建一个新的文件,里面向你展示了iOS的整套图标模板。

在图层列表中找到iOS-76@2X画板,解锁(shift+Cmd+L)选中iOS-76@2X图层,复制(Cmd+C)它并把它粘贴(Cmd+V)到你的原始文件中,现在你可以关闭你的模板文件了。


选中图标图层以及我们之前创建的背景图层(按住Cmd然后再按住shift我们就可以在成组的情况下多选组内的内容,仅仅按住Cmd是单选)如图17。


使用对齐工具使得图标在画板中能够水平与垂直居中对齐,对齐功能(图18)可以在界面右侧检查器最上面找到最终得到(如图19)。


现在我们把图标拖出背景组里,(Cmd+G)成组命名为icon。再次选中图标成组,命名为“Icon Base”(图20)


5 底座

选中图层Base,改变填充颜色为#FFFFFF 。点击“+”再次添加颜色填充,颜色值#FAC3FF不透明度为10%,如图21.


现在使用快捷键“O”在Base图层上面创建一个124 x 124的椭圆,当然不要忘记使用对齐功能使之与Base图层居中对齐(如图22)。


选中“Oval 1”,设置填充为线性渐变填充并使之倾斜。设置左上角颜色值#E500E7右下角颜色值#00D7FF,不改变混合模式(如图23)。



命名此层为“Super colorful base”和成组“Color Base” (如图24)。


6 创建锥形浮雕效果

然后创建一个椭圆来当做“Super colorful base”的旋钮。

在“Super colorful base”图层之上绘制一个58 x 58的椭圆,给这个椭圆添加一个垂直的线性渐变,顶部色值为:#FFDBFF 底部色值为#FCF2FC (如图25)。


选中这个椭圆成组,更改组名为“Knob base”(如图26)。


正如你所看到的我们刚刚创建了基础图形以及我们的图标区,现在我们拥有底、ios7形状、五颜六色的底和旋钮。剩下的仅仅是添加效果这些事了。

在这一点上,如果你想确保明确的清楚上面的步骤,我创建了中间步骤示意图文,你可以点击这里。

现在我们需要花一些时间在组“Color base” 上。

我们要打造“ring”环绕我们的大圆圈。使用椭圆工具“O”创建一个128 x 128的椭圆别忘了使用对齐工具,效果如图27。


现在我们再创建一个116 x 116的小椭圆,如图28所示。


单击工具栏中的布尔运算“substract”功能即图29红框所示,现在我们得到的是一个环形,如图30所示。


你会注意到这个环是一个形状组,如果你双击打开它你还能继续修改绘制形状,重命名该环形为“Surrounding”

给这个环添加一个线性渐变,以对角线的角度,左上色值为#F698FF右下色值为#FFF3FF当然效果如图31。


现在我们要添加一个额外的线性渐变用来模拟漫反射,将鼠标移到图形中线性渐变的路径上你会看见鼠标的指针会变成一个带“+”的指针,在左上1/3的地方单击添加一个新的颜色设置颜色值为#BDB6FF,效果如图32所示。


下一步是创建一个锥形,由于Sketch没有“斜面和浮雕”效果,所以我们需要通过线性渐变来创建出这个三维效果。

在椭圆图层“Super colorful base”的下方创建一个144 x 144大小的椭圆,取消边框并给它添加一个垂直的线性渐变顶部色值是#FFFFFF底部色值是#DF80FF(效果如图33)。


下一步是创建一个模糊使它有一个适当的平滑效果。注意右侧检查器中的“Gaussian Blur”。检查它的复选框并设置的数值3(图34)。最后,设置不透明度44%(图35)。


7 添加图形深度

现在你已经进一步深入了你的图标了,选择添加图层“Super colorful base” ,点击右侧的 “Inner Shadows”(内阴影)旁边的“+”添加内阴影效果。保持色值#000000;偏移量X和Y为0;Blur(模糊度)为10;Spread(阻塞)值为0(如图36)。


点击“+”再次添加内阴影,不透明度为56;偏移量X为0,Y为7;Blur(模糊度)为9如图37。


8 修饰旋钮

现在我们已经创建出了一个漂亮的圆形,但是我们需要把它与背景较好的统一起来,在你的“icon base” 文件夹里选择“Base”图层沿着光源的方向给它添加一点环境色。

我们给“Base”图层创建第一个内阴影色值为#E187FF;不透明度为90;偏移量X为0,Y为5;Blur(模糊度)为6;Spread(阻塞)值为0。点击“+”再次添加内阴影此刻色值为#FFFFFF;不透明度为100;偏移量X为0,Y为-5(如图38)。


现在,我们来修饰小旋钮,选择组“knob base”和“椭圆2”图层。

内阴影一:色值# 8d1799透明度48%;X:0:Y:1;模糊:3

内阴影二:色值# FFFFFF透明度100%;X:0:Y:2;模糊:3

这将创造一个有着漂亮光泽的按钮。


下一步将会使按钮更具有“触摸感”,给它一点深度。用椭圆工具在48 x 48的按钮中间画一个 40 x 40的圆(如图40),去掉边框给它一个垂直的线性渐变,上面为纯黑#000000,下面为白色#FFFFFF设置透明度0%(如图41)。


接下来我们设置下这个40 x 40椭圆的混合模式。混合模式设置为“overlay”(如图42)。

由于译文太长,这里我将它分成两篇,还请小伙伴们继续关注,谢谢!!

更新:2014-06-12

下载
收藏

209人已收藏

酷九合金社

qq交流群:423655278 微信:conineacademy

  • 149

    作品

  • 6119

    粉丝

  • 16

    关注

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

    猜你喜欢

      2014-06-12 自译外文 经验/观点 原作者: Sebastien Gabriel 举报 33284 209 94 28

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

      0.0°

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

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

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

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      94
      209
      28

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

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

      登录

      手机号

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

      登录
      第三方账号登录