用ps设计网页(ps设计网页教程)

本文主要介绍用ps设计网页(ps设计网页)，下面跟着东辰网详细了解一下吧。

作者:匿名源自:龙骑士博客。在本Photoshop教程中，我们将制作一个优秀、简洁、专业的网站布局。完成的网站布局可以应用于个人或团体网站。

让让我们看看即将完成的网页。

准备您的photoshop文档

1按照下图新建一个Photoshop文档(Ctrl/Cmd)。

设置单位和标尺

确保你使用像素作为单位，这是网页设计的标准衡量。从预选项的windows对话框中设置标尺(Ctrl/Cmd)；点击单位和标尺，确保你所有的设置都和下面一样。

向内容区域添加指南

3激活photoshop的标尺，按ctrl/CmdR修复标尺的可见性。你也可以打开信息窗口(快捷键:F)。通过选择工具，信息面板可以反馈无用的信息。按下M钥匙。选择矩形选择工具，在画布左上角画一个宽度为120px的小方框。您可以通过信息面板调整选择的大小。现在，从左侧开始，根据面板中显示的宽度，将参考线拖动到选区的右侧。

将所选内容移到画布的右边缘。将另一条参考线分配到所选内容的左侧。

你的画布应该像这样，:。

创建徽标

现在我们开始创作logo。logo的加入只是为了应用颜色渐变效果，所以很简单。新建一个组(图层新)，命名为LOGO。

选择水平排版工具并切换到打字粉碎(或者你的网站名)用大写字母。

双击打开“图层面板”对话框。选择图层渐变，点击渐变设置显示如下设置。

9移动粉碎图层距离顶部35px，距离左侧参考线0px。您可以使用带有箭头键的移动工具。复制文字图层(图层复制图)。将复制的文本移到粉碎把它改成Dzin:#b27625，右边是:#E5a)。

选择水平排版工具在logo下添加标语。

11最后，logo效果如图。激活/取消参考线，进入视图显示网格或使用快捷键Ctrl/Cmd。；

创建导航栏

12创建一个名为导航把它放在标志团体。从顶部标尺拖动一条参考线，直到它距离画布顶部150像素。选择矩形工具)，画一条宽度为4px的横线，颜色为#:#:#b2762)。选择水平排版工具)，选择文本，然后家庭与娱乐改变颜色#ffffff(白)。

创建一个联系我们选择权

新标题

现在让我们创建顶部区域，并创建一个名为标题和标题。

16选择矩形工具新建一个矩形，宽度和高度分别为1200px*440px。将这一行移动到矩形，导航栏1px命名为标题背景。双击标题背景图层，选择渐变图层样式增加渐变颜色(左:#2:#7a755)。如下图所示。

使用矩形工具创建一个新的矩形，大小为960像素*360像素。把它移到离顶部40px的地方标题背景层和0px远离左参考线。命名层标题容器和。

创建一个特色项目选择。

接下来，我们将开始创建特色项目选择区域。创建一个名为fp在标题组中。选择矩形工具)，从页眉容器的顶部和左侧创建一个大小为630px乘以340px，10px的地方。分配图层的颜色为#000000，命名为fp集装箱。

从你的ps导入一张图片，放在特。按Ctrl/CmdA，然后编辑复制(Ctrl/Cmd)。继续回到我们的网页设计。在fp集装箱层，单击Ctrl/CmdV粘贴您的特色项目的图片。将其重命名为fp形象与设计。右键单击fp形象与设计要选择的图层。电影只在矩形区域可见fp集装).如下所示调整您的图片。

20输入编辑变形角度(Ctrl/Cmd)。从选项栏中，单击旋转框，键入4并按两次以调整图层。继续选择图层(fp形象与设)并将图层样式设置为亮度。

现在让我们让我们开始为特域中的图片创建标题和描述。选择矩形工具创建一个矩形，大小为630像素乘以90像素，颜色为#161718。改变图层的不透明度为90%，命名为标题bgamp。如下放置图片。

创建一个630像素乘以1像素的矩形，命名为标题水平线和。把它放在内容的顶部，并命名为标题bgamp层。

根据以下内容设置矩形中的标题和描述。

标题设置:

描述设定:。

创建快速参考部分

在标题组中创建另一个组，命名为快速报价。选择椭圆形工具创建一个300像素乘340像素的新矩形。将这个矩形放置在特色项目选择区域10px，并将其命名为容器。

接下来，我们将复制我们之前制作的另一个图层的样式。进入导航组，右键点击悬停图层，选择复制图层样式，返回容器图层，右键点击，选择粘贴图层样式。

选择椭圆工具创建一个80px乘以35px的正方形，命名为提交btn。

双击图层打开图层样式对话框，选中左侧渐变叠加对话框。点按渐变编辑以如下更改颜色。

在工具面板中选择移动工具，并在选项栏中设置水平居中和垂直居中。

创建主要内容区域

创建一个新组，并命名为内容。选择椭圆形工具。创建一个300像素乘以175像素的新组，并将其命名为c01。将该层放置在头部下方30px处，距离左侧参考线0px处。双击图层，设置如下样式。

我们继续用内容填充这一层。选择文本工具添加文本关于砸。使用文章工具选择关于并将颜色更改为#b47825。选择粉碎并将颜色更改为#2f2f2f。添加简短描述和文本连接。请参考以下设置。

标题设置:

描述设定:。

连接设置:。

创建另一个大小为82px乘以82px的框，并将其放置在边界层的中心。将框的颜色更改为#d5d5d5。选择内容组中的所有图层，进入图层创建一个名为关于。

复制关于名为服务与营销。复制另一个名为投资组合。我们现在有三个小组关于，服务与营销和投资组).移动最后一组(投资组)到右边的参考线。

在面板中选择三个组，然后单击图层分布水平居中分布。点击查看大图。

更改服务与营销集团(中)和投资组合分组如下。

创建页脚

38新的组织被命名为页脚和。选择矩形工具)，在布局底部创建一个1200像素乘以100像素的矩形。说出它的名字页脚背景amp。复制图层样式标题背景分层并应用它。

选择文字工具，写下版权声明的文字，链接。样式为Arial，大小为12pt，颜色为灰色(#ddddd)。

我们开始给消息添加消息描述。我们在页脚和层，并命名为订阅。选择圆形椭圆工具创建一个85px乘以35px的矩形。该层被命名为订阅btn。

重复26个步骤添加表单和标签。

选择文本工具和拼写订阅Arial字体，加粗13pt。选择所有层(订阅btn和订阅文).

重复步骤28创建按钮。

44选择椭圆矩形工具并将半径设置为3px。创建一个210像素乘以35像素的椭圆矩形。使用白色作为主要颜色(#fffff)命名层电子邮件字段。

决赛成绩

最终结果已经完成，点击预览。

作者:匿名来源:龙骑士博客在这个Photoshop教程里，我们会做出一个优秀的、简洁的、专业的网站布局。完成的网站布局可以应用于个人或团体网站。

让让我们看看即将完成的网页。

准备您的photoshop文档

1按照下图新建一个Photoshop文档(Ctrl/Cmd)。

设置单位和标尺

确保你使用像素作为单位，这是网页设计的标准衡量。从预选项的windows对话框中设置标尺(Ctrl/Cmd)；点击单位和标尺，确保你所有的设置都和下面一样。

向内容区域添加指南

3激活photoshop的标尺，按ctrl/CmdR修复标尺的可见性。你也可以打开信息窗口(快捷键:F)。通过选择工具，信息面板可以反馈无用的信息。按下M钥匙。选择矩形选择工具，在画布左上角画一个宽度为120px的小方框。您可以通过信息面板调整选择的大小。现在，从左侧开始，根据面板中显示的宽度，将参考线拖动到选区的右侧。

将所选内容移到画布的右边缘。将另一条参考线分配到所选内容的左侧。

你的画布应该像这样，:。

创建徽标

现在我们开始创作logo。logo的加入只是为了应用颜色渐变效果，所以很简单。新建一个组(图层新)，命名为LOGO。

选择水平排版工具并切换到打字粉碎(或者你的网站名)用大写字母。

双击打开“图层面板”对话框。选择图层渐变，点击渐变设置显示如下设置。

9移动粉碎图层距离顶部35px，距离左侧参考线0px。您可以使用带有箭头键的移动工具。复制文字图层(图层复制图)。将复制的文本移到粉碎把它改成Dzin:#b27625，右边是:#E5a)。

选择水平排版工具在logo下添加标语。

11最后，logo效果如图。激活/取消参考线，进入视图显示网格或使用快捷键Ctrl/Cmd；

创建导航栏

创建一个名为导航把它放在标志团体。从顶部标尺拖移参数。测试这条线，直到它距离画布顶部150像素。选择矩形工具画一条宽度为4px的水平线，颜色为#:#:#b2762)。选择水平排版工具)，选择文本，然后家庭与娱乐改变颜色#ffffff(白)。

创建一个联系我们选择权

新标题

现在让我们创建顶部区域，并创建一个名为标题和标题。

16选择矩形工具新建一个矩形，宽度和高度分别为1200px*440px。将这一行移动到矩形，导航栏1px命名为标题背景。双击标题背景图层，选择渐变图层样式增加渐变颜色(左:#2:#7a755)。如下图所示。

使用矩形工具创建一个新的矩形，大小为960像素*360像素。把它移到离顶部40px的地方标题背景层和0px远离左参考线。命名层标题容器和。

创建一个特色项目选择。

接下来，我们将开始创建特色项目选择区域。创建一个名为fp在标题组中。选择矩形工具)，从页眉容器的顶部和左侧创建一个大小为630px乘以340px，10px的地方。分配图层的颜色为#000000，命名为fp集装箱。

从你的ps导入一张图片，放在特域。按Ctrl/CmdA，然后编辑复制(Ctrl/Cmd)。继续我们的网页设计。在fp集装箱层。单击编辑并粘贴(Ctrl/Cmd)来粘贴您的特色项目的图片。将其重命名为fp形象与设计。右键单击fp形象与设计层，并选择剪切蒙版。现在图片只在矩形区域可见fp集装).如下图所示调整您的图片。

20进入编辑变形角(CtRl/Cmd)。从选项栏中，单击微调框，键入4并按两次以调整图层。继续选择图层(fp形象与设)并将图层样式设置为亮度。

现在让我们让我们开始为特域中的图片创建标题和描述。选择矩形工具创建一个矩形，大小为630像素乘以90像素，颜色为#161718。改变图层的不透明度为90%，命名为标题bgamp。如下放置图片。

创建一个630像素乘以1像素的矩形，命名为标题水平线和。把它放在内容的顶部，并命名为标题bgamp层。

根据以下内容设置矩形中的标题和描述。

标题设置:

描述设定:。

创建快速参考部分

在标题组中创建另一个组，命名为快速报价。选择椭圆形工具创建一个300像素乘340像素的新矩形。将这个矩形放置在特色项目选择区域10px，并将其命名为容器。

接下来，我们将复制我们之前制作的另一个图层的样式。进入导航组，右键点击悬停图层，选择复制图层样式，返回容器图层，右键点击，选择粘贴图层样式。

选择椭圆工具创建一个80px乘以35px的正方形，命名为提交btn。

双击图层打开图层样式对话框，选中左侧渐变叠加对话框。点按渐变编辑以如下更改颜色。

在工具面板中选择移动工具，并在选项栏中设置水平居中和垂直居中。

创建主要内容区域

创建一个新组，并命名为内容。选择椭圆形工具。创建一个300像素乘以175像素的新组，并将其命名为c01。将该层放置在头部下方30px处，距离左侧参考线0px处。双击图层，设置如下样式。

我们继续用内容填充这一层。选择文本工具添加文本关于砸。使用文章工具选择关于并将颜色更改为#b47825。选择粉碎并将颜色更改为#2f2f2f。添加简短描述和文本连接。请参考以下设置。

标题设置:

描述设定:。

连接设置:

我们将在描述旁边添加一个额外的方块。选择矩形工具，颜色#ffffff，按住Shift键保持比例。画一个88px乘以88px的矩形。将矩形移动到距离左侧矩形0.10像素的位置C0)并将其命名为边界和。如下设置冲程::。

创建另一个大小为82px乘以82px的框，并将其放置在边界层的中心。将框的颜色更改为#d5d5d5。选择内容组中的所有图层，进入图层创建一个名为关于。

复制关于名为服务与营销。复制另一个名为投资组合。我们现在有三个小组关于，服务与营销和投资组).移动最后一组(投资组)到右边的参考线。

在面板中选择三个组，然后单击图层分布水平居中分布。点击查看大图。

更改服务与营销集团(中)和投资组合分组如下。

创建页脚

38新的组织被命名为页脚和。选择矩形工具)，在布局底部创建一个1200像素乘以100像素的矩形。说出它的名字页脚背景amp。复制图层样式标题背景分层并应用它。

选择文字工具，写下版权声明的文字，链接。样式为Arial，大小为12pt，颜色为灰色(#ddddd)。

我们开始给消息添加消息描述。我们在页脚和层，并命名为订阅。选择圆形椭圆工具创建一个85px乘以35px的矩形。该层被命名为订阅btn。

重复26个步骤添加表单和标签。

选择文本工具和拼写订阅Arial字体，加粗13pt。选择所有层(订阅btn和订阅文).

重复步骤28创建按钮。

44选择椭圆矩形工具并将半径设置为3px。创建一个210像素乘以35像素的椭圆矩形。使用白色作为主要颜色(#fffff)命名层电子邮件字段。

决赛成绩

最终结果已经完成，点击预览。

了解更多用ps设计网页(ps设计网页教)相关内容请关注东辰网。