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元素的网页模板布局,立体水晶
关键词:
下一篇:没有了