Photoshop制作包含3D元素的网页模板布局，立体水晶

本教程利用一些形状图形在PS中立体化。制作的时候要有一定的透视面，然后假设光源的位置，然后作出高光及暗调。为了突出水晶效果，作者特意加了很多辅助的光。效果相当不错。不过教程中有很多英文参数，图层命名的时候需要按照教程中的去命名。同时教程只是一个参照，跟多图形的立体效果可以由自己去发挥。最终效果

作者:龙骑士　出处:发现者

本教程将告诉你如何创建一个卷曲的丝带文本效果，然后用金色的细条纹装饰它。丝带将使用简单的形状和渐变叠加来创建，然后，运用图层样式来制作金色的装饰带。方法比较简单希望68PS联盟的朋友喜欢。先看下最终效果图：

一、在Photoshop中创建一个尺寸合适的新文件，填充上你喜欢的背景颜色，选择形状工具，然后从工具箱的形状库里面挑选一个现成的箭头图案。

在本次网页设计教程里,你将学会如何在photoshop中创建井然有序而且专业的网页布局融合三维绸带趋势, 以及其他迷人的3D元素.

步骤1

最后预览

我们新建或Ctrl+N，创建1500x 1200像素大小，分辨率72像素/英寸，RGB颜色，8位，背景内容为黑色的新文件。

二、在背景上拖出现成的箭头形状图案，颜色没关系，运用了样式以后箭头的效果会跟着改变。

这里是作品预览图.

步骤2

三、将包含箭头的图层命名为TOP ARROW。选择移动工具，按住Alt键，然后轮流按下方向键和右方向键大约20-40次，得到一个有厚度的立体的箭头。 刚才的操作会产生很多图层，选择最上面的图层，然后按 ctrl + e多次，将刚才新建的图层合并，注意不要合并TOP ARROW层和背景层。将这个合并层取名为bottom arrow ，填充红色，并移到TOP ARROW层的下面。现在的图层面板上应该有三个图层，从上到下分别是TOP ARROW层、bottom arrow层、背景层。

新建PSD文件

设置前景颜色为#fdfdfd和背景颜色为#9e9a97。选择渐变工具，选择前景到背景渐变填充，然后单击径向渐变图标。 然后，从文档的中心单击并拖动到其中一个角以创建背景渐变，然后复制背景图层。

1 开始创建文档(Ctrl+N); 高和宽均为1200 像素.

四、现在给top arrow图层添加渐变样式，颜色设置如下图。

步骤3

使背景图层可编辑

双击复制背景图层以应用图案叠加效果：

五、给bottom arrow图层添加阴影图层样式。设置如下图。

2 按照默认设置, Photoshop将会锁定背景图层因此你不能进行编辑.为了使它可编辑,在图层面板双击背景图层 (如果图层面板未激活,按下F7触发). 另外一种方法, 你可以在背景层上击右键,选择 背景图层. 一旦双击之后, 将会弹出对话框默认如下显示). 输入你背景图层的名字按下确定; 之后我们可以自由的编辑背景层.

混合模式：线性加深 图案：白色石膏

创建背景层

步骤4

六、现在你的箭头应该是下图这个样子了。

3 现在我们的背景层可以编辑了,双击图层缩略图增加渐变图层样式; 根据下图设置样式参数.

转到文字工具（T）,在画布上输入文字LOVE,字体为方正大黑简体，字间距为50。

七、用钢笔工具创建一个如下图虚线所示的形状，转换为选区。

4 创建新图层(Ctrl+Shift+N)命名为 header background. 选择矩形选区工具(M) 在画布顶端绘制矩形选区;选区大概150px高,宽度与画布相同.

步骤5

创建一个新的300 x 300像素的文件。选择矩形工具，并在文档的中心创建一个160 x 102像素的矩形。

5 使用任意颜色填充选区(Alt+Backspace)增加图层样式.

步骤6

选择直接选择工具，然后单击并拖动以选择左侧的两个定位点。 按住Shift键，鼠标点击左上角的定位点往下移动，获得类似于下图所示的形状。

6建立新层 (Ctrl+Shift+N)标志为 navigation background. 重复4 – 5步, 只是这次的选区只有50px高, 宽度仍然与画布一致,并且一定要放置在上面选区的下方.

选择添加锚点工具，然后单击以在左上点附近添加一个点,然后点击添加3个点在其他部位。如下图所示

7 填充选区(Alt+Backspace),任意颜色均可,并且增加一对图层样式,(颜色渐变以及描边选项).

步骤7

接下来，使用直接选择工具来选择和移动点，以创建下面的形状。

你看到的应该是这样.

步骤8

创建顶部

将形状的填充颜色更改为#b23636。 双击图层打开图层样式，应用以下渐变叠加图层样式：

8建立新层 (Ctrl+Shift+N)标志位header,选择矩形选区工作,在菜单栏调整宽度为850px高度为150px.

混合模式：覆盖 风格：反映 角度：-5 使用白色到黑色渐变填充

9 将选区置于画布中央, 确保选区的底部在navigation background图层的描边之上.

步骤9

Ctrl+J复制形状图层并将副本的填充颜色更改为#2f1616。 双击复制形状图层以更改其渐变叠加效果的设置：

10填充选区 (Alt+Backspace) 选择任意颜色, 然后增添以下样式.

角度：-27 规模：150％

步骤10

转到编辑>变换路径>翻转垂直。然后拖动矩形1拷贝图层到矩形1图层下方，然后向下移动以无缝连接。效果如下图所示

增加顶部文字

11使用横排文字工具添加网站的标题和口号. 设置参照下图.

步骤11

效果看起来应该是这样的.

转到图层，同时选中矩形1拷贝图层到矩形1图层，将它们拉入到文字图层。

创建导航栏

步骤12

12 创建新图层(Ctrl+Shift+N)命名为 navigation.使用矩形选区工具(M),设置固定大小:850px宽和50px高.

确保选中矩形1拷贝图层到矩形1图层鼠标点击右键，点击栅格化图层样式。Ctrl+T对图形进行缩小。

13 在顶部下面新建选区, 填充任意颜色.

步骤13

复制矩形1拷贝图层到矩形1图层，然后转到图层>合并图层，并将合并后的图层命名为丝带。并将丝带图层向下移动，放置丝带时的诀窍就是要注意层次的顺序，使丝带的正面和背面不会混淆。

14现在,为你的 navigation层增加3种样式.

步骤14

复制丝带图层，转到编辑－变换－顺时针旋转90度，使丝带变成衡的。然后编辑－变换－水平翻转，效果如下图所示

看起来应该是这样的.

步骤15

Ctrl+J复制图层两次，并向右移动丝带，得到如下效果

15 使用横排文字工具(T) 在你的导航栏上面增加导航链接.

步骤16 选择像皮擦工具（E），确保图层是丝带拷贝1，把不需的部份擦掉。

增添导航经过按钮

16选择圆角矩形工具(U) 设置半径为10px.

步骤17 下面我们开始给字母O做成丝带的效果。这里有一个技巧来帮助你创建O字母。先把水平丝带放在字母的顶部，轻的一面在左边。然后复制丝带的图层，Ctrl+T进入旋转模式，然后旋转复制40度，并移动它，使其与水平卷曲连接，然后按回车键。

17 画出一个小矩形大小为80pxx50px.

步骤18 按Alt + Ctrl + Shift + T键几次，直到创建一个完整的圆，使用橡皮擦工具（E）来去除重叠的部分。

18 使用矩形工具(M)在刚才圆角矩形的上半部分再画一个矩形. 填充同样的颜色.

步骤19 用这些方法把余下的字母都放上丝带，完成后，使原始文本图层不可见。效果如下图：

19在图层面板右击选择新建的图层并且复制. 将新复制的图层180度旋转,编辑>变换 >旋转 180o. 最后, 使用移动工具将两个新建的图形紧挨在一起并且处于同一水平线上.

步骤20 转到图层－把个个丝带文字图层复制，得到个个的拷贝图层，Ctrl+E合并拷贝的图层，并将图层命名为丝带文字。

20 使用矩形选区工具切除不想要的部分. 在新建的图层下半部份新建一个选区,按下 Del键清除.

步骤21 双击丝带文字图层，打开图层样式，以应用阴影效果： 阴影

21 使用移动工具(V) 和方向键对齐两个图形, 确保它们不是直接重叠. 按照下图所示, Ctrl + 点击图层面板中的缩略图载入较小图形的选区.

不透明度：35％ 距离：10

22 切换到较大图层按下del键清除不想要的部分. 重复上述步骤,你将看到以下图形.

步骤22 按Ctrl键点击丝带文字图层，得到选区，然后在所有图层的顶部创建一个新图层并将其称为金色的

改变链接经过样式

步骤23 双击金色的图层以应用以下图层样式： 斜面和浮雕

23当你的链接经过按钮一旦完成你可以删除副本, 然后重命名为nav hover. 现在开始,为它增加一组图层样式.

选中消除锯齿框 高亮模式：亮光

等高线

24将 nav hover层移至 navigation文字图层下方. 将文字的颜色改为白色(#FFFFFF).

范围50%

25 在你nav hover 按钮图层的下方, 新建一个图层(Ctrl+Shift+N)命名为 nav hover extra.在本层上, 使用椭圆选区工具新建一个小圆,颜色设置为#A3002F.

纹理

图案：黑色磁砖 深度：432％

26切除椭圆被导航栏挡住的下半部分,调整到合适位置之后再复制一份.

步骤24 设置前景颜色#ffb94a，选择画笔工具，选择一个95％硬度值的3px画笔，然后开始在每个卷曲的中间添加条纹。这可能需要一些时间，因为有选区在画的线都在选区之间，你可以擦除和重新创建任何你不喜欢的条纹。完成后，Ctrl+D取消选区。

看起来应该是这样的.

步骤25 点击图层面板下的新建填充或调整图层图标，然后选择色调/饱和度。将色调值更改为-180。

创建内容区域

27 建立新图层(Ctrl + Shift + N)命名为 content area. 使用矩形选区工具, 新建选区宽度为850px, 与我们平时的框框一样,高度可以根据你的内容增加.填充任意颜色并且调整样式.

步骤26 将调整图层放置在金色的图层下方，你也可以通过调整层得到任何你喜欢的颜色。

好了，我们完成了，希望你喜欢这个教程，并找到有用方法和技巧。 一起来看下完成后的效果：

28 拖移content area(内容区域)图层到navigation(导航)层下方然后使用移动工具(V)调整内容区域,是它与导航栏相交的部分像凹凸不平的线.

创建搜索框

29 新建图层(Ctrl+Shift+N)命名为 search field在导航区域的右边新建矩形选区.

30选择编辑 >填充(Shift+F5) 填充白色(#FFFFFF), 增加描边样式.

31 使用横排文字工作在搜索区域插入文字.

32 紧挨着搜索区域的地方,使用矩形选区工具(M)新建另外矩形.

33填充任意颜色并且为图层加入渐变叠加和描边两种图层样式; 根据下面图片设置.

看起来应该是这样的.

创建特色区域

34建立新层 (Ctrl+Shift+N)命名为featured area,使用圆角矩形工具新建矩形,圆角半径为10px.

35 使用多边形工具(L) 创建锐利的箭头指向左上部分. 为箭头填充同样的颜色.

36 现在为你的特色区域图层增加一对图层样式(渐变叠加和描边) .

填充特色区域内容

37 建立新层(Ctrl+Shift+N)命名为 featured border 使用矩形选区工具(U), 在特色区域里面新建矩形.

38按Ctrl键点击区域缩略图载入选区, 然后点击旋转>修改 > 收缩. 收缩区域威10px, 然后按下OK.

39载入你想要的图片 (我使用一些花的图片), 打开ps, 复制图片到你的剪切板(Ctrl + C). 确保我们上一步创建的选区仍然处于激活状态,点编辑 >粘贴入(Shift+Ctrl+V).图片就会粘贴到选区里面.

40 在图片右侧增加虚拟的标题和文字.

创建内容区域的三维绸带

41 使用和导航经过按钮类似的方法创建左边部分, 区别在于这次重叠区域更加长,并且是水平调整(如果需要请重新跳回阅读).

42 在绸带的结尾部分(右手边),使自定义形状工作(L)创建三角形 然后按下del键删除不需要部分. 最后, 增添图层样式和虚拟文字.

43复制三维绸带,点击图层选择编辑 >变换> 水平翻转. 使用移动工具调整(V) 到右边; 他们将作为侧边栏的标题部分

44 在每个标题下面增加文字或者一两张图片.

创建页脚

45 再次创建鼠标经过按钮(或者, 你可以简单复制上面已经做过的).

46 根据下图颜色列表更改渐变样式.

47合并并且旋转该层,通过 编辑>变换 > 逆时针旋转90°. 移动到图层左边.

48复制该图形通过编辑>变换>水平翻转. 移动到图层另外一边.

49 将两个图形合并到同一个层(Ctrl+E),放大其中任一个图形 (Z) , 类似下图创建选区,选择编辑> 自由变形(Ctrl+T).

50 选择中间的锚点拖拉到画布的另外一边.

看起来应该类似这样.

51 最后,使用横向文字工具写入你页脚的信息.

教程未完，请看下一页！

本文由360足球直播发布于生活启示,转载请注明出处：Photoshop制作包含3D元素的网页模板布局，立体水晶

关键词：