简洁优雅，这是一个面向新手的基础网页设计教程，，还未设计过网页的你，不妨马上开始，尝试设计自己的第一个网页吧。熟练的同学也可以快速过一遍练练手。
这就是原教程最终设计好的网页。
然后，我在跟着做的时候，将所有文字换成了中文，就成了下面这样，看上去好像是真有这么一回事的感觉~
哈，大家也可以试试哦，下面是教程：
本教程将通过一个“感恩日志”的概念项目，带大家一步步设计一个优雅(高大上)的网站首页。手把手从零开始，只需装好Photoshop软件就可以了。一些设计时会用到的基础技术(插件、工具等)文中也会提到。好了，我们马上开始吧!
教程资源
在后面的步骤里你需要用到以下的资源(本文附件里有前四项+PSD源文件)：
Chillin’ in the sun 照片
PT Serif 字体
Playfair Dislay 字体
Source Sans Pro 字体
User Inter Faces 用户头像图片
准备
Step 1
首先，在Photoshop上新建一个文档(文件>新建…)，按照下图的选项设置好。(设计过程中你随时可以修改画布大小。)
Step 2
设置一些参考线，布局好把握一些，可以确保网页元素整齐，不会太过于凌乱，以及通过参考线定义网站元素的尺寸。在菜单栏 视图>新建参考线 即可以设置参考线(或者可以通过 视图>显示标尺，在标尺上用鼠标拉出参考线，看不到参考线的话按Ctrl+;显示)。我通常会选择1000px作为网站的宽度，以此为标准添加对应参考线，留出内容区域外的空间让网页设计时不至于太过紧密，有足够的呼吸空间。(作者一直强调这种感官感受，建议鼻子深吸一口气感受一下～)
设置的参考线：200px, 500px, 700px, 900px以及1200px处的垂直参考线。
提示：可以使用神器 GuideGuide 插件哦，设置参考线更加快捷。
Step 3
作为设计师使用Photoshop的基本素养，图层分组管理是很重要的，方便浏览和修改。我们建三个图层组，命名为：Header，Content和Footer(头部、内容、底部，一般Header，Footer通用英文说法)。创建分组可以通过菜单栏：图层>新建>组…填上上述的组名称。也可以点击 图层面板 底部的文件夹图标快捷创建分组。
设计头部区域
Header，或者叫做“网页头部”，他是网页中最明显的部分，在网页中起到吸引用户、留住用户的重要作用。为了表达感恩的主题，将在首页顶部使用一张两人坐在长椅上的照片，其中一个人抬起手，可以看出很愉快的心情。
Step 1
创建网页背景，在“Header”分组里使用矩形工具(快捷键U)添加一个黑色#000000的矩形形状，大小为1400x728px。
现在把下载的照片素材拖动到Photoshop软件里(或者使用 文件>置入…)，照片放在矩形图层的上一层。命一下名：IMG。然后使用快捷键Ctrl+Alt+G(或者右键此图层>创建剪贴蒙版)，创建一个剪贴蒙版。最后将IMG图层的不透明度减少为70%，让上面的文字可读性更强(照片素材融入背景成深色)。
Ctrl+T，修改照片到合适大小。
提示：按住Shift键可以按比例缩放大小。
Step 2
接着来为网页创建一个导航。
创建新分组：Navigation，拖动到“Header”分组里面。然后使用矩形工具(U)画一个白色矩形，宽度让对齐到左边第一条垂直参考线和右边最后一条垂直参考线即可(可以Ctrl+T调整)。修改矩形高度为60px，不会太窄，看起来清爽一些。将它移动到对齐最顶部，然后下移30px，形成一种悬浮的感觉。
Step 3
添加一个Logo和一些链接文字，补充导航栏。Logo我使用的是简单的手写体“Grttd”，Playfair Playfair Display (Bold Italic)字体，26px，颜色为深灰色#0e0e0e。
导航栏的链接文字使用Source Sans Pro字体，14px，调宽一些字符间距。其中“Sign Up”(注册)采用加粗和绿色#96c218。完成了导航栏后，可以将这个分组最小化了，点击图层分组的小三角收缩。
Step 4
在图片上配上一些高大上的文案，概述网站的主题。使用加粗的大字体，并带有一个副标题，用于解释细节概念：
还记得前面要调整成深色的背景吗，现在其上面的大标题使用突出的白色即可加强文字的可阅读性。颜色为白色#FFFFFF的Source Sans Pro (Black)，80px，行高为86px。将其放在距导航栏下边120px，同样的元素间不至于太紧密。
放置一个副标题定义网站的理念，告诉访客这个网站是做什么的。这里用一个不错的字体搭配：无衬线字体标题搭配优雅的衬线字体。
更多好看的英文字体可以可以查看： Google Web Fonts Typographic Project 和 A Beginner’s Guide to Pairing Fonts。(好吧，中文的无视…)
思想如钻子，必须集中在一点钻下去才有力量
