如何用Photoshop制作iOS 7透明磨砂玻璃效果

半个月前,苹果发布了iOS 7系统正式版,于是伴随着扁平化界面一同而来的透明磨砂玻璃效果让所有支持iOS 7的设备的用户都能用上了。因此,我做了一套iOS 7的透明磨砂玻璃效果的UI。可是,没想到很多人对于怎么设计这个透明磨砂玻璃的特效甚是不解。这真是我始料不及,当iOS 7 Beta版本发布的时候我就分析了一下怎么在Photoshop中来设计这个界面,其实就是很简单的事情,很容易想通的。那既然有这么多的童鞋不太明白是怎么制作的,于是我决定写一篇文章大致讲解一下吧。

Flat UI Kit

准备

首先,你要挑选一张看着舒服的图片作为背景,图片好看心情才好。由于我写此篇文章的目的只是讲解透明磨砂玻璃效果的制作,其他一些基本且无关的操作因此忽略,因此需要有一定的Photoshop操作基础。

Step 1

在打开的Photoshop文档中使用圆角矩形工具(U)拖拽出一个基础形状,比如880×320的大小,4个像素的圆角。

Step 2

将背景图片拖放到PS文档中,将图层置于刚刚创建的圆角矩形之上,并且将图层转换为智能对象,然后将鼠标放在这两个图层之间,按住ALT键点击鼠标创建剪切蒙版。

Step 3

关键的地方到了,选中这个背景图片的图层,然后应用高斯模糊滤镜,随便设置多少半径,只要看起来效果满意即可,比如10个像素。这里可以看到图层下方多出了一个智能滤镜。这就是为什么上一步中要把图层转换为智能对象的原因,转换为智能对象后,应用的滤镜即可成为智能滤镜,而智能滤镜的好处之一是可以添加蒙版,另外还有个更大的作用就是时候可以更改滤镜的参数。

Step 4

这一步需要绘制一个承载信息的横条,以880×100的尺寸为例,将图层的颜色设置为与背景接近,同时与背景框架保持底部对齐。由于背景的底部有两个角带有圆角,所以仍然需要使用第二步中的方法创建剪切蒙版。

Step 5

这是另一个关键的步骤,由于背景现在是全部都是模糊的,而最终的效果中只需要横条下方的区域模糊,因此点击第三步中的智能滤镜的缩略图以选中智能滤镜的蒙版,然后按住CTRL键点击横条的缩略图。这样就载入了横条图层的选区,而由于是需要这部分是模糊其他部分清晰,所以按住CTRL+SHIFT+I键反转选区。最后使用黑色填充这块区域,于是就得到最终需要的效果了

到这里,iOS 7的透明磨砂玻璃效果就完成了。最后,添加些文字就可以完成了。总得来说,我的讲解是比较简单的,因为忽略了一些不是关键的地方,因此,这需要具有一定的Photoshop基础,当然都是很容易掌握的基础。

4 Comments

  1. 点击第三步中的智能滤镜的缩略图以选中智能滤镜的蒙版,這步驟有些問題,因沒辦法選到智能滤镜的蒙版,只能選到智能滤镜的缩略图而已

    能在說明詳細些嗎?
    謝謝

    Reply

Leave a Comment.