photoshop网页设计(ps网页设计与制作模板)-东辰网

photoshop网页设计(ps网页设计与制作模板)

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

作者:匿名来源:作者:luycas本教程主要是利用Photoshop设计一个简单风格的网页模板，并详细介绍了如何用960网格系统设计一个网站界面。网格系统将优化网站设计过程。让让我们一起学习。

最终效果预览

1.创建新文档

参数:宽度1680px，高度1100px，亮灰色背景(#F9F9F)。

2.添加网格

网上有很多网格系统可供下载，是我们构建自己的网格系统的最好参考。如果你还没有以前没有使用过网格系统，本文是一个简单的介绍。它让你的工作变得简单有章可循，是原型排版最有效的助手。

下载960网格系统

下载后，请到模板和文件夹，用photoshop打开一个960像素宽、12列的网格。

接下来，我们将网格导入到我们的工作文档中。选择12列光栅图层组，展平图层组，复制粘贴到工作文档中。

现在我们需要参考坐标。基准网格是选择元素空白值和行高值的重要参考。首先新建一个宽度为24px的文件，删除背景，新建一个高度为1px的单行，放在画布底部。定义模式:编辑定义模式，并给它一个容易记住的名字。

返回工作文档，新建一层，填充图案:编辑填充，用刚刚定义的图案填充。

最后，我们将用参考线标记我们的工作区域。新参考线:视图新参考线，选择垂直，在360像素、840像素和1320像素处创建新参考线。

开始设计

现在网格系统已经建立，可以开始设计了。我们将整个网站分为五大部分:

1.页眉

2.说明

3.内容区域左侧

4.内容区域右侧

5.页脚

添加页眉

我们习惯了自顶向下的设计。选择矩形选区工具，在画布的宽度上画一个高度为120像素的矩形选区。打开标尺工具可以保证绘图的准确性。120px的高度刚好占据了五个垂直网格，然后用深灰色(#2C2C2)填充。这个页眉主要用来放置logo和导航栏。

插入你的标志

添加导航

在导航栏中，我们采用了基于文本的列表形式，可以营造出干净整洁的视觉效果。选择18ptArial来书写导航栏文本，使用白色家庭与娱乐，其他文字使用亮灰色(#BBBBB)。调整页眉中所有元素的垂直居中对齐。

7.添加插图区域

因为他，我把这部分叫做插图区。命名的目的——他显示标题的主要信息。重复表头绘制一个高度为240px的矩形选区，然后填充与logo一致的亮蓝色(#ADC7D)。让添加渐变填充，混合模式覆盖和30%的不透明度。

8.创建插图区域的背景

这家公司叫做蓝色网格。为了突出主题，我们创建一个网格背景。使用与前面相同的方法创建基准网格。新文件的宽度和高度都是25px。删除北京，在画布的底部和右边缘画一条1px单线，然后定义图案。

9.添加插图区域的背景

在所有图层之上新建一个图层，编辑填充，用新定义的图案填充。

旋转15度，应用白色叠加。创建一个新的空白层，结合白色网格层，并命名为网格。

选择柔光在混合模式下，按住Ctrl键单击插图区域的背景层获得选区，ctrlShiftI将反转选区并删除多余的网格。

参考线如下所示，下一个任务是确保网格插图区域中的图层宽度在960像素以内。

选择渐变工具，设置颜色从黑色到透明。我们将使用这个渐变来隐藏超过960像素宽度的部分。

确保渐变类型是线性梯度，并沿着960px最左边的引导线拖动鼠标，直到中间的引导线停止，右边也一样。

10.在插图区域添加文本

插图区放了一整页的插图，我们会以纯文字的展示。文字大小45pt，Arial，写好的宣传口号。然后用17pt在下面写一些介绍性的文字。最后，将文字像Logo一样靠左对齐。

11.添加滑动显示

显示参考线，使用矩形工具在右边两条参考线之间创建选区，高度为8个网格(即140)，然后上下各减去一个像素，做一个投影。

为滑动展区添加投影，颜色#2C2C2C，距离1px，大小10px。

接下来，我们需要在滑动显示区域放置一些临时替换内容。

这里我拍了一张我博客的截图。设置图片大小与滑动显示区域的背景图片一致，选择编辑缩小，10px，取消选择后删除多余区域。

12.内容部分

使用矩形选择工具选择插图区域下面的部分，然后选择渐变工具，将颜色设置为#F0F0F0到透明，向下拖动完成渐变。注意不要拖得太远，确保页面底部的颜色信息在#F9F9F9左右。

13.左侧内容区域

普通文本样式:Arial18pt#9C9C9C

带下划线的链接样式:#A3BBCC

添加说明性文本

14.添加服务列表

首先，给列表添加一个标题。文本样式为Arial25ptbold#262626。

列表内容的文本样式:Arial18pt#9C9C9C.

可以用椭圆工具在列表前面画点，也可以用快捷键Alt7添加和更改颜色(#A4BCC)。

最后，将所有内容与网格对齐。

重复此过程，并添加其他内容。

15.右侧内容区域

右边的内容区域用于显示最近新闻的亮点。

首先，在列表中添加一个标题，文本样式为Arial25ptbold#262626，然后将其水平对齐左侧内容区的标题。

接下来，使用文本样式Arial18pt#A4BDCD向新闻添加一个标题，然后将其与左侧内容区域中的文本对齐。

新闻列表的文本样式:Arial16pt#9C9C9C。

用同样的风格再做两条新闻。

16.页脚

我们的最后一部分是页脚，用于放置一个登录框，联系信息和一些链接。

使用矩形选区工具创建一个选区，并填充深灰色(#26262)。

让让我们添加表单。首先，创建一个文本样式为Arial20ptBold(#FFFFF)的标题，并将其放在页脚的左侧。然后使用矩形选择工具创建两个选择区域作为输入框，并填充白色。输入框的默认文本样式是Arial16pt#9c9c9。

用圆角矩形绘制提交按钮，然后添加内阴影。不透明度改为305，大小和延伸都是0，距离是10px。添加忘记密码链接，样式:Arial13pt下划线#A4BDCD。

17.页脚的右半部分

最后，让请填写联系信息。添加标题。文本样式为Arial20ptB粗体(#FFFF)，并与左侧的表单标题水平对齐。然后添加，文字样式:Arial16pt#FFFFFF。

18.检查布局和平衡

使用网格和参考线检查元素是否对齐和一致。

如果没有，请及时调整。

19.加油，你已经完成了。

It值得庆祝的是，你对如何使用网格系统来布局网站有了一点了解，你可以定制自己的基本系统。

强烈建议你多使用这个系统达到熟练程度，让它成为你的第二感觉。使用这个系统将使你作为设计师的工作更容易。

点击下载这篇文章的PSD源文件。