美文网首页Sketch UI设计
Sketch入门教程:使用蒙版和高斯模糊实现放大镜效果

Sketch入门教程:使用蒙版和高斯模糊实现放大镜效果

作者: 夜雨y | 来源:发表于2020-02-14 17:32 被阅读0次

    在产品设计中,放大镜的效果很常见,通常用来放大强调部分内容。在Sketch中,我们可以利用蒙版和高斯模糊这两个功能,实现放大镜的设计效果。

    1、放大镜效果的应用场景

    第一个应用场景是,在照片或者设计宣传稿中,突出重点信息,例如下面这张照片中,用放大镜来突出猫咪的某个部分(耳朵)。

    第二个应用场景是,在产品设计中,用放大镜对某些交互操作进行凸显。例如在手机端,选择复制某些文本内容时,会放大该部分文本内容,方便准确识别想要复制的内容。

    2、放大镜效果的实现

    第一步,需要准备素材,两张一模一样的图片,这里用的是两张手机截图,原始尺寸是750*1334。

    第二步,新增一个圆形,放在需要放大的部分上方。

    第三步,选中圆形和本身的图形,然后右键点击,在呼出的菜单中,选着”蒙版“。这一步的目的是为了制作出放大镜的放大内容。

    第四步,选中蒙版图层,设置好边框和阴影属性,这一步的目的是为了强调放大镜。

    第五步,调整第一个图像的大小,然后设置为高斯模糊,这一步的目的是为了弱化背景,增强放大镜效果。

    第六步,把放大镜移动到模糊的图像之上,形成放大文字的效果,大功告成。

    原创不易,未经允许,严禁任何形式的转载。


    推荐阅读:

    精品(超过2.5W阅读):干货:让你全方位学习成为一名交互设计师(1.6万字诚意之作)

    Sketch免费课程:专“鼠”福利,这套免费Sketch课程快快收下!

    交互设计精品课:如何成为年薪20万的交互设计师?

    相关文章

      网友评论

        本文标题:Sketch入门教程:使用蒙版和高斯模糊实现放大镜效果

        本文链接:https://www.haomeiwen.com/subject/hydjfhtx.html