研习设订阅号
设计干货  杜绝注水
戳一下看视频版
 
我们每天都会浏览大量网页。现在，让我们回想一下，你印象最深的网页。在你浏览它们的时候，是不是只看到了网页中想要查找的信息呢。
这是因为，每一个网页设计师的首要任务，就是要把信息有效的传达出来。那是不是说，网页只需要有信息传达的功能，就足够了呢？显然，回答是否定的。那么接下来，我们就来看一下到底什么是网页设计呢？
乔布斯说：“设计，看中的不是感觉如何，而是他的功能性。”
那么什么是网页设计呢？其实，网页设计是由印象和功能，一起组成。
设计师通过图片，文字，色彩等元素，可以给用户展示出不同的印象。
我们通过他的字体、图片和颜色，一眼就可以看出来，这是一个面向儿童市场的网页。
而这个网站和前面是截然相反，通过文字图片和颜色，传递出一种专业，冷静的感觉。
那么网页的另一半，就是功能，通过编排文字和图片将信息，最有效的传递出来。这就需要，我们合理的编排信息，让它可以方便阅读，有的时候还要配合网站的动效展示信息。
这个网页，将枯燥的数字信息，通过编排，可以让用户快速的理解。
通过将信息，做成曲线图表的形式，这样就降低了用户的理解难度。
网页设计中，文字和图片信息的编排。有时，也需要考虑到动效的因素。
那么，说了这么多，网页设计师的职责到底是什么呢？
客户通常在项目上，会有很多的需求点。客户的这些需求，很多时候是混乱，甚至他们自己也不明白真正需求是什么。
所以，当客户直接面向目标人群，传递信息的时候。目标人群，更多的是懵逼的状态，完全不知道这个到底是什么。
所以这个时候，网页设计师就出现了。
在接收了客户的想法以后，将信息重新编排和整理。
这个时候传递给目标人群，他们就可以轻松的理解客户的信息了。
所以，网页设计师的职责就是，整理和展示信息的魅力，让网站便于使用。
在保证了印象和功能的前提下，将信息最有效的传递出来，让用户可以更容易的理解网站的信息。这个，也就是网页设计师职责。这个是不是和平面设计师，很相似呢？
现在，我们来看一下，网页设计师和平面设计师的区别是什么？
平面设计师，通常是在限定了尺寸的版面下，进行排版。而网页设计师，则需要根据不同的平台，在保持统一性的前提下，来变化尺寸和样式。
平面设计师，由于更多的是面向印刷，所以在设计时更多的采用，CMYK模式。而网页设计相反，多采用RGB的模式。
平面设计师，在设计的时候，不需要考虑动效的问题。而网页设计师，在设计的时候，更多时候需要考虑，文案和动效的相互搭配。
平面设计师，在一旦定稿了，交付印刷了以后，这个内容就没有办法继续更改了。而网页设计师，则需要在保持统一性的基础上，适应不同的信息，更改板式。
但是不论平面设计师还是网页设计师，版式设计都是一切的基础。
到这里，我们已经知道了，什么是网页设计，以及网页设计师的职责。接下来，我们再来看一下，一个网页，它的布局都有哪一些呢。
乐高玩具，好玩的点就在于，可以自己随意的创造出新的东西。网页的每一个板块其实就像是积木，可以模块化的进行调整，但是有顺序性的。
一个网页中，通常包含，页眉、全局导航栏、主栏、页脚，这四个部分组成。我们来看一些，网站案例，加深一下理解。
这是另一种，常见网页的组合形式。
二级网页的结构，通常是由全局导航栏，主栏，网站栏和页脚组成。
另一模式是，省略掉网站栏。
网页的浏览顺序，不同于平面类，它分为Z字形浏览顺序和F型浏览顺序。
网页的基本组成模块，我们已经了解到了，这些模块在设计的时候应该怎么做呢？接下来，我们分别来讲一下，每一个模块的功能和表现形式。
页眉网页的起始位置。通常是由标志、导航栏、社交媒体、照片和视频组成，并不是每一个导航栏都需要这些元素，它们是可以相互组合的。
这个是最简单的导航栏，通常是由两部分组成。
这个则是分为标志、全局导航栏、副导航栏三部分组成。
在这里的标志区域和文案部分结合。
这个导航栏则分为四个部分。
导航栏，不仅仅只是一溜长条，在网页中，还有将图片和导航栏结合的案例。我们继续将这个案例分解。分为图片，文案信息，设计媒体，导航栏和副导航栏这几个部分。
除了添加图片，现在更多网站选择放置视频，可以更好的吸引用户，传递项目属性。我们看一下它的结构，他是由视频、标志、文案信息、收放式全局导航栏、社交媒体组成。
通常情况下，是由版权声明、网页地图，相关的跳转链接，和一些其他的内容组成。他们同样也是不固定的，可以相互组合。
添加地图可以让用户更好的寻找到项目地址。
在页脚部分，设置服务导航栏，可以让客户方便的跳转链接。
添加社交媒体的模块，进一步的展示网站信息。
展示著作权，也是页脚不可或缺的内容。
快速的让用户查找到，上手容易是导航栏的要求。接下来，配合动效来理解一下。
在下滑网页的过程中，导航栏会随着下滑的位置弹出后，置顶在画面中，方便用户使用。
可收放式菜单，搭配动效，可以将更多的信息展示出来。
展开到整个画面的导航栏，可以不影响画面的简洁性的前提下，展示导航信息。
固定在左侧的导航栏，具有非常好的识别度。
单一的通过文字，有的时候，并不能有效的传递出信息，搭配了图标的菜单，可以进一步提升识别度。
将副导航栏，放置在导航栏的二级菜单中，可以提升用户使用的便利性。
现在，我们已经清楚了，网页中的页眉，页脚，全局导航栏的形式和功能。其实一个网页中，还有很多小的元素，它们同样是可以让用户更好的去接收和理解信息，但是我们却常常忽略它们。
首先来看一下，按钮和图标。它是为了引导用户进入或者返回页面而存在的。它的特点是易识别和反馈性。
线框按钮：鼠标碰触颜色会改变。
更多的应用案例。
这是带线框的按钮的第二种反馈模式。
带背景色的按钮，同样具有良好的反馈。
带图标的按钮，可以更好的让用户理解和明白，按钮的含义。
向上的箭头，在网页中一般作为返回页面顶部的导航按钮使用。
表格，在网页中将复杂的信息通过网格的形式，让用户可以一目了然的识别信息。它的特点是，易识别和规范性。
标题添加背景色，有效的区分出主次层级。
不同背景色的交替布置，让下级信息，可以区分。
字体加粗，用线段区分。
填写项目，它的作用是，可以快速指导用户填写信息，特点是便利性和功能性。
让必须填写的项目变得一目了然，并且在填写栏中展示填写的信息，让用户可以更加容易理解。
通过今天的学习，我们了解到了，一个网页设计师的职责，以及他与平面设计师之间的区别，同时告诉了大家，网页设计中页眉，页脚和全局导航栏的结构，以及它们的特点分别是什么。既要向用户传递出准确的信息，又能体现出网页的印象，也就是怎样做得又对又好，是网页设计师的职责，但是网页设计和平面设计，都是需要，一个良好的版式设计的基础上进行的，这个小伙伴们要明白。好的，今天的课程就到这里了，我们下期再见，拜拜~
往期精彩内容推荐
戳一下看视频
 
(K先生第十期版式训练营开始招生，请戳这里看完整的培训体系)

	

研习设订阅号
设计干货  杜绝注水
戳一下看视频版
 
我们每天都会浏览大量网页。现在，让我们回想一下，你印象最深的网页。在你浏览它们的时候，是不是只看到了网页中想要查找的信息呢。
这是因为，每一个网页设计师的首要任务，就是要把信息有效的传达出来。那是不是说，网页只需要有信息传达的功能，就足够了呢？显然，回答是否定的。那么接下来，我们就来看一下到底什么是网页设计呢？
乔布斯说：“设计，看中的不是感觉如何，而是他的功能性。”
那么什么是网页设计呢？其实，网页设计是由印象和功能，一起组成。
设计师通过图片，文字，色彩等元素，可以给用户展示出不同的印象。
我们通过他的字体、图片和颜色，一眼就可以看出来，这是一个面向儿童市场的网页。
而这个网站和前面是截然相反，通过文字图片和颜色，传递出一种专业，冷静的感觉。
那么网页的另一半，就是功能，通过编排文字和图片将信息，最有效的传递出来。这就需要，我们合理的编排信息，让它可以方便阅读，有的时候还要配合网站的动效展示信息。
这个网页，将枯燥的数字信息，通过编排，可以让用户快速的理解。
通过将信息，做成曲线图表的形式，这样就降低了用户的理解难度。
网页设计中，文字和图片信息的编排。有时，也需要考虑到动效的因素。
那么，说了这么多，网页设计师的职责到底是什么呢？
客户通常在项目上，会有很多的需求点。客户的这些需求，很多时候是混乱，甚至他们自己也不明白真正需求是什么。
所以，当客户直接面向目标人群，传递信息的时候。目标人群，更多的是懵逼的状态，完全不知道这个到底是什么。
所以这个时候，网页设计师就出现了。
在接收了客户的想法以后，将信息重新编排和整理。
这个时候传递给目标人群，他们就可以轻松的理解客户的信息了。
所以，网页设计师的职责就是，整理和展示信息的魅力，让网站便于使用。
在保证了印象和功能的前提下，将信息最有效的传递出来，让用户可以更容易的理解网站的信息。这个，也就是网页设计师职责。这个是不是和平面设计师，很相似呢？
现在，我们来看一下，网页设计师和平面设计师的区别是什么？
平面设计师，通常是在限定了尺寸的版面下，进行排版。而网页设计师，则需要根据不同的平台，在保持统一性的前提下，来变化尺寸和样式。
平面设计师，由于更多的是面向印刷，所以在设计时更多的采用，CMYK模式。而网页设计相反，多采用RGB的模式。
平面设计师，在设计的时候，不需要考虑动效的问题。而网页设计师，在设计的时候，更多时候需要考虑，文案和动效的相互搭配。
平面设计师，在一旦定稿了，交付印刷了以后，这个内容就没有办法继续更改了。而网页设计师，则需要在保持统一性的基础上，适应不同的信息，更改板式。
但是不论平面设计师还是网页设计师，版式设计都是一切的基础。
到这里，我们已经知道了，什么是网页设计，以及网页设计师的职责。接下来，我们再来看一下，一个网页，它的布局都有哪一些呢。
乐高玩具，好玩的点就在于，可以自己随意的创造出新的东西。网页的每一个板块其实就像是积木，可以模块化的进行调整，但是有顺序性的。
一个网页中，通常包含，页眉、全局导航栏、主栏、页脚，这四个部分组成。我们来看一些，网站案例，加深一下理解。
这是另一种，常见网页的组合形式。
二级网页的结构，通常是由全局导航栏，主栏，网站栏和页脚组成。
另一模式是，省略掉网站栏。
网页的浏览顺序，不同于平面类，它分为Z字形浏览顺序和F型浏览顺序。
网页的基本组成模块，我们已经了解到了，这些模块在设计的时候应该怎么做呢？接下来，我们分别来讲一下，每一个模块的功能和表现形式。
页眉网页的起始位置。通常是由标志、导航栏、社交媒体、照片和视频组成，并不是每一个导航栏都需要这些元素，它们是可以相互组合的。
这个是最简单的导航栏，通常是由两部分组成。
这个则是分为标志、全局导航栏、副导航栏三部分组成。
在这里的标志区域和文案部分结合。
这个导航栏则分为四个部分。
导航栏，不仅仅只是一溜长条，在网页中，还有将图片和导航栏结合的案例。我们继续将这个案例分解。分为图片，文案信息，设计媒体，导航栏和副导航栏这几个部分。
除了添加图片，现在更多网站选择放置视频，可以更好的吸引用户，传递项目属性。我们看一下它的结构，他是由视频、标志、文案信息、收放式全局导航栏、社交媒体组成。
通常情况下，是由版权声明、网页地图，相关的跳转链接，和一些其他的内容组成。他们同样也是不固定的，可以相互组合。
添加地图可以让用户更好的寻找到项目地址。
在页脚部分，设置服务导航栏，可以让客户方便的跳转链接。
添加社交媒体的模块，进一步的展示网站信息。
展示著作权，也是页脚不可或缺的内容。
快速的让用户查找到，上手容易是导航栏的要求。接下来，配合动效来理解一下。
在下滑网页的过程中，导航栏会随着下滑的位置弹出后，置顶在画面中，方便用户使用。
可收放式菜单，搭配动效，可以将更多的信息展示出来。
展开到整个画面的导航栏，可以不影响画面的简洁性的前提下，展示导航信息。
固定在左侧的导航栏，具有非常好的识别度。
单一的通过文字，有的时候，并不能有效的传递出信息，搭配了图标的菜单，可以进一步提升识别度。
将副导航栏，放置在导航栏的二级菜单中，可以提升用户使用的便利性。
现在，我们已经清楚了，网页中的页眉，页脚，全局导航栏的形式和功能。其实一个网页中，还有很多小的元素，它们同样是可以让用户更好的去接收和理解信息，但是我们却常常忽略它们。
首先来看一下，按钮和图标。它是为了引导用户进入或者返回页面而存在的。它的特点是易识别和反馈性。
线框按钮：鼠标碰触颜色会改变。
更多的应用案例。
这是带线框的按钮的第二种反馈模式。
带背景色的按钮，同样具有良好的反馈。
带图标的按钮，可以更好的让用户理解和明白，按钮的含义。
向上的箭头，在网页中一般作为返回页面顶部的导航按钮使用。
表格，在网页中将复杂的信息通过网格的形式，让用户可以一目了然的识别信息。它的特点是，易识别和规范性。
标题添加背景色，有效的区分出主次层级。
不同背景色的交替布置，让下级信息，可以区分。
字体加粗，用线段区分。
填写项目，它的作用是，可以快速指导用户填写信息，特点是便利性和功能性。
让必须填写的项目变得一目了然，并且在填写栏中展示填写的信息，让用户可以更加容易理解。
通过今天的学习，我们了解到了，一个网页设计师的职责，以及他与平面设计师之间的区别，同时告诉了大家，网页设计中页眉，页脚和全局导航栏的结构，以及它们的特点分别是什么。既要向用户传递出准确的信息，又能体现出网页的印象，也就是怎样做得又对又好，是网页设计师的职责，但是网页设计和平面设计，都是需要，一个良好的版式设计的基础上进行的，这个小伙伴们要明白。好的，今天的课程就到这里了，我们下期再见，拜拜~
往期精彩内容推荐
戳一下看视频
 
(K先生第十期版式训练营开始招生，请戳这里看完整的培训体系)

导读：这是一篇很详细的网页设计教程，用photoshop一步步设计与制作出一个精美的网站首页样稿，本文最值得推荐的是作者写出了自己的设计思路，相比其他一些网页设计教程来说不仅告诉你怎么做，更高速你怎么去想，也就是作者的设计流程。
难得国外有这样好的教程，我就用我仅有的英文水平翻译一下啦。建议将本博客的中栏和右栏隐藏后观看本文。
引言
你是否曾经想过设计一个漂亮的网页，但是却不知道怎样入手？说实话，几年前我也是这样。当我浏览网页的时候我看到这么多好看的网页，我就希望自己有技术创作这样的设计作品。
今天我可以这么做了，而且我将教你怎么做这样的设计！从根本上，对于这种设计你需要一点photoshop的操作技能和观察细节的能力。通过以下的教程，我将会指出其中极细微的细节之处，而这些细节讲使你的网页设计漂亮起来。打开photoshop,我们开始啦！
正文
先看效果图

第一步：下载960网格模板
我一直以来做的设计几乎全部是基于960网格模板的. 因此在我们开始创作之前，先下载这个模板. 你能在960.gs上找到这些模板. 下载之后解压zip里面关于PSD的模板. 你会发现有两种规格: 一个是12栏式的而另一个是16栏式的. 他们的区别就像名字所说的，一个是按12栏分布一个按16栏. 更详细的介绍一下吧, 如果你的设计里面分3个区块你就选择12栏式的,那是因为12能被3整除; 同理假如你的设计分四个区块, 你可以选12栏式或者16栏式，那时因为12和16都可以被4整除. 你会发现这个技巧将用于下面教程.
第二步：构造你想象的结构

在我们打开PSD网格模板创作前, 我们首先需要先构造一下想象中的结构. 从上面的这张图，你可以看出来：因为在一个排版中又有排版，所以这是一个有点复杂的结构.
第三步

构造了结构之后我们继续. 打开16栏式的PSD模板文件. 打开 “图像 >画布大小” . 把画布的宽度设置为 1200px 高度设置为 1700px .把背景色设置为 #ffffff 既白色.
第四步

用长方形工具在顶部画一个宽100%高大概80px的长方形. 用颜色： #dddddd 填充它.
第五步

在长方形那层上面创建一个新层. 按住CRTL键鼠标点击长方形层. 长方形就被选中了，然后把目标移至刚建的新层上. 选择半径 600px 的软笔刷（如图）, 把其颜色设置为白色, 然后就像图片所示那样在选框上边缘点几下. 通过这个技巧你画出了一个微妙的照亮效果. 你现在可以把这两层联合起来了.
第六步




建一个新层，再用长方形工具如图所示在上端画一个深灰色的小长方形.
第七步



在距离上端长方形500px处开始画一个宽 100% 高 575px 的长方形. 设置其由 #d2d2d0到 #ffffff 的渐变色, 角度为-90,缩放为100%
第八步

现在我们如第五步那样添加照亮效果. 这个技巧我们将很频繁地使用;因此下次用到的时候我只提示是第五步的效果 .
在当前层之上简历一个新层. Ctrl+鼠标点击这个大的长方形. 选择 600px的软笔刷, 设置颜色为白色，如图所示对选区的边缘点击多下.
第九步

创建一个新层画一个400px高的长方形. 这是用作我们网页页头的. 给它设置一个线性渐变，由颜色 #2787b7 to #258fcd.
以下展示颜色的微妙变化：




第十步

在页首长方形块底端画一条1px的灰蓝色的线, 混合属性中添加阴影效果. 阴影参数: 正底叠加, 透明度: 65%, 方向: -90, 距离: 1px ， 宽度: 6px. 之后再建一个新层，在灰蓝色线下面画一条1px的白线.通过这种方式，我们就可以创建一个轮廓鲜明的边缘. 可以说在你的设计中，你可以把这个技巧用于其他色块.
第十一步

创建一个新层,在画布顶端用“长方形”工具化一个50px高的长方形,就如图所示，这个长方形是用作导航的.

为其添加阴影效果.参数如图所示.
第十二步

开始话导航啦.使用“圆角工具” ，设置半径为5px,画一个圆角长方形，用颜色 #f6a836 填充它, 之后给他添加以下效果:
内阴影- 颜色: #ffffff, 混合模式:正底叠加, 透明度: 60%, 角度: 120*, 距离: 7px, 大小: 6px. 
内发光 - 混合模式: 正常, 颜色: #ffffff, 大小: 4px. 其他参数默认设置. 
描边 - 大小: 1px, 位置: 内部, 颜色: #ce7e01. 

Ctrl+鼠标点击层产生如图选区. 选择： 选择-> 修改 > 收缩 然后在弹出框中输入1px，确定.

在上面再建一层, 把混合模式设置成叠加 ,然后好像第五步那样加照亮效果,不过这次用的是小笔刷 . 然后就是增加导航文字了.我用 Arial 字体作为导航的连接字体, 所有效果设置为 “无”.
第十三步

现在我们开始创建搜索框, 圆角长方形，半径5px,在如第四步所示的网格的右边、顶端灰色背景网格纹中间创建一个用于搜索的色块. 为它增加以下样式:
内阴影：颜色: #000000,混合模式: 正片叠加, 透明度: 9%, 角度: 90*,距离: 0px, 大小: 6px
描边： 大小: 1px, 位置:内部, 颜色: #dfdfdf.

给它添加“search”的文本和一个亮底暗色的“GO”按钮.如下图所示：

到目前为止已经创建了很多层了，为了条例清楚，我们建立一个叫“search”的层文件夹. 把所有于搜索相关的层一并拖到这个层文件夹里面去. 迟点，我们都会这样处理，可以让我们的创作更合理.
第十四步

新建一个新层，然后就像画”搜索框”一样在这层上面画一个”Sign Up”按钮（字长刚好为背景长的一半）. 把这个组合放在搜索框下方条纹竖直方向中间.

再一次如第五步那样创建亮光效果.

使用更小的软笔刷.这次的笔触大小为45px.
第十五步

加了logo和网站描述之后，我们的网页就如上所示.
第十六步

现在我们回到层结构那里提早做一些工作.创建一个空的层文件夹并命名为”top_bar” .移动所有的图层到这个文件夹里面（包括logo,条纹,搜索框,注册按钮，导航和背景）.

创建另外一个空层文件夹并命名为”header”.这里用于放置头部图层 .如上图所示
第十七步

头部看起来有的平淡，因此我们可以再任意位置加相同的亮光效果. 选中蓝色的头部区域.在它上面创建一个新层并设置其混合样式为 叠加.

选一个大点的600px软笔刷,颜色为#ffffff白色。然后再导航下方点击几次。假如想更有层次感，你还可以把颜色调为黑色，然后在头部区底部重复同样操作。
第十八步

在这一步我介绍一下我是怎么实现头部图片的反光效果的。选择两张图片，我用了我自己另外做的两个网页模板图片，缩放其中一个然后把他放在比较大的那个的下方。复制这两层，用自由变换工具按住shift键等比例缩放一下，用长方形工具在上层的图片下端外部画一个选区，到选择->修改->羽化，填入30px或者大点羽化一下选框。（这里原教程说得不大清楚，我实现的方法是这样的：羽化之后选择反选，然后选取画笔工具，选白色，再在图片的左边角和右下角点击数下，然后用长方形选框和delete键修整边缘）

为了让两个图片更加突出，可以新建一层，设置该层模式为叠加，重复第五步的效果添加的操作。

在添加了一些按钮和漂亮的条纹之后，头部区域就是像上面那样子的。不要方剂把图层都放在’header’层文件夹里面。
第十九步

最终效果图里面你会看到在内容区域里面有很漂亮的切换页。为了创建这种切换页我们需要实现额外的一些操作，这是很有必要的。首先用圆角长方形工具创建一个高70px圆角半径为10px的图形（注意要画路径图），现在我们不要底部圆角的部分而为它郑家一个更好的角效果。用直接选取工具单击这个图形的路径，单击垂直点然后按住shift键往下拉直到如图所示状态.现在看起来不错了，但是还是比较简陋。然后…(把圆角变直角！？？？我汗，那还不如直接画个直角的长方形？)

如图创建了一个比较好的角（我汗）
第二十步

选择直线工具，设置大小为1px
第二十一步

按住shift键画灰色的分割线。
第二十二步

为每个切换标题添加小图标。我用了来自WebAppers.com的图标。通常一个切换标题激活了其他的就处于非激活状态了。为了清楚表达这一点，我们需要想个办法完成它。我降低其他图标的饱和度并且降低标题字眼和描述文字的透明度一保证激活的标题处于高亮状态。
第二十三部

为了使激活的按钮更加明显，我们将给它添加一个时尚的背景。为了达到这样的效果我们把整个对象选中然后裁切选区（按住alt画选区即可把不要的选区去掉）最终使选中的范围只有第一个按钮。

如上图所示即为所要达到的选区。

用一个更小的软笔刷，画出一个白色背景。
第二十四步

增加一个阴影：在切换菜单的后面如上图所示画一个深灰色的长方形。

点击图层区底部的小图标给该层增加一个蒙版。

把前景色设置为黑色，选一个大的软笔刷，在蒙版层上面点击（如图所示，蒙板上面出了白色之外的颜色都会遮挡图层）使部分黑色去掉。结果，我们创建了一个比较好看的阴影效果。

最后我们加点细节。在切换菜单下方画一个1px的灰线。然后如上一步一样用蒙版的方式使左右两端渐变。现在我们就得到一条比较时尚好看的线了。

现在切换菜单就像这样。
第二十五步

现在开始设计第一个切换按钮的内容。我们需要一个精准设计的图像（有好看的标题和一些文字内容）。首先我们得创建这个精准的图片。这里我认为我们最好打破这个图片尖锐的棱角设计，从而创造一个多彩的效果。因此我现在画一个白色有1像素灰色边框的长方形，再给它加上细微的阴影效果。

复制这一层并用变形工具稍微旋转。重复这个操作几次

把你选好的图片导进来，放在白色长方形上面。不用担心图片会溢出，我们会修整它。选中最上层的长方形，按选择->修改->收缩 ，输入5px,确认，然后在图层管理区下方点击添加图层蒙版，这样图片就只显示选区范围。

这就是你现在图层的状态。
第二十六步

不要忘记整理图层，这里新建图层夹把图层归类。

增加一个漂亮的标题、一些文本和列表，我们的设计工作又完成一部分。现在继续下一步吧。

再组织一下图层。
第二十七步: 感谢信

我认为这一个部分要比较大的，因此我把范围限定在主区域上的一个大的盒子里面。首先创建一个大的淡灰色的大概高220像素的长方形。设置其有1像素的灰色边。

然后再画一个上下左右都比它小10像素的另一个长方形。同样设置其1像素的淡灰色边框。

最后写上文本就可以了。
第二十八步

终于要做页脚啦。画一个400像素高的、深黑色的长方形。
第二十九步

如第五步一样给它加亮光效果。
第三十步

下来，如图所示，在区域上方画一个10像素高的长方形，并且通过在顶端和底部各多加两条线增强细节处理。
第三十一步

创建低端部分用于放置重复的导航。你可以拷贝顶端放置导航的长方形，移动并变形使其40像素高。把它放到你画布的最低端。你要注意你可能要扩张你的画布使所有东西都有适合的位置。制约扩张画布的操作你可以这样：图像->画布大小 设置即可。
第三十二步

再次强化细节。给页脚的导航区顶端加一条白色边，这样有比较好的边框效果。
第三十三步

给页脚增加内容，你可以依据网格合理安置它们。
第三十四步

然后就是把页脚相关的图层整合起来。
最终设计






做到这里，我们的设计就完成了。（这里做的设计作者改了一下之后放在ThemeForest.net上卖了）
最后总结
我希望你喜欢本教程并且从中或多或少学到点知识。现在是你创作的时候了。记住，只要你注重于细节，你就会创造出漂亮的网页设计，尽管你photoshop只会那么两三个工具。现在你有设计的冲动没？
转载请注明：
译者：Joe 
译文来源：http://xiebiji.com/2009/09/design_a_beautiful_website/ 
原文来自：Design a Beautiful Website From Scratch

	

网页怎么制作？在形形色色的各种网站中，如果想快速吸引到访客的目光，网页需要精心设计才行。在不懂设计知识的情况下，你也能制作出好看个性的网站哦！下面就来看看制作网页完整步骤吧。
第一步：建站系统选择
不懂技术和设计的情况下，你就需要用到自助建站系统了，需要找专业的网页制作公司的模板，这样可以让你零基础做出一个比较美观的网站。比如「上线了」sxl.cn建站系统，后台都是可视化操作，模板设计感强，简洁典雅，做出来的网站效果也非常好。本展示页所提供的模板及元素仅供展示功能效果，未经授权不得应用于其他用途  
第二步：头图设计
访客打开你的网站后，浏览顺序一般是从上至下……因此，若想快速吸引访问者注意力，就一定要重视头图banner！让客户感受到视觉上的美观和愉悦，而不是看了你网站一眼就迅速关掉。头图一定要要足够显眼、吸睛。在头图Banner部分可以用一两句话简洁地介绍下品牌，让客户一眼明白你是干什么的，千万不要太啰嗦，免得浪费客户时间。上线了建站案例，禁止转载  
第三步：详细信息展示
在标题头图之下，一般是企业简介、重要产品展示、团队成员、详细业务介绍、媒体报道等，网站靠后部分则是留言表单、联系方式。中间可以根据需求添加商城、博客等版块。这样的版块排列顺序比较有逻辑，便于客户理解。如何制作网页，添加这样的功能呢？在上线了网站编辑器点击左侧【添加新版块】，可以添加各种功能——商城、博客、定价表、相册、产品展示、大尺寸媒体、留言表单、横向布局、纵向布局等。版块的布局、顺序均可调整，版块内的文字内容、图片也可随时更改。一个网页就是由不同的版块组成的。
第四步：加强客户联系
网站是从互联网引流的好渠道，你可以在网站底部添加自己的社交媒体平台按钮，吸引客户关注你，进而为自己积攒私域流量。上线了建站案例，禁止转载
第五步：发布上线
在网站后台的“设置”里你可以设置网站域名、标题、logo等等。全部做好并预览无误后点击左下角的“上线”，就成功发布自己的网站了。这就是怎么制作网页的简单流程了，只需这5步，不需要懂任何技术，就能拥有一个自己的网站哦~快来用上线了试试吧。
点击下方“阅读原文”，用「上线了」制作一个自己的网站试试吧！(电脑端操作更方便哦)
「上线了sxl.cn」是一个专注自助建站与小程序开发的SaaS平台，针对众多行业提供多套小程序模板，目前已经帮助三百多万没有技术和设计基础的用户，通过上线了一键生成网站或小程序，快速建立品牌、获取客户、经营生意。2019年8月入选腾讯SaaS加速器首期成员。推荐阅读适合小型工作室的5个创业项目 网页设计案例｜定价表版块用法 微信团购小程序怎么做？