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

作者: 生活启示  发布:2019-09-23

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

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

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

图片 1

图片 2

图片 3

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

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

步骤1

图片 4

最后预览

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

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

这里是作品预览图.

图片 5

图片 6

图片 7

步骤2

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

新建PSD文件

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

图片 8

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

图片 9

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

图片 10

步骤3

图片 11

使背景图层可编辑

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

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

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

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

图片 12

图片 13

图片 14

图片 15

创建背景层

步骤4

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

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

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

图片 16

图片 17

图片 18

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

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

步骤5

图片 19

图片 20

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

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

图片 21

图片 22

步骤6

图片 23

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

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

图片 24

图片 25

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

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

图片 26

图片 27

步骤7

图片 28

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

你看到的应该是这样.

图片 29

图片 30

步骤8

创建顶部

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

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

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

图片 31

图片 32

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

步骤9

图片 33

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

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

角度:-27 规模:150%

图片 34

图片 35

图片 36

步骤10

图片 37

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

增加顶部文字

图片 38

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

图片 39

图片 40

步骤11

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

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

图片 41

图片 42

创建导航栏

步骤12

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

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

图片 43

图片 44

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

步骤13

图片 45

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

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

图片 46

图片 47

步骤14

图片 48

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

图片 49

图片 50

看起来应该是这样的.

步骤15

图片 51

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

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

图片 52

图片 53

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

增添导航经过按钮

图片 54

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

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

图片 5517 画出一个小矩形大小为80pxx50px.

图片 56

图片 57

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

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

图片 58

图片 59

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

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

图片 60

图片 61

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

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

图片 62

图片 63

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

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

不透明度:35% 距离:10

图片 64

图片 65

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

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

图片 66

图片 67

改变链接经过样式

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

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

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

图片 68

图片 69

图片 70

等高线

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

范围50%

图片 71

图片 72

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

纹理

图片 73

图案:黑色磁砖 深度:432%

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

图片 74

图片 75

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

看起来应该是这样的.

图片 76

图片 77

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

创建内容区域

图片 78

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

图片 79

图片 80

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

图片 81

图片 82

图片 83

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

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

图片 84

图片 85

创建搜索框

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

图片 86

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

图片 87

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

图片 88

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

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

图片 90

图片 91

看起来应该是这样的.

图片 92

创建特色区域

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

图片 93

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

图片 94

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

图片 95

图片 96

填充特色区域内容

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

图片 97

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

图片 98

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

图片 99

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

图片 100

创建内容区域的三维绸带

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

图片 101

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

图片 102

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

图片 103

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

图片 104

创建页脚

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

图片 105

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

图片 106

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

图片 107

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

图片 108

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

图片 109

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

图片 110

看起来应该类似这样.

图片 111

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

图片 112

教程未完,请看下一页!

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

关键词: