如何在Photoshop中创建一个破旧风格的网页设计
发布人:一全科技 来源:飞鱼的声纳 发布于:2010-12-07 23:08:42 浏览:1098

click.jpg

        Photoshop是做网页设计的非常好的工具,特别是如果你要在设计中使用大量的图片和笔刷效果的话。在这个教程中,我会教给你如何完成一个破旧风格的主页设计。我们将要设计页头、侧边栏、主体、页脚以及所有一切非常有质感和破旧效果的设计。

第一步

这次我们要使用Photoshop创建一个破旧风格的网页设计,需要用到很多的图片。由于这是一个中间难度的教程,我将会略过对于基本步骤的解释。 首先创建一个宽950像素高800像素,分辨率为72dpi的新文档。将标尺打开,拖拽出文档的边界,这将会是设计的最佳区域。我计划设计一个固定宽度的 布局。

选择图片》画布大小,增加宽度和高度到1200像素和1000像素,这样做是为了宽显示器的分别率设计。然后给你计划添加内容的区域(页首、导航栏、侧边栏、页脚)增加参考线。

让我们假设这个设计最终目的是一个wordpress主题,因此我们需要一个页首,一个在页首中的导航栏以及一个右边的侧边栏。如下图所示。之后将背景色填充为#7A8173。

1.jpg
 

第二步

现在我们要给页首的背景创建图案。很简单,创建一个50像素宽,300像素高的文档,画出如下图所示的图形。我使用了参考线让图形尽可能的对称。然后选择编辑》定义图案,保存为”Pattern 1″。

2.jpg

第三步

在主设计文件的新图层上,使用矩形工具画出一个300像素高的矩形。打开图层样式,添加图案叠加,选择前面创建的图案。为了达到理想效果,你必须点 击贴紧原点按钮。将图层的填充不透明度更改为0%,在这个图层上再创建一个新的图层,将两个图层合并,这种方法可以让你直接给页首增添效果。将这个图层命 名为Pattern1。

3.jpg
 

第四步

选择”Pattern 1″图层,给它添加一些图层样式:投影、渐变叠加以及图案叠加。尝试着得到如下图所示的结果,使用如下值。

4.jpg

第五步

现在我们要添加导航栏背景。画出一个矩形盖住”pattern 1″图层一点点。给矩形应用图案叠加、黑色到黑红色的渐变叠加以及柔和的投影。使用下面图片所示的值作为参考。接下来,添加图层蒙板》隐藏全部,在 图层蒙板上画出黑色到白色到黑色的渐变,你将会得到如下图所示的结果。

5.jpg
 

第六步

现在在”Pattern 1″图层上方画一个椭圆(#691E1B),命名为”Light”,给其应用50个像素半径的高斯模糊。我又创建了一条额外的参考线,方便将椭圆放置于页首的中间。将超出导航栏下方的所有部分都删除掉,更改图层的混合模式为颜色渐淡。

6.jpg

第七步

为了完成布局的第一部分,接下来我们要画出侧边栏的背景。创建一些参考线来给侧边栏划定界限并且调整已经创建好的参考线,使他们适应目前的布局。然后画一个红色的矩形(#3D100B),应用如下图层样式:阴影、颜色叠加以及图案叠加。

这个时候你必须考虑之后如何将图片剪切以适应在HTML和CSS中使用。这也就是为什么我在应用投影时经常将距离设置为0像素的原因,而且只使用水 平或者垂直渐变。这个案例中的材质有很多的水平线。在很多区域需要很容易的转换成可重复的背景图片。而且,这个时候也是稍微休息一下,将图层好好组织一下 的时候。

7.jpg
 

第八步

现在开始设计细节,我想将网站名添加到显眼的位置,这就是为什么我会使用这张漂亮的破旧标签图片。很显然,你必须将标签放置到我们这个设计的左上 角。试着作出如下图所示的效果。接下来,使用魔术棒工具选择棕色的圆圈,然后使用Ctrl+Shift+I反选选区。使用如下值调整色阶和色相/饱和度。

8.jpg

第九步

现在使用橡皮擦工具和不整齐的画笔,删除标签的一部分边缘。要添加剪纸效果,选择减淡工具,使用和上面相同的画笔形状给标签的边缘应用减淡。

9.jpg
 

第十步

下面要给标签添加阴影。首先,将”Label”图层复制一遍,更改色相/饱和度中的亮度到-100,在添加10个像素半径的高斯模糊。接下来,将”Label copy”图层的混合模式更改为正片叠底,将不透明度设置为75%。

10.jpg

第十一步

标签的最后一个修饰,将饱和度更改为-40,使其更加灰暗一些。

11.jpg
 

第十二步

现在我们添加一些图片,找一些符合这个风格的图片,由于我们这个教程主要讲解技术,所以我随便选了一张。这是一张漂亮的玻利维亚高原上的生锈的火车的图片。将火车从图片中提取出来。然后将火车图层的混合模式更改为变暗。

12.jpg

第十三步

我们来添加一些文字,首先是网站名。使用grunge字体键入文字,你可以在这里找 到这样的字体。标题文字使用黑色,将图层混合模式更改为叠加,然后将此图层复制一遍,将复制的图层的不透明度更改为75%。为了得到一点点的模糊效果,将 复制好的图层向左或者向右移动一个或者两个像素。使用这个技术添加更多的文字,比如标语等等。这个时候我们将导航链接也添加上。

13.jpg
 

第十四步

现在添加更多的东西,都是破旧风格的东西。我从这里下载了一些Jenn B的笔刷,这些笔刷是有使用上的限制的。使用这些笔刷添加一些数字、边角、胶带等等,在这一步中你可以尽情的发挥。只是要记住添加的所有图层都要在”Label”和”Label copy”图层的下方。

14.jpg

第十五步

现在我们开始添加页面部分。首先,在页首部分我们需要一个搜索框。键入搜索文字。接下来,画出一个红色的(#6A0400)矩形作为搜索表单,然后应用描边和图案叠加图层效果。

15.jpg
 

第十六步

现在我们在设计中添加主要内容区。首先我们要添加一个放置特别文字的区域。在侧边栏下方的图层中画一个深灰色(#0D0F0E)的矩形。我创建了四 个文件夹来组织图层:一个在所有图层之上的”Header”文件夹,一个在”Header”文件夹之下的”Sidebar”文件夹,一个在前面两个文件夹 之下的”Content”文件夹,最后一个是”Footer”文件夹。

你可以将这个矩形画到”Content”图层上,也可以给上面的四个文件夹中添加更多的文件夹。当你将矩形放置于合适的位置之后,使用下面的值应用投影和描边效果。

16.jpg

第十七步

从这里下载一些破损的边角和边框,在灰色背景上粘贴一个。将其颜色更改为#171612,图层模式为叠加。再给侧边栏的背景上也添加一个,这次将不透明度降低到25%。

17.jpg
 

第十八步

让我们来添加一些文字。想象这是类似于由javascript驱动的最新日志,或者特别内容的日志区。我在这里使用的是和导航栏上一样的破损字体,颜色为#4D0D0D,正文部分用的是#3F3F3F色的Arial字体。

给标题应用投影效果,导航栏也一样。当你将这个PSD文件转换成HTML+CSS的时候,你需要将此标题转换成图片,所以这个时候你给它们添加样式是可行的。最后,使用参考线将文字图层放置于合适的位置。

18.jpg

第十九步

我们的特别区域看上去有一些空白,因此我们来添加一些图片。在这个教程中,我使用了一张宝丽莱照片,你可以在这里下载宝丽莱图片。提取宝丽莱图片,将其放置于灰色背景之上的图层中,然后更改色相/饱和度让宝丽莱图片接近棕黑色。(需要勾选彩色化选项)。

给”Label”图层的边缘应用相同的技术(第九步)。将宝丽莱图片的边缘删除一部分并且将颜色渐淡。最后使用在第十步中相同的技术给其添加投影。

19.jpg
 

第二十步

我将自己的旧照片添加到了设计中。在”Polaroid”图层上添加一个新的图层,将照片放入其中,选择宝丽莱的黑色区域,按下 Ctrl+Shift+I反选选区。选择照片图层删除额外的部分。接下来,你可以添加更多的破旧效果,比如照片之上的胶带纸,如下图所示。我还给胶带纸添 加了1个像素的投影效果。

20.jpg

第二十一步

是时候给侧边栏添加RSS图标了。画一个圆角的矩形(#99917E),然后给它添加如下效果:内发光、图案叠加和投影,使用下面图片上的值。接下来,在矩形之上画出或者粘贴一个RSS形状,填充为黑色。最后,将”RSS shape”图层的混合模式更改为叠加。

21.jpg
 

第二十二步

现在将RSS图标放置于侧边栏的左上角。添加类似”RSS FEED”的文字。画出另外一个胶带纸,将订阅者的数字放置其上。记住,我们现在是在”Sidebar”文件夹中工作。

22.jpg

第二十三步

现在给设计中添加日志。随便写一些文字作为标题,另起一行写出日期、类别以及作者。再写出日志内容。这一步中最重要的就是排版。我喜欢给标题应用Serif字体,给正文应用Sans-Serif,这只是我的喜好。你可以选择你喜欢的字体。

23.jpg
 

第二十四步

为了给日志增加细节,我们需要添加一些图片,就像TUTS网站那样,但是因为这是一个破旧风格的设计,我们需要将图片弄得旧一些。这简单的就像在CSS中增加上下内边距,然后设置一个重复的背景图片。

这个图片是35毫米的胶卷。从胶卷中提取上下两边,使用如下图所示的数值改变它们的色相/饱和度。接下来,使用不规则的橡皮擦删除图片的部分区域。最后,给每一条图片增加投影。完成胶片的效果之后,在胶片图层之下粘贴图片。我使用了一张我旅行时的照片。最后给图片增加描边效果(#2F261D)。

24.jpg

第二十五步

在日志下画一条2个像素宽的线条,增加评论数字。将所有涉及日志的图层放入”Post”文件夹中。之后你可以使用裁切工具给文档增加一些高度,这样做的目的是看看如果有2-3篇日志的设计效果。复制”Post”图层组,如下所示改变文字和图片。

25.jpg
 

第二十六步

看起来不错,现在给侧边栏增加项目。你可以给每一个项目创建一个文件夹。

26.jpg

第二十七步

现在增加列表图标。你可以使用任意的自定义形状。随意增添一些文字,我使用的是Georgia字体。复制图标,编辑其中的一个表示鼠标悬停状态。其它的项目也这样来做。

27.jpg
 

第二十八步

我们快要完成了。给侧边栏底部增加一些破旧效果,在侧边栏图层的上方新建一个图层,添加破旧笔刷效果。选择侧边栏背景层,然后选择图层》图层蒙板》显示全部。接下来,使用不规则黑色笔刷隐藏侧边栏背景的左下角。

28.jpg

第二十九步

最后,选择侧边栏背景图层,拷贝它的图层样式。在设计的下方画一个矩形,放入”Footer”文件夹中,粘贴样式。接下来,提取并粘贴这张图片到页脚的背景上。

调整不饱和度让它变得更灰暗一些。你也可以使用步骤10中的技术给它添加投影效果。在这张纸上添加一些文字,可以是标语什么的。添加一些页脚文字,比如导航条和版权信息。

29.jpg