【官网】Photoshop设计个性的多媒体网站模板

2015年7月17日

本教程我们将演示如何在Photoshop中使用照片，画笔。纹理和3D物体来设计一个有创意的多媒体网站布局。界面设计第一印象很重要，令人惊叹的具有视觉吸引力的作品是每个设计者为之追求的。让我们开始吧！

最终效果图

步骤1在Photoshop中创建一个960 px * 620 px的画布。这个尺寸适用于大部分的网站屏幕。

按CMD + R来添加标尺，画出一些指导线，标明主要内容区域的界限。这将益于定位你的设计。

步骤2现在主要区域被适当的限定，让我们调整画布为1224 px * 620 px(图像>画布大小)创建一个更大的背景。这个溢出的区域将有益于大屏幕，创建一个’无边界’的视觉效果。

步骤3编写文档的最后一步是在中心添加指导线。指导线将方便你定位中间的设计元素。一个快速找到该中心的方法是创建一个新层，然后按快捷键CMD + T激活自由变换。

步骤4让我们在云彩背景平台上放置主要元素吧。先制作一个灰色的渐变背景。去图层>图层样式>渐变叠加。渐变颜色为#434344到#EAECEC。其他设置为默认。

步骤5创建一个新层云。载入云彩笔刷Clouds brushes，用白色涂抹出一些形状，大小和透明度各不相同的云，直到你得到类似下图的效果：

步骤6创建第二个图层云2，在中心添加一些云。

步骤7创建第三个图层云3。这一次使用抽象光晕笔刷Abstract glow brushes，使用第二个笔刷，大小为420px。翻转它，按CMD + T>水平翻转。这使云彩看起来更加虚无缥缈。

步骤8现在，我们将创建一个大的M。你也可以把你公司(或者你喜欢的)的首字母放在这里。

打开Illustrator，创建一个新层粘贴云作为背景。用它作为指导来设计3D的M。输入英文字母M：字体为Handel Gothic Ex,，大小181pt

白色，你可以使用其他厚宽的字体代替。为了让文本体现出三维效果，去效果>三维>拉伸与斜角。参考下图的设置。

步骤9复制3D的M，返回到Photoshop把它粘贴在你的文档里。重命名图层为M。现在我们将应用一些效果和纹理使之更加切合实际更有趣。首先对图层M应用下面的图层样式。

步骤10创建一个新文件夹为m 纹理。使用魔术棒工具选择字母M创建选区，并给文件夹添加一个图层蒙版。在这个文件夹里我们将放入所有的3DM的纹理。

从Rust Textures包里使用纹理4.jpg。复制，粘贴，并重命名图层为纹理。复制它，缩小副本图层纹理2到12.5%。

步骤11调整图层的不透明度为40%，并改变这两个纹理图层的混合模式为颜色加深。

步骤12使用Armored Metal Textures里的metal_plaque_bump_seam.jpg添加另一个纹理层纹理3。调整图层的不透明度为26%，改变其混合模式为强光。调整图层直到你得到满意的纹理。

步骤13使用不透明度约30%的柔软的圆形画笔在M的下方描绘阴影。使用涂抹工具调整，创建如下所示倾斜的影子。

步骤14添加你的公司名称，这里是Multimedia。使用Heritage Extra字体，大小32px，黑色。下一步将在它下方添加一个微弱的阴影。复制图层，重新命名为Multimedia的阴影。按Cmd+ T使用变换工具，右击并选择垂直翻转。添加动感模糊。更改图层的不透明度为50%。添加一个图层蒙版，最后应用一个渐变来淡出底部。

步骤15现在将为我们的多媒体世界创建城市面貌。你可以使用Cityscape Brushes建立建筑物。下载几个抽象纹理包：Render Pack Textures 1 和Render Pack Textures 2。首先使用笔刷画一些建筑物。在每个独立的图层上画每个建筑，放在图层云和云2之间。

步骤16调整大小和位置。剪切出建筑物中你不需要的部分。

步骤17对于每个建筑物，创建一个包含各自纹理的新文件夹。用添加M纹理的同样的方法应用纹理，选择每个建筑物，使用魔术棒工具，在文件夹里对选区添加一个图层蒙版，设置文件夹图层的混合模式为变亮。

步骤18现在应用下图的抽象纹理。移动，旋转，调整纹理的大小，直到你获得满意的效果。

步骤19这是一个很好的方法来清理和整理图层。虽然起初有点繁琐，但这种做法实际上会为你节省搜索文件时所用的时间。把所有的建筑物图层放置在一个新文件夹建筑物里。把这个文件夹放在云和云2之间。

步骤20使用云笔刷在云2上画一些小的云彩来掩盖建筑物的根基。

步骤21让我们添加一些道具：Classical camera, Director’s chair, TV camera, Laptop, Microphone, Hotair baloon 1, Hotair baloon 2, Small Tree。对于每个对象使用魔术棒工具(W)从背景中提取，然后点击Refine Edge按钮来调整边缘。若要删除剩余粗糙的边缘，那就使用橡皮擦工具(E)中一个小的圆形笔刷来擦除。