日期:2012-10-17  浏览次数:20648 次

iphone和ipad中的亚麻布纹背景看上去非常细腻而又不乏质感,给人以人性的柔和的感觉。这样的材质不仅可以出现在UI里,当然也可以应用到网页设计中,所以这篇文章里我就来介绍一下如何在Photoshop中创建这样的背景材质。

先来看最终效果:

demo.jpg

接下来是具体实现步骤:

一、Ctrl+N新建一个文档,680像素宽,390像素高,背景白色,其余保持默认,点击确定。新建文档的大小要比你最终想要的图片大小大一些,基本上上下左右各留出50像素,我这里最终要创建宽580像素,高290像素的图片,所以我给宽和高各加了100像素。然后在菜单栏选择图层>新建填充图层>纯色命令,选择一个较深的灰色,我这里的颜色为#303030。

dark-grey.png

二、新建一个图层,命名为”深色横纹”,填充为白色,在菜单栏上选择滤镜>杂色>添加杂色命令,数量99%,平均分布,勾选单色,点击确定。再应用滤镜>模糊>动感模糊命令,角度0度,距离25像素,点击确定。最后将图层的混合模式更改为叠加。再次新建一个图层,命名为”深色竖纹”,应用和上面的图层一样的方法,只是将动感模糊的角度设置为90度。最后将两个图层的不透明度更改为25%。完成之后的效果如下图:

dark-horiz-vert.png

这时你就能观察到为什么我们要将文档设置的大一些了,可以看到,文档的边缘部分的布纹好像被扯掉了一些纤维一样,看起来很稀薄。所以最后我们要将边缘部分裁切掉。

三、我们再新建一个图层,命名为”浅色横纹”,填充为黑色。应用添加杂色命令,这时我们使用和上一步骤中不同的杂色数量,目的是使布纹的纤维更为明显。所以这里我们使用101%,平均分布,勾选单色。然后应用动感模糊,角度0度,距离25像素。再按照相同的方法创建一个”浅色竖纹”图层。最后将两个图层的混合模式更改为滤色,不透明度更改为20%。完成后的效果如下:

light-horiz-vert.png

四、最后使用裁切工具将图片的四边裁掉,调整为你想要的图片尺寸。当然你还可以通过调整填充图层的颜色和布纹图层的不透明度来创建多种色彩的背景图片,这也是为什么我们在第一步中使用填充图层的原因。以下是最终效果图:

demo-1.jpg

demo-2.jpg

demo-3.jpg