初学者必须练习的web2.0网页设计教程

先附上最终效果图

PSD源文件下载
强力建议初学者练习这个教程，这个教程讲到了
1.960栅格系统
2.倒影的制作
3.web2.0质感
4.网页元素的对
等等等等。
因此强烈建议初学者都制作一遍，我做完后感觉对自己的帮助非常大
本教程原来来自PS真功夫，但是原文中错误比较多，我对他进行的重新编辑。

步骤1

为了确保能够对齐我们采用960s坐标制（下载地址  ）下载打开文件,将\nathansmith-960-Grid-System-3a98428\app_plugins\photoshop下的960_GRIDS.atn文件复制到photoshop安装目录的\Presets\Actions文件夹。

重启photoshop在动作面板运行24 Column Grid动作即可。
我们先创建背景图层，在背景层上右击，然后选择背景图层，命名为“bg”。

步骤2

我们运用了这么多参考线，所以我们需要打开视图>标尺。

步骤3

我们要为标题区设置下边框，所以需要在下方100px拖拽一条新的参考线，执行视图——新建参考线，位置：100


步骤 4
让我们来创建标题。先创建一个1020*100px的选区，然后按下shift+backspace 填充（可用任何颜色）

一个渐变叠加，如下图所示

将这个图层命名为“header-bg”

步骤 5

输入网站标题，并设置以下文字属性：
字体设置： Rockwell (从这里获取)
字体大小: 30px
字体样式: Regular
反锯齿设置：平滑
颜色：不要紧，因为我们还要执行一个渐变叠加

现在对文本添加渐变叠加，参考下图所示：

将你的网站标题和标题背景色对齐；同时选择你的标题层和“header-bg”层，然后选择垂直居中。

步骤 6

导航条字符设置如下：
字体设置：Arial
字体大小: 20px
字体样式: Regular
反锯齿设置：平滑
颜色：#ffffff
[local]1[/local]
创建一个圆角矩形作为一个动态链接，固定大小65*35Px，半径5px，（可用任何颜色填充）。
[local]2[/local]
根据下图所示：执行描边，渐变叠加.
[local]3[/local]
在我们进行下一步之前，首先要确保你的图层条理清晰，下面展示的是我们的图层面版!
[local]4[/local]

由于教程实在是太长了，蓝色理想又有发帖限制，因此建议大家直接去网的网站上去看
http://www.moyu.name/web20.html

[ 本帖最后由 ftium4 于 2011-7-26 10:47 编辑 ]