设计一个Web2.0网页第一部分[翻译教程]

6月 19

本教程原创翻译自http://breakthenetwork.com/2010/12/31/design-a-web-2-0-layout/ 转载请注明出处

在这个教程中，我会一步一步为大家演示如何设计一个web2.0的网页。参照这个教程你只需要不到30分钟就可以完成，当然，你要对Photoshop有个差不多的了解。你可以在这里下载到用到的显示器图标。这是我为大家演示如何设计然后编写html/css来完成一个网页的两部分中的第一部分。

Step1

开始之前你需要先新建一个文档。这一步最重要就是宽度要设置在960像素，这是目前网站的一个标准，因为它几乎可以适应所有分辨率的屏幕。高度我们可以在后期根据需要来调整，所以我们现在选择1000像素左右就可以了。如果你感兴趣，你可以研究下960网格系统，它可以帮助你更好的控制你设计的网页。

现在，调出图层调板吧。在设计页面之前，我建议你把图层结构化分组。比如把图层分为header、content和footer三个组。这将帮助你有序的管理图层，避免在之后因为一大串图层而头疼。当然，你也可能需要建立一个navigation子图层组，或者其他一些组，只要其有助于保持页面整洁和可控。

Step2

现在我们已经准备好了，让我们开始创建页面吧。在页面头部我决定做一个宽度100%、高280像素的一个内容区。在页面顶部的30像素区域，我创建了一个导航条，颜色是#202020.这个黑灰色将会跟页面的蓝色和白色产生鲜明的对比。这对突出导航条特别重要。在导航条上，加上文字链接，文字大概14-18像素就可以了。对于当前页面的链接，我对文字颜色进行了加亮，然后在底部加了一个箭头。要创建这个箭头，首先要填充一个20×20像素的正方形，然后旋转45度形成一个菱形。然后使用矩形工具删掉下面一半使其形成一个三角形。

在导航条下方的250像素，我做了一个从#508dcc到#1d5085的淡蓝色线性渐变。做这个渐变，先在250像素的矩形区域填充任意颜色，然后在图层上点右键，然后选择图层属性。接着选择渐变叠加选项即可，具体可以参见这个图片。这个区域将会放置logo和口号，还有一个图标来吸引注意力。做好这些之后，你就可以思考如何设计logo了。

Step3

由于这个页面只是作演示用，所以我们得想一个公司名。作为一个web设计和开发公司，我给它取名为“End 2 End”。Logo非常简单，你只需要先设置笔刷为3-5像素直径的硬边缘，接下来选择矩形工具（不是矩形选框工具），设置120×150像素大小。画好矩形后，进入路径调板，在路径上点右键然后点击“描边路径”，选择“画笔”工具描边，然后单击确定，这样矩形框就做好了。最后一步把字母放进矩形即可，公司名字放矩形右边。

Step4

这一部分大概是本教程最棘手的部分，不过好消息是做起来其实不难。我选择了一个图标，缩小到原来的60%，然后放在头部的右侧。在头部下方，画了了一个高80像素的横条来放置显示器图标。稍后这个横条会放上社交网络按钮。现在，我们现在显示器图标下方，用透明度为10%的柔软笔刷画一个投影，来使显示器具有立体感。画好之后命名为glow然后放在显示器图层下方。在显示器下方，我用了较大的画笔用白色画了一个发光区域。最后把这层的混合模式改为叠加，这样就形成了一个淡蓝色的具有web2.0风格的头部。

头部的最后一部分就是加上口号。我想了一个口号“We make websites,and we do A Damn Good Job”然后放在头部发光的地方。我把口号的文字颜色改为白色以区别logo的颜色，然后把“We do A Damn Good Job ”字体加大然后环绕在显示器的左侧，这样比单行小字放置更加突出。到这里，头部就做完了，在这个教程结束之前，我们都不再动头部了。

Step5

在页面的主要内容部分，我决定做一个6/4分的的布局。这是因为这是主页，而且我想让用户对侧边栏的内容区和左侧的引导区域有同等的注意力。我的意思是，你愿不愿意用更多的空间来介绍你的网站和你的服务？无论如何，我们需要4个区域，一个欢迎引导段落，一个简讯订阅表单和一个“需要一个网站”“需要服务器”服务的广告边栏区。

在介绍引导区域，做一个漂亮的头部，最好是一个深蓝色的标题来契合主体的色调（我用了#1d5085）。把这个区域跟导航和logo对齐来保持页面的一致性，然后在下边放上一个小号但是要看得清楚的文字段落，颜色用#404040的深灰黑色。在下面放上一个“阅读更多”的文字链接，颜色最好用标题一样的蓝色。在这个链接下面画一个浅灰色的1像素的水平线来告诉浏览者这里将开始一个新的主题区域。具体的方法是用矩形选框工具在一个新的图层上进行，需要注意的是要选中固定大小，这样才可以指定1像素的高度。这个水平线我用了#D0D0D0的颜色来填充，1像素高，550像素宽。

用Photoshop制作表单是非常简单的。先用矩形工具画一个高30像素的矩形，用浅灰色#F3F3F3填充用1像素的#A0A0A0描边。在输入框名右边打上*标来表示此区域为必填。当你做好一个输入框之后，你可以将其编组，然后复制一份，放到你想要放置的地方，最后改下输入框的名字就完成了其他四个输入框。验证码我直接用了我的网站联系页面的截图。

注册按钮的制作稍稍有些复杂。首先你先把圆角矩形工具的半径设置为10像素，然后点击倒三角来设置大小为120像素宽、40像素高。然后开始画矩形，接着到路径面板按住ctrl然后单击路径来得到选区，得到选区后随意填充一种颜色然后调出图层属性。在线面我放了三个截图来说明都需要做哪些图层属性的调整。需要说明的是线性渐变的颜色是从#2c4c94到#457cc7。

注册按钮图层属性：

在按钮图层上方新建一个“shine”图层，现在用矩形选框工具选中按钮上半部然后用纯白填充。然后按住ctrl然后单击按钮图层，接着按ctrl+shift+i组合键进行反选。得到了反选的选区，回到shine层然后按下键盘上的delete键来删除掉按钮区域以外的像素。最后给shine层设置10%左右的透明度来使按钮有一点玻璃质感。最后一步是在shine层上面加上白色的Signup文本。祝贺你，你已经做好了你的web2.0按钮，现在把按钮图层编组以方便以后的修改。

Step6

现在在右侧区域我们用相同的方法来做一个宽350像素、高500像素的圆角矩形，用#F3F3F3填充，用1像素的#A0A0A0描边。在矩形内部我放了一个简单的标题，一个小图标，还有一个按钮的副本，我把按钮的文字改为Continue。当你做好了第一个右侧区域后，你只需要将其图层编组，然后创建一个副本放在下方，对图标和文字进行改动即可完成第二个区域。

Step7

最后在底部，你需要创建一个高100像素的区域然后用#202020填充，跟我们在顶部的导航样色一样。这有助于整体的色彩统一。在底部，你所要做的就是放上版权和使用协议，

Step8

现在到了收工的时间了。用一些社交网络的图标放置在显示器图标底部的横条上来做一个导航（图标来自Smashing Magazine）。这个部分非常简单，只需要缩放图标然后把它们一个挨一个的放在灰色横条上，然后在图标右侧打上相关的文字。唯一需要注意的是，图标的间距要统一，做完这一步，你就可以回过头来好好欣赏你制作的这个web2.0的页面了。