ps网页布局设计实例教程(ps网页布局设计实例教程图片)

本文主要介绍ps网页布局设计实例教程视频(ps网页布局设计实例教程)，下面跟着东辰网详细了解一下吧。

今天，我将介绍如何创建一个干净的网络布局和一个美丽的背景。切入正题，让让我们开门见山吧。有兴趣可以打开PS照着做。

要开始设置的文件

打开一个新文档:整体尺寸为12001640像素，分辨率为72像素/英寸。

我们需要创建一个基本的背景层。只需在草稿上勾画出总体布局和结构，就可以看到页面的最终原型，但是

在设计过程中，我们可能会添加新的元素。

正如您从草稿中看到的，我们将创建5个列，在其中添加内容。

添加开始层，这将是我们的背景，颜色#eded。

在页面顶部画一个矩形，命名为top1(用矩形栅格化的图层(颜色#eded)，添加噪点(滤镜噪点添加噪点0.5–0.8；高斯分布和单)。再次绘制矩形，颜色#cdc)，将形状栅格化并添加噪点(滤镜噪点添加噪点0.5–0.8；高斯分布和单)。添加一个渐变叠加(柔光，54%，90%从黑到白，角度和缩放75)。

接下来添加一个矩形)，中间新建一个矩形(颜色#608bb6，高度400像素)，混合模式设置为颜色加深填充75%，然后添加1像素的白色描边(图层样)。

最后，添加一个矩形形状到底部页脚，使用相同的工具和颜色，但现在设置混合线性光的不透明度为70%。

最终结果如下。

第2步–背景

给我们的背景添加纹理。

添加一个新层(CTRSHIFT)并使用选框工具在画布顶部添加一个1像素的白线。(仔细看下图顶部的白线)

现在打开一个121像素的新文档，背景图层解锁隐藏。放大到3200%，添加新图层，使用矩形选框工具添加两个11像素的正方形，填充颜色为#FFF和其他#000，如下图所示。然后选择菜单编辑定义模式。

我们做了一个新的图案效果即将使用(这也是制作图案的一)

回到我们的主文档。新建一个图层，用矩形选框工具画一个和整个画布一样大的选区，填充前景色，填充设置为0%，然后在图层样式中添加图案叠加。

现在它现在是画云的时候了！

可以拉出五条辅助线(如图，方法和菜单视图，分别在位置84px–186px–600px输入1014px1118p)来划分工作空间，然后使用椭圆工具添加一些形状，然后将这些形状进行图层。全部选中并分组。

复制该组

并将复制的组变成智能对象(单击组，然后右键)，并添加噪波。

现在，你必须使用图层蒙版来隐藏超出部分的云(仔细看下面的方):Ctrl点击名为顶层(在“图层”面)，选择区域出现，然后单击选择添加了杂色云的图层。关键的一步是点击添加矢量蒙版。

[img]www.UISDC.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107//WinTemp/RichOle/}5E@RN[{WBM5L_1ma1$~9j5.jpg[/img]

[img]www.UISDC.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107//WinTemp/RichOle/}5E@RN[{WBM5L_1ma1$~9j5.jpg[/img]

[img]www.UISDC.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107//WinTemp/RichOle/}5E@RN[{WBM5L_1ma1$~9j5.jpg[/img]

[img]www.UISDC.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107//WinTemp/RichOle/}5E@RN[{WBM5L_1ma1$~9j5.jpg[/img]

[img]www.UISDC.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107//WinTemp/RichOle/}5E@RN[{WBM5L_1ma1$~9j5.jpg[/img]

然后应用下面的样式。内阴影:混合模式选择和叠加，白色，透明度55%，全局光照角度120，距离5，大小0。

出现了云的白色投影。

现在，让我们让我们画一个美丽的云影。要复制Yunna图层，首先清除图层样式，向右调整位置。在原始图层下面，设置填充为0%，然后添加以下样式。

梯度叠加，线性，正常混合模式，角度90。

如果成功出现，用同样的方法画他的云。

步骤3–顶部附件图纸

添加徽标。使用钢笔工具(颜色#79a7d)绘制下图，使用直线工具绘制两条白色线段。然后添加图层样式。

投影，混合模式为正叠加，透明度为46%，取消全局光照，调整角度为140，距离7px为0。描边，白色尺寸3px，内部位置，透明度55%，正常混合模式。当然

然后将同样的阴影应用到两条白线上。

我们将使用缩放、钢笔工具、椭圆工具和圆角矩形工具来绘制一个可爱而简单的机器人。这里不多描述这个机器人怎么画了。看图。

放上绘制成功的机器人组，ctrl鼠标点击云的缩略图，然后选中机器人的T添加图层蒙版。目的是把他藏在云后面。上面介绍了屏蔽方法，所以复习一下。

现在让我们我们画鸟和徽章。我们使用钢笔工具，画笔工具和水平文本工具。怎么样，有详细的绘制过程。

你可以用自己的画出来。

步骤4绘制开始列

混合模式为正叠加，透明度为4%黑色，全局光照角度为42，距离为3px，大小为0px。

然后在辅助线的帮助下，添加照片和素材，找自己的地图占据一席之地。

记得我们在上面画了同样的箭头吗？用同样的方法再画一个。使用矩形工具，然后在辅助线的帮助下，创建一个矩形形状的图层箭头，添加锚点工具和直接选择工具。

给他加个阴影。复制这一层得到一个箭头的副本。这里你可以隐藏图层箭头，设置颜色为#000，不透明度为5%。Ctrlt然后右键选择变形直径，稍作调整得到下图。

好了，现在显示隐藏层箭头，提到复制层上面。

使用水平文本工具创建一个——字符串。你可以对它进行栅栏和变形，以获得以下效果，并添加软阴影。(感受一)

最后，添加文本(一个小投)

现在用三个模块描述工作室提供的服务。在这一节中，我们使用awesome图标集为灰粉Abbas的WeGraphics和WAPP创建一个卷。2和WAPP卷。

记住:在这种情况下，导游填写图标和文字部分真的很有用。

添加三个点(一个好看的阴)将白影文字提高1px，如下图所示。

我们还创建了一个很好的菜单，就在下面的白色框中，应该清楚如何在这一点上实现这个菜单。我们添加了一个刚性和柔软的阴影箭头。

步骤5中间带

中间元素，我们的设计是在一个丰富的信息图表中引入的一个大的功能区，其中包含一个口号。为了实现这个功能区，我们将像往常一样创建五个自定义形状来使用钢笔工具。(再次提醒你，如果你是初学者，可以看《入门:Photoshop的笔工具，以了解如何使用该工具的更多信息).让让我们看看它是什么形状。我们需要画出来(注意:主形状和#798ea4是更深的)，我们会用#497287。

什么样的风格？嗯，我们申请了风格与前面的形状相同而且你可以看到下面(我们要用的图案是来自旧纸的WeGraphics图)。

对于两个小三角形，应用以下样式:

发起人加的口号。

第6步信息图

我们需要综合这个想法，在我们虚构的设计工作室的创作过程中加入一点信息图表。下面你可以看到压轴的结果(很明显，只是一个简单的例子，后面如何开发一个项目，可以描述一个创作过)。

开始设计两个圆(按住Shift键画一个正圆，颜色#3d3d3)。设置左边的形状，填充0%；合适的形状，设置混合模式为强光，填充35%。添加一个样式，如下图(图案叠加在左边形状上的形状，除了是一样)。

需要注意的是，左边的圆圈使用了一个自定义的图案，我们可以使用与步骤2相同的技术来创建这个图案。

使用椭圆工具(白色小圆一次，然后复制重复使)和线条工具(权重:3px，颜色#FFFFF)设计左边的绘图。组合所有创建的形状和线条，复制组合，将它们转换为智能对象，然后栅格化它们。现在，你可以添加样式到这一层。

用钢笔工具画一些标签(用鲜艳的颜色:#d82f4c，#edcd59，4d85a2#598b)，然后命名。使用水平文本工具，你可以对标签和文本应用柔和的阴影。

在正确的圆里等三个圆，填充设置为20%，添加文字(可以申请软阴影的字)，如图。

现在，我们必须隐藏设计和发展与创新零件之外的边界。正如我们已经看到的，我们将使用图层蒙版。

按Ctrl键，在图层面板中单击创意圆的形状，然后选择将扩展值修改为3像素。

按Ctrl+Shift+I反转选择，然后命名图层蒙版的形状设计。

重复上述操作，创建一个新的选择，并扩大它如图所示。当您需要添加矢量蒙版时，可以使用CtrlShift单击。缩略图从两个或更多的选择，通过点击设计和创意形状，在这种情况下，我们创造了选择。

按Ctrl+Shift+I反转选择，然后命名图层蒙版的形状发展与创新。

应用三圈软阴影，得到以下结果。

画一个新的循环。

设置填充为0%，并添加一个白色的中风(大小3P)。

转换为智能对象，栅格化，并添加阴影(相同的阴影地图第三).最后，完成其他线条和标签的添加，如下图信息图所示。

第七步底部

您可以用同样的复制本教程中的步骤4。

第8步版权

添加底部版权文本。

好吧！所有的步骤都结束了。希望这篇教程可以帮助你了解页面布局的方法。你可以用这些方法来设计网络布局和提高你的技能。

今天，我将介绍如何创建一个干净的网络布局和一个美丽的背景。切入正题，让让我们开门见山吧。有兴趣可以打开PS照着做。

要开始设置的文件

打开一个新文档:整体尺寸为12001640像素，分辨率为72像素/英寸。

我们需要创建一个基本的背景层。只需在草稿上勾画出总体布局和结构，就可以看到页面的最终原型，但是

在设计过程中，我们可能会添加新的元素。

正如您从草稿中看到的，我们将创建5个列，在其中添加内容。

添加开始层，这将是我们的背景，颜色#eded。

在页面顶部画一个矩形，命名为top1(用矩形栅格化的图层(颜色#eded)，添加噪点(滤镜噪点添加噪点0.5–0.8；高斯分布和单)。再次绘制矩形，颜色#cdc)，将形状栅格化并添加噪点(滤镜噪点添加噪点0.5–0.8；高斯分布和单)。添加一个渐变叠加(柔光，54%，90%从黑到白，角度和缩放75)。

接下来添加一个矩形)，中间新建一个矩形(颜色#608bb6，高度400像素)，混合模式设置为颜色加深填充75%，然后添加1像素的白色描边(图层样)。

最后，添加一个矩形形状到底部页脚，使用相同的工具和颜色，但现在设置混合线性光的不透明度为70%。

最终结果如下。

第2步–背景

给我们的背景添加纹理。

添加一个新层(CTRSHIFT)并使用选框工具在画布顶部添加一个1像素的白线。(仔细看下图顶部的白线)

现在打开一个121像素的新文档，背景图层解锁隐藏。放大到3200%，添加一个新层，并使用矩形选框工具添加两个。一个11像素的正方形，填充#FFF，其他#000，如下图所示。然后选择菜单编辑定义模式。

我们做了一个新的图案效果即将使用(这也是制作图案的一)

回到我们的主文档。新建一个图层，用矩形选框工具画一个和整个画布一样大的选区，填充前景色，填充设置为0%，然后在图层样式中添加图案叠加。

现在它现在是画云的时候了！

可以拉出五条辅助线(如图，方法和菜单视图中新建参考线，分别在84px–186px–600px的位置输入1014px1118p)来划分工作区，然后使用椭圆工具添加一些形状，然后将这些形状图层全部选中并分组。

复制该组

并将复制的组变成智能对象(单击组，然后右键)，并添加噪波。

现在，你必须使用图层蒙版来隐藏超出部分的云(仔细看下面的方):Ctrl点击名为顶层(在“图层”面)，选择区域出现，然后单击选择添加了杂色云的图层。关键的一步是点击添加矢量蒙版。

[img]www.UISDC.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107//WinTemp/RichOle/}5E@RN[{WBM5L_1ma1$~9j5.jpg[/img]

[img]www.UISDC.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107//WinTemp/RichOle/}5E@RN[{WBM5L_1ma1$~9j5.jpg[/img]

[img]www.UISDC.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107//WinTemp/RichOle/}5E@RN[{WBM5L_1ma1$~9j5.jpg[/img]

[img]www.uiSDC.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107//WinTemp/RichOle/}5E@RN[{wbm5L_1MA1$~9J5.jpg[/img]

[img]www.UISDC.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107//WinTemp/RichOle/}5E@RN[{WBM5L_1ma1$~9j5.jpg[/img]

然后应用下面的样式。内阴影:混合模式选择和叠加，白色，透明度55%，全局光照角度120，距离5，大小0。

出现了云的白色投影。

现在，让我们让我们画一个美丽的云影。复制Yunna图层，首先清除图层样式，调整位置向右移动到比原始图层低，填充设置为0%，然后添加下面的样式。

梯度叠加，线性，正常混合模式，角度90。

如果成功出现，用同样的方法画他的云。

步骤3–顶部附件图纸

添加徽标。使用钢笔工具(颜色#79a7d)绘制下图，使用直线工具绘制两条白色线段。然后添加图层样式。

投影，混合模式为正叠加，透明度为46%，取消全局光照，调整角度为140，距离7px为0。描边，白色尺寸3px，内部位置，透明度55%，正常混合模式。当然

然后将同样的阴影应用到两条白线上。

我们将使用缩放、钢笔工具、椭圆工具和圆角矩形工具来绘制一个可爱而简单的机器人。这里不多描述这个机器人怎么画了。看图。

放上绘制成功的机器人组，ctrl鼠标点击云的缩略图，然后选中机器人的T添加图层蒙版。目的是把他藏在云后面。上面介绍了屏蔽方法，所以复习一下。

现在让我们我们画鸟和徽章。我们使用钢笔工具，画笔工具和水平文本工具。怎么样，有详细的绘制过程。

你可以用自己的画出来。

步骤4绘制开始列

混合模式为正叠加，透明度为4%黑色，全局光照角度为42，距离为3px，大小为0px。

然后在辅助线的帮助下，添加照片和素材，找自己的地图占据一席之地。

记得我们在上面画了同样的箭头吗？用同样的方法再画一个。使用矩形工具，然后在辅助线的帮助下，创建一个矩形形状的图层箭头，添加锚点工具和直接选择工具。

给他加个阴影。复制这一层得到一个箭头的副本。这里你可以隐藏图层箭头，设置颜色为#000，不透明度为5%。Ctrlt然后右键选择变形直径，稍作调整得到下图。

好了，现在显示隐藏层箭头，提到复制层上面。

使用水平文本工具创建一个——弦，可以对其进行栅栏和变形得到如下效果，并添加柔光阴影。(感受一)

最后，添加文本(一个小投)

现在用三个模块描述工作室提供的服务。在这一节中，我们使用awesome图标集为灰粉Abbas的WeGraphics和WAPP创建一个卷。2和WAPP卷。

记住:在这种情况下，导游填写图标和文字部分真的很有用。

添加三个点(一个好看的阴)将白影文字提高1px，如下图所示。

我们还创建了一个很好的菜单，就在下面的白色框中，应该清楚如何在这一点上实现这个菜单。我们添加了一个刚性和柔软的阴影箭头。

步骤5中间带

中间元素，我们的设计是在一个丰富的信息图表中引入的一个大的功能区，其中包含一个口号。为了实现这个功能区，我们将像往常一样创建五个自定义形状来使用钢笔工具。(再次提醒你，如果你是初学者，可以看《入门:Photoshop的笔工具，以了解如何使用该工具的更多信息).让让我们看看它是什么形状。我们需要画出来(注意:主形状和#798ea4是更深的)，我们会用#497287。

什么样的风格？嗯，我们申请了风格与前面的形状相同而且你可以看到下面(我们要用的图案是来自旧纸的WeGraphics图)。

对于两个小三角形，应用以下样式:

发起人加的口号。

第6步信息图

我们需要综合这个想法，在我们虚构的设计工作室的创作过程中加入一点信息图表。下面你可以看到压轴的结果(很明显，只是一个简单的例子，后面如何开发一个项目，可以描述一个创作过)。

开始设计两个圆(按住Shift键画一个正圆，颜色#3d3d3)。设置左边的形状，填充0%；合适的形状，设置混合模式为强光，填充35%。添加一个样式，如下图(图案叠加在左边形状上的形状，除了是一样)。

需要注意的是，左边的圆圈使用了一个自定义的图案，我们可以使用与步骤2相同的技术来创建这个图案。

使用椭圆工具(白色小圆一次，然后复制重复使)和线条工具(权重:3px，颜色#FFFFF)设计左边的绘图。组合所有创建的形状和线条，复制组合，将它们转换为智能对象，然后栅格化它们。现在，你可以添加样式到这一层。

用钢笔工具画一些标签(用亮色:#d82f4c，#edcd59，4d85a2#598b3)。，然后使用水平文本工具对其命名，您可以对标签和文本应用柔和的下拉阴影。

在正确的圆里等三个圆，填充设置为20%，添加文字(可以申请软阴影的字)，如图。

现在，我们必须隐藏设计和发展与创新零件之外的边界。正如我们已经看到的，我们将使用图层蒙版。

按Ctrl键，单击图层面板中创意圆形的形状，然后选择将扩展值修改为3像素。

按Ctrl+Shift+I反转选择，然后命名图层蒙版的形状设计。

重复上述操作，创建一个新的选择，并扩大它如图所示。当您需要从两个或更多选项中添加矢量蒙版缩略图时，您可以使用CtrlShift单击设计和创意形状，在这个例子中，我们创造了选择。

按Ctrl+Shift+I反转选择，然后命名图层蒙版的形状发展与创新。

应用三圈软阴影，得到以下结果。

画一个新的循环。

设置填充为0%，并添加一个白色的中风(大小3P)。

转换为智能对象，栅格化，并添加阴影(相同的阴影地图第三).最后，完成其他线条和标签的添加，如下图信息图所示。

第七步底部

您可以用同样的复制本教程中的步骤4。

第8步版权

添加底部版权文本。

好吧！所有的步骤都结束了。希望这篇教程可以帮助你了解页面布局的方法。你可以用这些方法来设计网络布局和提高你的技能。

了解更多ps网页布局设计实例教程视频(ps网页布局设计实例教程图)相关内容请关注东辰网。