Photoshop设计制作纹理效果视频界面教程
Photoshop设计制作纹理效果视频界面教程
发布时间:2017-01-03 来源:查字典编辑
摘要:】:photoshop教程步骤1:背景创建新的文件,尺寸是1152pxx864px。我们的第一步是创建背景为我们的接口。这个过程只是只是尝试...

】:

Photoshop设计制作纹理效果视频界面教程1

photoshop教程步骤1:背景

创建新的文件,尺寸是1152 px x 864 px。 我们的第一步是创建背景为我们的接口。 这个过程只是只是尝试纹理。 基本上,我只是把一些纹理我发现和试验它的混合模式。 我的第一次尝试是一个 纸纹理 。

Photoshop设计制作纹理效果视频界面教程2

步骤2

添加一个 纸纹理 再一次,这一次改变其混合模式与繁殖。

Photoshop设计制作纹理效果视频界面教程3

步骤3

色相/饱和度调整图层添加到它变黑。

Photoshop设计制作纹理效果视频界面教程4

步骤4

添加一个 古董书纹理 与混合模式和不透明度48%乘以。

Photoshop设计制作纹理效果视频界面教程5

步骤5

添加 老纸纹理 。 这一次使用混合模式和不透明度58%覆盖。

Photoshop设计制作纹理效果视频界面教程6

步骤6

添加调整层黑色和白色。

Photoshop设计制作纹理效果视频界面教程7

步骤7

创建新层。 打D设置前景色和背景色为黑色和白色。 单击过滤器> >云渲染。

Photoshop设计制作纹理效果视频界面教程8

步骤8

设置其混合模式为正片叠底,并减少其不透明度为8%。

Photoshop设计制作纹理效果视频界面教程9

步骤9

创建新层。 填补它与白色到黑色的径向梯度。

Photoshop设计制作纹理效果视频界面教程10

第十步

设置其混合模式为屏幕,不透明度67%。

Photoshop设计制作纹理效果视频界面教程11

步骤11

添加调整层色相/饱和度。 选择彩色化给它一个颜色。

Photoshop设计制作纹理效果视频界面教程12

步骤12

最后,添加一个漂亮的 挠金属材质 。 设置其混合模式为正片叠底,并减少其不透明度为20%。

Photoshop设计制作纹理效果视频界面教程13

步骤13:工业线

打开绘图软体。 画一个黄色的长方形。

Photoshop设计制作纹理效果视频界面教程14

步骤14

顶部的矩形、画一个小黑色矩形。 选择分岔与直接选择工具和移动它们。

Photoshop设计制作纹理效果视频界面教程15

步骤15

选择形状和alt阻力来复制它。

Photoshop设计制作纹理效果视频界面教程16

步骤16

点击Command / Ctrl + D重复重复过程。

Photoshop设计制作纹理效果视频界面教程17

Photoshop设计制作纹理效果视频界面教程18

步骤17

选择所有的形状。 点击Command / Ctrl + c将它粘贴在Photoshop、命令/ Ctrl + v .选择智能对象在粘贴对话框。

Photoshop设计制作纹理效果视频界面教程19

步骤18

双击层给打开图层样式对话框。 添加图案叠加、负载颜色纸和选择一个肮脏的模式。

Photoshop设计制作纹理效果视频界面教程20

Photoshop设计制作纹理效果视频界面教程21

步骤19

添加矩形在顶部和底部的条纹。

Photoshop设计制作纹理效果视频界面教程22

一步20

后添加图层样式。

Photoshop设计制作纹理效果视频界面教程23

Photoshop设计制作纹理效果视频界面教程24

Photoshop设计制作纹理效果视频界面教程25

Photoshop设计制作纹理效果视频界面教程26

Photoshop设计制作纹理效果视频界面教程27

Photoshop设计制作纹理效果视频界面教程28

步骤21:基本窗口界面

我们将首先创建窗口的基地。 创建一个矩形形状与颜色:# # 313029,透明度:100%,填充:50%。 后添加图层样式。

Photoshop设计制作纹理效果视频界面教程29

Photoshop设计制作纹理效果视频界面教程30

Photoshop设计制作纹理效果视频界面教程31

步骤22

层风格我们刚刚添加太扁平。 我们将使用一个简单的技术来修复它。 在图层样式对话框激活图层蒙版隐藏效果。

Photoshop设计制作纹理效果视频界面教程32

步骤23

添加图层蒙板。 命令/ ctrl路径创建选择。 反向选择按命令/ Ctrl + Shift + i .添加一个柔软的黑暗梯度上,漆黑色的工业线隐藏的影子。

Photoshop设计制作纹理效果视频界面教程33

Photoshop设计制作纹理效果视频界面教程34

Photoshop设计制作纹理效果视频界面教程35

一步24

你可以看到差异之前和之后的修改在下图的影子。

Photoshop设计制作纹理效果视频界面教程36

步骤25

画出另一个矩形。 这个时间小于之前的。

Photoshop设计制作纹理效果视频界面教程37

一步26

添加 锈纹理 在其上。 使用图层蒙版隐藏不需要的区域。 设置其混合模式为正片叠底,并减少其不透明度为10%。

Photoshop设计制作纹理效果视频界面教程38

Photoshop设计制作纹理效果视频界面教程39

一步27

创建新的矩形覆盖所有的形状。 添加小矩形内部的形状,将其设置为减。

Photoshop设计制作纹理效果视频界面教程40

一步28

重复之前的形状。 调整内部路径。

Photoshop设计制作纹理效果视频界面教程41

一步29

后添加图层样式。

Photoshop设计制作纹理效果视频界面教程42

Photoshop设计制作纹理效果视频界面教程43

Photoshop设计制作纹理效果视频界面教程44

一步30

有太多的阴影部分的窗口上。 在图层样式对话框激活图层蒙版隐藏效果。

Photoshop设计制作纹理效果视频界面教程45

步骤31

命令/ ctrl路径。 反向选择(命令/ Ctrl + Shift + I)和阴影画在窗口的上部与灰色。

Photoshop设计制作纹理效果视频界面教程46

Photoshop设计制作纹理效果视频界面教程47

Photoshop设计制作纹理效果视频界面教程48

步骤32

下面,你可以看到之前和之后的差异部分隐藏的影子。

Photoshop设计制作纹理效果视频界面教程49

步骤33

画一个矩形覆盖所有的窗口界面。 设置其填充到0%,后添加图层样式。

Photoshop设计制作纹理效果视频界面教程50

Photoshop设计制作纹理效果视频界面教程51

Photoshop设计制作纹理效果视频界面教程52

Photoshop设计制作纹理效果视频界面教程53

Photoshop设计制作纹理效果视频界面教程54

步骤34

我们的最后一步就添加微妙突出到窗口界面。

Photoshop设计制作纹理效果视频界面教程55

步骤35:洞

画一个黑眼圈,放在角落里。 添加阴影。

Photoshop设计制作纹理效果视频界面教程56

Photoshop设计制作纹理效果视频界面教程57

步骤36

用软刷油漆一些白色的顶部的孔。

Photoshop设计制作纹理效果视频界面教程58

一步37

这是导致100%的观点。

Photoshop设计制作纹理效果视频界面教程59

一步38

把所有的层创建孔到上一层组。 复制组和把它放在每个角落。

Photoshop设计制作纹理效果视频界面教程60

一步39:窗口标题

在插画家,创建窗口标题形状的一半。

Photoshop设计制作纹理效果视频界面教程61

一步40

右键单击并选择变换>形状反映。 选择轴:垂直并单击复制。

Photoshop设计制作纹理效果视频界面教程62

步骤41

移动复制形状。

Photoshop设计制作纹理效果视频界面教程63

步骤42

选择分是重叠的。 右击并选择加入。

Photoshop设计制作纹理效果视频界面教程64

一步43

粘贴到Photoshop的路径作为一个形状图层。

Photoshop设计制作纹理效果视频界面教程65

Photoshop设计制作纹理效果视频界面教程66

一步44

油漆突出和影子的形状。 你可以看到下面的进展我。 我使用非常软刷(硬度:0%,不透明度:5 - 10%)和大约10层。

Photoshop设计制作纹理效果视频界面教程67

一步45

添加游戏标题和后添加图层样式。 这里使用的字体是 凯尔特加拉蒙字体第二 。

Photoshop设计制作纹理效果视频界面教程68

Photoshop设计制作纹理效果视频界面教程69

Photoshop设计制作纹理效果视频界面教程70

Photoshop设计制作纹理效果视频界面教程71

Photoshop设计制作纹理效果视频界面教程72

一步46:装饰

画一个圆角矩形左边的接口。 使用颜色:# 605847。 添加微妙的渐变叠加从灰色变成白色。

Photoshop设计制作纹理效果视频界面教程73

Photoshop设计制作纹理效果视频界面教程74

一步47

重复之前的形状,并调整其大小。 见下面的照片供参考。

Photoshop设计制作纹理效果视频界面教程75

一步48

画出另一个矩形。 这一次使用明亮的颜色。 添加渐变叠加。 复制,并将其在较低的部分更大的矩形。

Photoshop设计制作纹理效果视频界面教程76

Photoshop设计制作纹理效果视频界面教程77

Photoshop设计制作纹理效果视频界面教程78

一步49

画1 px线为其突出和阴影。 我们要把这形成一个三维形状。 最后,你会发现这个小1 px细节是需要得到一个现实的结果。

Photoshop设计制作纹理效果视频界面教程79

一步50

下面画形状添加3 d透视到形状。 后添加渐变叠加。

Photoshop设计制作纹理效果视频界面教程80

Photoshop设计制作纹理效果视频界面教程81

一步51

画阴影下形成的。

Photoshop设计制作纹理效果视频界面教程82

一步52

下面画形状和完整的影子。 添加渐变叠加到形状。

Photoshop设计制作纹理效果视频界面教程83

Photoshop设计制作纹理效果视频界面教程84

一步53

这是导致100%的观点。

Photoshop设计制作纹理效果视频界面教程85

一步54

选择所有图层并把它放在一个组层。 复制组,水平翻转,并把它放在另一边。

Photoshop设计制作纹理效果视频界面教程86

Photoshop设计制作纹理效果视频界面教程87

一步55:装饰

画形状,如下所示。 油漆突出和影子在上面。 不要忘记添加软阴影的形状对界面窗口。

Photoshop设计制作纹理效果视频界面教程88

一步56

下面你将看到结果在100%的观点。 重复两次的形状。

Photoshop设计制作纹理效果视频界面教程89

57步

创建新层根据形状和漆黑色像素使用小软刷。

Photoshop设计制作纹理效果视频界面教程90

一步58

复制所有的形状。 水平翻转和移动到另一边的接口。

Photoshop设计制作纹理效果视频界面教程91

一步59:添加生锈纹理

添加 锈纹理 覆盖整个界面。 命令/ ctrl界面边界和窗口标题创建一个选择基于他们的形状。 添加图层蒙版。 漆黑色标题形状与低透明度刷,因为我们不想看到太多纹理上锈。 下面,你可以看到我创建的面具。

Photoshop设计制作纹理效果视频界面教程92

Photoshop设计制作纹理效果视频界面教程93

Photoshop设计制作纹理效果视频界面教程94

一步60

降低不透明度为15%。

Photoshop设计制作纹理效果视频界面教程95

步骤61:车辆预览

创建一个框架在窗口界面。 这是由两个路径和内在路径设置为减。 后添加图层样式。

Photoshop设计制作纹理效果视频界面教程96

Photoshop设计制作纹理效果视频界面教程97

Photoshop设计制作纹理效果视频界面教程98

Photoshop设计制作纹理效果视频界面教程99

步骤62

粘贴 PNG图像的车辆 在框架。

Photoshop设计制作纹理效果视频界面教程100

步骤63

后面的帧添加一个新图层,填充灰色白色梯度。

Photoshop设计制作纹理效果视频界面教程101

步骤64

绘制一些阴影下的车辆。

Photoshop设计制作纹理效果视频界面教程102

Photoshop设计制作纹理效果视频界面教程103

步骤65:车辆数据

添加另一个框架在车下面预览。 使用类似技术在前面的步骤。

Photoshop设计制作纹理效果视频界面教程104

Photoshop设计制作纹理效果视频界面教程105

Photoshop设计制作纹理效果视频界面教程106

步骤66

添加一些信息到框架。

Photoshop设计制作纹理效果视频界面教程107

步骤67:研究和升级数据

画出另一个框架,这一次更大的。

Photoshop设计制作纹理效果视频界面教程108

步骤68

画一个简单的矩形在框架。 后添加图层样式。

Photoshop设计制作纹理效果视频界面教程109

Photoshop设计制作纹理效果视频界面教程110

Photoshop设计制作纹理效果视频界面教程111

Photoshop设计制作纹理效果视频界面教程112

步骤69

添加一些文本到矩形。

Photoshop设计制作纹理效果视频界面教程113

步骤70

复制矩形为另一个数据。 删除图层样式外发光,并减少其不透明度为30%来自非活动水平。

Photoshop设计制作纹理效果视频界面教程114

步骤71

复制所有的形状来创建另一个数据集。

Photoshop设计制作纹理效果视频界面教程115

步骤72:绘图按钮

回到插画家,创建这个形状。

Photoshop设计制作纹理效果视频界面教程116

步骤73

粘贴到Photoshop的形状作为形状图层。 后添加图层样式。

Photoshop设计制作纹理效果视频界面教程117

Photoshop设计制作纹理效果视频界面教程118

Photoshop设计制作纹理效果视频界面教程119

Photoshop设计制作纹理效果视频界面教程120

步骤74

油漆突出和影子手动使用软刷,硬度和不透明度0% 5 - 10%。

Photoshop设计制作纹理效果视频界面教程121

步骤75

重复的形状和水平翻转。

Photoshop设计制作纹理效果视频界面教程122

步骤76

画一个浅蓝色矩形和把它背后的形状。 后添加图层样式。

Photoshop设计制作纹理效果视频界面教程123

Photoshop设计制作纹理效果视频界面教程124

Photoshop设计制作纹理效果视频界面教程125

Photoshop设计制作纹理效果视频界面教程126

Photoshop设计制作纹理效果视频界面教程127

Photoshop设计制作纹理效果视频界面教程128

Photoshop设计制作纹理效果视频界面教程129

步骤77

画一些强调内部的形状。 添加按钮的标题。 漆光发光顶部的按钮。

Photoshop设计制作纹理效果视频界面教程130

步骤78

复制按钮,改变其标题。

Photoshop设计制作纹理效果视频界面教程131

最终的图像

Photoshop设计制作纹理效果视频界面教程132

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新photoshop学习
热门photoshop学习
网页设计子分类