怎么用ps制作网站首页效果图(ps网站首页制作)

本文主要介绍如何用ps制作主页效果图(ps主页)，下面跟着东辰网详细了解一下吧。

作者:Photoshop教程:清新优雅的网页布局。

预览:在这个网页设计教程中，你将学习如何设计一个优雅而专业的网页布局。我们将使用各种photoshop技巧，并依靠图形工具和图层样式等基本操作来实现这种布局。作为奖励，教程最后附上一个HTML/CSS/JavaScript的网站模板，完全免费下载。

网站模板点击下图查看网站模板。

素材矢量社区媒体图标(下)凌乱、自然的灰褐案(下)高清图案画笔(下)单声道图标(下)1。创建一个新文档，打开photoshop创建一个新的空白文档，大小为1020*1180px。

2.设置导航栏的背景选择矩形框选区工具创建一个选区，选区的宽度为整个画布的宽度，高度不要太高，然后填充深灰色(#39393)(cmd/ctrl)，如下图:

复制(cmd/ctrl)新创建的导航层，并添加一个噪声过滤器到它(过滤器噪声添加)，如下所示:

然后改变图层混合模式为覆盖并且透明度下降到大约23%。

3.创建网站的徽标/名称。4.添加菜单颜色(#DBD1B)以在菜单激活时编辑菜单，并在正常状态下使用菜单颜色(#abaaaa)。

为了使处于活动状态的菜单更加醒目，选择圆角矩形工具创建一个圆角矩形(圆角半径为5px，前景色为#46464)放置在菜单图层下，如下图所示:

，然后设置以下图层样式:

内心阴影/;中风和中风。;：

5.添加展区背景。在版面的头部，我们还需要添加一个作品展示区，以幻灯片的形式播放图片。每张图片都配有简单的介绍和导航。开始之前，选择矩形选框工具创建一个矩形，并填充颜色(#D3CAB)。

接下来，下载凌乱、自然的灰褐案(或其他图)并拖动到文档中，将它们放在矩形层的顶部。

接下来，我们需要覆盖一些不必要的纹理。在图层面板中选择一个矩形图层，按住cmd/ctrl键，单击缩略图创建自动选区，然后选择纹理图层并单击添加图层蒙版在下拉菜单中，从而覆盖除选择以外的所有区域。最后取消选区(ctr)，将纹理层的透明度降低到35%。

6.添加网站介绍为了让标题更炫，按照以下设置添加图层样式:

影子/;渐变叠加和。;：

接下来，创建一个圆形按钮关于我们。再次选择圆角矩形工具)，设置为一半。直径为X，文字颜色为#404040，右侧有一个箭头图标(单声道图标集中的circleright3)。调整其大小以匹配按钮。

将以下样式添加到矩形图层中:

外部发光/;梯度叠加：

最后一步是在按钮的右边添加一个图案。正是这种微妙的设计元素增加了设计的优雅。下载安装图案画笔(资源区)，先设置前景色为#343434，选择画笔工具)，找到图案画笔，在画布上点击一次，然后将图层混合模式改为强光。

7.创建一个幻灯片区域选择圆角矩形工具。前景色为白色，半径为X，在展区右侧生成一个圆角矩形。

设置这一层的透明度为15%，以显示背景图案，然后添加图层样式影子：

这时，我们需要在幻灯片区域添加一个图片缩略图。可以找一张网站截图或者其他图片，放在白色圆角矩形上方。我们必须把图片的四个角变成圆角。在图层面板上，按住cmd/ctrl，单击白色圆角矩形的缩略图创建自动选择，然后选择图片所在的图层，转到菜单选择修改收缩，缩小10px，然后执行cmd/ctrlshiftI反转选择，最后执行编辑清除。

接下来，添加图片说明。在“图层”面板中，按住cmd/ctrl，单击图片图层的缩略图，创建自动选区，创建新图层，并用黑色填充选区。然后使用圆角矩形选择工具选择新的黑色矩形的上半部分并删除它。

减少层的透明度为75%，并添加一个简单的文字说明。

8.在展区底部添加分隔线。像步骤2一样在展示区底部添加一条灰色的水平分隔线，不同的是添加了内心阴影：

It是时候设计主要内容区了！

9.向主要内容区域添加背景就像预览一样。主要内容区域分为三列。选择矩形框选择工具生成一个画布范围的选择，并用颜色填充(#FBF5:Photoshop教程:清新优雅的网页布局。

预览:在这个网页设计教程中，你将学习如何设计一个优雅而专业的网页布局。我们将使用各种photoshop技巧，并依靠图形工具和图层样式等基本操作来实现这种布局。作为奖励，教程最后附上一个HTML/CSS/JavaScript的网站模板，完全免费下载。

网站模板点击下图查看网站模板。

素材矢量社区媒体图标(下)凌乱、自然的灰褐案(下)高清图案画笔(下)单声道图标(下)1。创建一个新文档，打开photoshop创建一个新的空白文档，大小为1020*1180px。

2.设置导航栏的背景选择矩形框选区工具创建一个选区，选区的宽度为整个画布的宽度，高度不要太高，然后填充深灰色(#39393)(cmd/ctrl)，如下图:

复制(cmd/ctrl)新创建的导航层，并添加一个噪声过滤器到它(过滤器噪声添加)，如下所示:

然后改变图层混合模式为覆盖并且透明度下降到大约23%。

3.创建网站的徽标/名称。4.添加菜单颜色(#DBD1B)以在菜单激活时编辑菜单，并在正常状态下使用菜单颜色(#abaaaa)。

为了形成活动状态菜单更醒目。选择圆角矩形工具创建一个圆角矩形(圆角半径为5px，前景色为#46464)放在菜单层下面，如下图所示:

，然后设置以下图层样式:

内心阴影/;中风和中风。;：

5.添加展区背景。在版面的头部，我们还需要添加一个作品展示区，以幻灯片的形式播放图片。每张图片都配有简单的介绍和导航。开始之前，选择矩形选框工具创建一个矩形，并填充颜色(#D3CAB)。

接下来，下载凌乱、自然的灰褐案(或其他图)并拖动到文档中，将它们放在矩形层的顶部。

接下来，我们需要覆盖一些不必要的纹理。在图层面板中选择一个矩形图层，按住cmd/ctrl键，单击缩略图创建自动选区，然后选择纹理图层并单击添加图层蒙版在下拉菜单中，从而覆盖除选择以外的所有区域。最后取消选区(ctr)，将纹理层透明度降低到35%。

6.添加网站介绍为了让标题更炫，按照以下设置添加图层样式:

影子/;渐变叠加和。;：

接下来，创建一个圆形按钮关于我们。再次选择圆角矩形工具)，设置半径为X，文本颜色为#404040，右边有一个箭头图标(单声道图标集中的circleright)，调整大小匹配按钮。

将以下样式添加到矩形图层中:

外部发光/;梯度叠加：

最后一步是在按钮的右边添加一个图案。正是这种微妙的设计元素增加了设计的优雅。下载安装图案画笔(资源区)，先设置前景色为#343434，选择画笔工具)，找到图案画笔，在画布上点击一次，然后将图层混合模式改为强光。

7.创建一个幻灯片区域选择圆角矩形工具。前景色为白色，半径为X，在展区右侧生成一个圆角矩形。

设置这一层的透明度为15%，以显示背景图案，然后添加图层样式影子：

这时，我们需要在幻灯片区域添加一个图片缩略图。可以找一张网站截图或者其他图片，放在白色圆角矩形上方。我们必须把图片的四个角变成圆角。在图层面板上，按住cmd/ctrl，单击白色圆角矩形的缩略图创建自动选择，然后选择图片所在的图层，转到菜单选择修改收缩，缩小10px，然后执行cmd/ctrlshiftI反转选择，最后执行编辑清除。

接下来，添加图片说明。在“图层”面板中，按住cmd/ctrl，单击图片图层的缩略图，创建自动选区，创建新图层，并用黑色填充选区。然后使用圆角矩形选框工具选择一个新的。建立黑色矩形的上部并删除它。

减少层的透明度为75%，并添加一个简单的文字说明。

8.在展区底部添加分隔线。像步骤2一样在展示区底部添加一条灰色的水平分隔线，不同的是添加了内心阴影：

It是时候设计主要内容区了！

9.向主要内容区域添加背景就像预览一样。主要内容区域分为三列。选择矩形框选择工具生成一个画布范围的选择，并用颜色填充(#FBF5E)。

主要内容区的设计其实挺简单的，但是要花点时间让人看出来很简单。我们将从左侧开始，放置服务列表。

10.添加列标题以便描边路径，设置前景色为文字色(#3232)，然后选择硬笔刷工具，大小为3px左右。然后打开路径面板(窗口路)并单击用画笔描绘道路在面板的底部。

让给曲线添加一点渐变，设置图层样式为渐变叠加和：

复制曲线图层，比原图层低4或5px，透明度降低到24%。

11.对于左栏中添加的内容，将标题颜色设置为深灰色(#3232)，将文本内容颜色设置为可读灰色(例如#2A2A2)。创建阅读更多按钮状关于我们。对于中间的线，我改变了颜色，一个纯灰色(#48484)用于激活状态下的颜色。

12.向中间列添加内容。

像左栏一样，添加一个标题和一个图标(另一个合适的图)。使用圆角矩形工具)，设置半径为3px，前景色为白色，生成一个小圆角矩形，在矩形下方添加一些文字和描述。

然后设置圆角矩形的图层样式:

外部光线与照明。;/;中风和中风。;：

然后，添加与圆角矩形中的描述相匹配的图片。

13.将内容添加到右栏14。设计简讯窗口。选择圆角矩形工具生成一个3px圆角矩形，设置杂色滤镜如步骤2。

15.添加页脚首先创建一个页脚，就像在页眉中创建导航一样，只是比导航栏高。

接下来，创建一些链接，选择圆角矩形框选区工具)，生成如下图的框选区，填充深灰色(#3232)，填充白色文字。

然后改变混合模式为弱光并将透明度降低到63%以突出背景色。重复此过程以创建其他链接。

最后，选择一些社交媒体图标添加到链接的顶部，选择网站徽标和版权放在页脚的右侧。

了解更多如何用ps制作主页效果图(ps主页制)相关内容请关注东辰网。