ps黑色风格网页模板在哪(ps黑色风格网页模板怎么做)

本文主要介绍ps黑色风格网页模板在哪里(如何制作ps黑色风格网页)，下面跟着东辰网详细了解一下吧。

在这个网页设计教程中，你将学习如何制作一个优雅而专业的网页，并且可以用于整个网站。我们会用到Photoshop软件中的一些基本工具，比如笔刷、图层等。而且本网页的HTML/CSS/JAVASCRIPT模板和资料都包含在教程的底部，大家可以下载学习或者使用。

让让我们先来预览一下本教程的最终效果:

教程开始:

开始步:新建一个文件，打开PS软件，点击文件创建命令或者CtrlN键新建一个文件，宽度设置为1020px，高度设置为1180px，背景默认为白色。单击确定。

第二步:创建导航背景我们将从页眉开始我们的设计，所以我们先用矩形选框工具在画布上新建一个矩形选框，如图所示，填充颜色#393939；

第三步:修改导航背景CtrlJ复制导航背景图层，激活背景图层的副本，点击滤镜杂色添加杂色。参数设置如下所示:

然后设置图层的混合模式为叠加，不透明度为23%；

第五步:添加导航链接的颜色。我用#DBD1BE做主动链接，用#ABAAAA做普通链接。

为了使活动链接更加突出，在它后面添加了一个矩形框。选择圆角矩形工具，设置半径为5px，前景色为#464646，然后在活动链接处添加矩形背景，如图:

给矩形背景图层添加内阴影和笔触效果，具体设置参数如下图所示:

第六步:给特域添加背景。在我们网页布局的顶部，需要有一个特域，通过播放幻灯片的向访问者展示网站的特色内容。

这个区域也可以包括网站介绍等。我们需要做的开始步是用矩形框选择工具选择这个区域，然后用颜色#D3CAB8填充矩形选区。

那么你需要下载

纹理图片，并将其放在特征区域图层的上面；

第七步:删除不需要的背景纹理。步骤6中的图片放入PS后，我们发现尺寸大于特域图层，所以我们需要覆盖不需要的区域。按住Ctrl键点击特色背景区域图层，PS会自动选择特域选择。

激活纹理图片层，点击下面的添加蒙版按钮，这样就可以覆盖那些不必要的区域，然后将图层的不透明度改为35%。

选择水平文本工具在特域添加文本，确保标题文本和正文在不同的图层。

您可以对页眉中的文本使用#FFFFFF颜色，对正文使用#2A2A2A颜色。

我们可以给标题文本添加一些样式:

第八步:创建关于我们选择圆角力矩的圆角按钮。形状工具，设置半径为5px，设置文字颜色为#404040。其他风格可以自己设定。这里我们还需要在素材图片中使用circleright32，CtrlT设置大小并移动到合适的位置。

将样式添加到圆形按钮层，使其更有趣:

第九步:添加一个漂亮的装饰元素。这方面的最后一步是添加一个漂亮的装饰元素来增加网页的整体感觉。使用下载的碎花笔刷，设置前景色为#343434，在合适的位置涂抹后，将图层的混合模式改为强光；

步骤10:在下面创建幻灯片区域，开始制作幻灯片区域。选择圆角矩形工具，设置半径为5px，前景色为#FFFFFF，在页面布局右侧添加一个大小合适的圆角矩形选择区域。

将这一层的填充改为15%，这样背景图案就可以透过这一层显示出来，然后添加阴影，如图:

步骤11:在幻灯片区域添加图片。我们需要在这里添加一个缩略图，选择一个合适的图片，并将其添加到幻灯片区域的顶部。在图层面板中选择缩略图图层，按住Ctrl并单击该图层。PS自动选择缩略图选择区域，执行SelectChangeShrink命令，设置参数10px，然后执行selectionShiftI，最后执行editingClear。

步骤12:添加显示缩略图的描述。通过在层的缩略图图像中按住Ctrl来单击缩略图层，以激活缩略图选择，创建一个新层并用颜色#000000填充它。然后使用矩形选框工具选择新层的顶部，按delete键删除。

将图层的不透明度更改为75%，最后选择水平文字工具，为该图层上方的图片添加描述性文字；

第十三步:在特征区域下方添加一个分离区域。特征区域的最后一步是在其下方添加一个水平分隔区域。方法和步骤2、3一样，然后给图层添加内阴影。

步骤14:在网页的主要区域添加背景色。正如您可能已经猜到的，主区域被设计为如图所示的三列。选择矩形框选区工具，在下面的空白区域新建一个大小合适的矩形选区，填充颜色为#FBF5EA。

设置前景色为#323232，然后选择一个合适的笔刷，设置直径为3px，新建一个图层，用笔刷画出路径。如下设置图层样式:

复制这层向下移动4px或5px，不透明度设置为24%左右。

第十六步:在左栏添加内容，标题文本设置为#323232，主文本颜色设置为#2A2A2A。(其他颜色也可)。使用与步骤8相同的方法添加阅读更多按钮。中间行文本颜色设置为#484848。

第17步:在中间列中添加中间列的内容，并创建与左列相同的标题文本。但你必须改变文字旁边的标志(你可以从材料中找到正确的图)

选择圆角矩形工具，设置半径为3px，前景色为#FFFFFF，制作圆角内容边框，添加一些文字和描述。

添加图层样式:

在图片匹配内容框中添加描述，然后完成。

步骤18:在右栏中添加内容。

右栏的样式和其他两栏基本相同，所以我们添加了相同的标题文字，并更改了适当标题文字的图片。

第十九步:添加带有联系人信息的widget，选择矩形框选择工具，设置半径为3px，画一个大小合适的矩形框，使用与第二步相同的步骤在矩形框中添加相同的样式，这样就可以设计出与导航栏相同的样式了。

然后使用圆角矩形工具添加一个圆角框作为邮箱地址的输入框，填充颜色为#FFFFFF。

至此，主体区域的内容全部完成，下面制作底部区域。

步骤20:添加底部区域的背景。底部背景的制作方法与第二步第三步相同。你需要把这个区域的高度设置的比导航区稍微高一点，这样可以放下更多的内容。

第21步:在底部添加内容。

下面，在底部加一个链接。用矩形选框工具创建一个矩形选区，用颜色#323232填充，然后将链接文本的颜色设置为#FFFFFF添加文本。

接下来，将图层的混合模式设置为柔光，不透明度降低到63%，重复上述步骤添加所需的链接。

最后要做的是在页脚导航顶部添加社交媒体的分享按钮，然后在页脚右侧添加网站logo和版权声明。(社交分享的图标在材料)

好了，所有步骤都完成了。

在这个网页设计教程中，你将学习如何制作一个优雅而专业的网页，并且可以用于整个网站。我们会用到Photoshop软件中的一些基本工具，比如笔刷、图层等。而且本网页的HTML/CSS/JAVASCRIPT模板和资料都包含在教程的底部，大家可以下载学习或者使用。

让让我们先来预览一下本教程的最终效果:

教程开始:

开始步:新建一个文件，打开PS软件，点击文件创建命令或者CtrlN键新建一个文件，宽度设置为1020px，高度设置为1180px，背景默认为白色。单击确定。

第二步:创建导航背景我们将从页眉开始我们的设计，所以我们先用矩形选框工具在画布上新建一个矩形选框，如图所示，填充颜色#393939；

第三步:修改导航背景CtrlJ复制导航背景图层，激活背景图层的副本，点击滤镜杂色添加杂色。参数设置如下所示:

然后设置图层的混合模式为叠加，不透明度为23%；

步骤5:添加导航链接。我使用#D作为活动链接的颜色。BD1BE，普通链接用的颜色是#ABAAAA。

为了使活动链接更加突出，在它后面添加了一个矩形框。选择圆角矩形工具，设置半径为5px，前景色为#464646，然后在活动链接处添加矩形背景，如图:

给矩形背景图层添加内阴影和笔触效果，具体设置参数如下图所示:

第六步:给特域添加背景。在我们网页布局的顶部，需要有一个特域，通过播放幻灯片的向访问者展示网站的特色内容。

这个区域也可以包括网站介绍等。我们需要做的开始步是用矩形框选择工具选择这个区域，然后用颜色#D3CAB8填充矩形选区。

那么你需要下载

纹理图片，并将其放在特征区域图层的上面；

第七步:删除不需要的背景纹理。步骤6中的图片放入PS后，我们发现尺寸大于特域图层，所以我们需要覆盖不需要的区域。按住Ctrl键点击特色背景区域图层，PS会自动选择特域选择。

激活纹理图片层，点击下面的添加蒙版按钮，这样就可以覆盖那些不必要的区域，然后将图层的不透明度改为35%。

选择水平文本工具在特域添加文本，确保标题文本和正文在不同的图层。

您可以对页眉中的文本使用#FFFFFF颜色，对正文使用#2A2A2A颜色。

我们可以给标题文本添加一些样式:

步骤8:创建关于我们圆角按钮，选择圆角矩形工具，半径设置为5px，文字颜色设置为#404040，其他样式可以自己设置。这里我们还需要在素材图片中使用circleright32，CtrlT来设置大小并移动到合适的位置。

将样式添加到圆形按钮层，使其更有趣:

第九步:添加一个漂亮的装饰元素。这方面的最后一步是添加一个漂亮的装饰元素来增加网页的整体感觉。使用下载的碎花笔刷，设置前景色为#343434，在合适的位置涂抹后，将图层的混合模式改为强光；

步骤10:在下面创建幻灯片区域，开始制作幻灯片区域。选择圆角矩形工具，设置半径为5px，前景色为#FFFFFF，在页面布局右侧添加一个大小合适的圆角矩形选择区域。

将这一层的填充改为15%，这样背景图案就可以透过这一层显示出来，然后添加阴影，如图:

步骤11:在幻灯片区域添加图片。我们需要在这里添加一个缩略图，选择一个合适的图片，并将其添加到幻灯片区域的顶部。在“图层”面板中选择缩略图图层，按住Ctrl并单击该图层。PS自动选择缩略图选择区域，执行SelectChangeShrink命令，设置参数10。Px，然后选择反向选择(CtrlShif)，最后编辑清除。

步骤12:添加显示缩略图的描述。通过在层的缩略图图像中按住Ctrl来单击缩略图层，以激活缩略图选择，创建一个新层并用颜色#000000填充它。然后使用矩形选框工具选择新层的顶部，按delete键删除。

将图层的不透明度更改为75%，最后选择水平文字工具，为该图层上方的图片添加描述性文字；

第十三步:在特征区域下方添加一个分离区域。特征区域的最后一步是在其下方添加一个水平分隔区域。方法和步骤2、3一样，然后给图层添加内阴影。

步骤14:在网页的主要区域添加背景色。正如您可能已经猜到的，主区域被设计为如图所示的三列。选择矩形框选区工具，在下面的空白区域新建一个大小合适的矩形选区，填充颜色为#FBF5EA。

设置前景色为#323232，然后选择一个合适的笔刷，设置直径为3px，新建一个图层，用笔刷画出路径。如下设置图层样式:

复制这层向下移动4px或5px，不透明度设置为24%左右。

第十六步:在左栏添加内容，标题文本设置为#323232，主文本颜色设置为#2A2A2A。(其他颜色也可)。使用与步骤8相同的方法添加阅读更多按钮。中间行文本颜色设置为#484848。

第十七步:在中间栏中添加中间栏的内容，创建与左栏相同的标题文字，但必须更改文字旁边的logo(可以从素材中找到合适的图)。

选择圆角矩形工具，设置半径为3px，前景色为#FFFFFF，制作圆角内容边框，添加一些文字和描述。

添加图层样式:

在图片匹配内容框中添加描述，然后完成。

步骤18:在右栏中添加内容。

右栏的样式和其他两栏基本相同，所以我们添加了相同的标题文字，并更改了适当标题文字的图片。

第十九步:添加带有联系人信息的widget，选择矩形框选择工具，设置半径为3px，画一个大小合适的矩形框，使用与第二步相同的步骤在矩形框中添加相同的样式，这样就可以设计出与导航栏相同的样式了。

然后使用圆角矩形工具添加一个圆角框作为邮箱地址的输入框，填充颜色为#FFFFFF。

至此，主体区域的内容全部完成，下面制作底部区域。

步骤20:添加底部区域的背景。底部背景的制作方法与第二步第三步相同。你需要把这个区域的高度设置的比导航区稍微高一点，这样可以放下更多的内容。

第21步:在底部添加内容。

下面，在底部加一个链接。使用矩形选框工具创建一个矩形选区，并用颜色填充。是#323232，然后将链接文本的颜色设置为#FFFFFF来添加文本。

接下来，将图层的混合模式设置为柔光，不透明度降低到63%，重复上述步骤添加所需的链接。

最后要做的是在页脚导航顶部添加社交媒体的分享按钮，然后在页脚右侧添加网站logo和版权声明。(社交分享的图标在材料)

好了，所有步骤都完成了。

了解更多ps黑色风格网页模板在哪里(如何制作ps黑色风格网页模)相关内容请关注东辰网。