如何在Photoshop中创建一个非常有质感的网页布局

1、最终图片预览教程细节：程序：Photoshop CS4难度：中等估计完成时间：60分钟先来看一下我们将要创建的网站设计。所需要的素材： HYPERLINK http:/www.grafp/textures/old-style-grunge-texture/ t _blank 下载破旧材质 HYPERLINK http:/www.grafp/textures/old-wood-seamless-texture/ t _blank 下载无缝的木头材质 HYPERLINK http:/tutsp/plus-program/psd-plus/ t _blank 花朵图片 HYPERLINK http:

2、/tutsp/plus-program/psd-plus/ t _blank 树叶图片第1步在这个教程中，我们将用到一些商业图片来创建这个有质感的网站布局。首先让我们创建一个1000像素X1000像素大小的文档。第2步从 HYPERLINK http:/www.grafp/ t _blank Grafp下载无缝的木头材质。这里是下载地址： HYPERLINK http:/www.grafp/textures/old-wood-seamless-texture/ t _blank 下载无缝的木头材质。在Photoshop中打开”texture-small.jpg”图片，然后选择编辑定义图案。给图

3、案命名，点击确定。现在将图片关闭掉。第3步选择背景图层，按下Ctrl+J，这个快捷方式将会复制背景图层。选择新复制的图层，然后选择图层图层样式图案叠加，使用之前你创建的那个图案。第4步使用矩形工具创建一些不同颜色的垂直条纹。第5步按下Ctrl键，在图层调板中点击每一个形状图层，将这些条纹图层都选择上。第6步当所有形状都选择上以后，按Ctrl+E键（这个快捷方式会将所有的图层合并成一个图层），将图层混合模式更改为颜色渐淡，不透明度值更改为40%-50%之间。第7步现在添加上另外一张图片。再次访问 HYPERLINK http:/www.grafp/ t _blank grafplus，下载 HY

4、PERLINK http:/www.grafp/textures/old-style-grunge-texture/ t _blank 破旧风格的图片。将这个图片放置在文件的最顶层。选择文件置入命令，选择这张图片。第8步确保你选择了这个图层，然后应用一个简单的投影。图层图层样式投影。第9步使用矩形选区工具作出如下的选区。第10步确保你已经选择上了破损材质的图层，然后按Ctrl+J键（此快捷方式将会通过剪切）。选择新图层，将图层旋转180度（编辑变换旋转180度）。使用移动工具将新图层放置于所有图层的上方。然后添加上你的Logo。在这个教程中，我使用的文字是”PSDtuts+”。第11步将Log

5、o的图层混合模式更改为颜色加深。第12步使用相同的技术切割一些按钮和页脚。结果如下：第13步如果你想创建一个不同颜色的特别的按钮，你需要选择该按钮所在的图层，然后按下Ctrl+U调出色相/饱和度对话框，勾选色彩化选择框，然后向左或向右移动滑块来得到你想要的结果。第14步在右边，使用矩形工具创建一个白色的形状。第15步使用线条工具在白色形状上面创建一些细线条。线条使用的颜色是#d3d1d2。第16步在图层面板中选择白色形状图层和线条图层，然后按Ctrl+E合并图层。选择橡皮工具，使用小一些的，圆形的画笔删除图层中的一部分使其看上去像是一张真实的纸。第17步添加下列图层样式。第18步使用水平文字工

6、具添加一些文字。我使用的字体是Myriad Pro（你可以在windows 7和Vista中找到这种字体）。第19步现在在网页中间添加另外一张图片，在图片的右边添加两个箭头。箭头的形状你可以在自定义形状中去找。第20步在 HYPERLINK http:/tutsp/plus-program/psd-plus/ t _blank PSD Plus源文件中，你会找到两张商业图片。当然如果你不是我们的会员，你可以在网上搜索同样的图片。第一张是一片树叶，第二张是一朵红花。在Photoshop中打开这两张图片，去除背景。两张图片都有大概4000像素分辨率的品质，你可以使用魔术橡皮工具或其他你喜欢的方法去除背景。第21步将树叶图片放置于白