企业网站模板设计系列四.doc

企业网站模板设计系列四：技术提高详细教程 企业网站系列一：PS企业网站设计：黑白橙三色制作教程 企业网站系列二：PS企业网站模版设计系列二：新手入门 企业网站系列三：PS企业网站模版设计系列三：新手入门 最终效果 ? ? 步骤1 ?为了确保能够对齐我们采用960s坐标制（从这里获取）下载打开文件我们先创建背景图层，在背景层上右击，然后选择背景图层，命名为“bg”。? ? 步骤2? 我们运用了这么多参考线，所以我们需要打开视图标尺。?? 步骤3 我们要为标题区设置下边框，所以需要在下方100px拖拽一条新的参考线，执行视图——新建参考线，位置：100?? 步骤?4 让我们来创建标题。先创建一个1020*100px的选区，然后按下shift+backspace 填充（可用任何颜色） 做一个渐变叠加，如下图所示。 将这个图层命名为“header-bg”。 步骤?5 输入网站标题，并设置以下文字属性：字体设置： Rockwell (从这里获取)字体大小: 30px字体样式: Regular反锯齿设置：平滑颜色：不要紧，因为我们还要执行一个渐变叠加 现在对文本添加渐变叠加，参考下图所示： 将你的网站标题和标题背景色对齐；同时选择你的标题层和“header-bg”层，然后选择垂直居中。 步骤?6 导航条字符设置如下：字体设置：Arial字体大小: 20px字体样式: Regular反锯齿设置：平滑颜色：#ffffff 创建一个圆角矩形作为一个动态链接，固定大小65*35Px，半径5px，（可用任何颜色填充）。?? 根据下图所示：执行描边，渐变叠加.?? 在我们进行下一步之前，首先要确保你的图层条理清晰，下面展示的是我们的图层面版! 步骤7 现在我们该创建一个特色的设计空间了。我们先在上一个参考线430px之后添加一个水平的参考线作为下边框。?? 创建一个1020*430px的选区作为特色设计空间的背景，用任何颜色填充。?? 然后执行图层样式——渐变叠加，设置参考下图所示： 现在让我们添加光泽效果！创建一个1020*120px的选区，用任何颜色填充。 然后添加渐变叠加，可参考下图设置。 降低图层不透明度到40% 步骤?8 接下来添加高光！运用单排选取框工具创建一个1像素的选区，如下图所示设置对齐： 设置前景色为 #acd86e 然后按下 shift+backspace 填充；要确定是使用前景色作为填充色。 我保证你会拥有一个很棒的像素细节。 我们已经做好了创建背景的基础，所以我们要给他们命名，使他们系统化，然后把他们组合在一起。 步骤?9 让我们更精确些！根据下图拖拽两条参考线。 输入欢迎语，字符设置如下： 字体设置：Rockwell字体大小: 40px字体样式: Regular反锯齿设置：锐利颜色：#f4f4f4 ? 我已经写上了“Here’s our brand new work. Oops Welcome!”但是我们需要以某种方式来强调“Welcome！”这个单词。所以基本上我们先添加一个渐变叠加，如下图所示。 现在根据下图所示拖拽两条新的水平参考线。 在我们结束这一步之前，要确定你的文字图层已经组织起来。 步骤?10 我们先创建一个220*150像素的选区（可用任何颜色填充），这个选区将会作为我们的图像控制区。 将这个图层命名为“pic-holder”然后试着将它像上图所示对齐。 描边 让我们添加一个特征设计中图片，文件打开图像。把图层命名为“pic”，并且确定放在“pic-holder”的上层。 在“pic”图层上右击并且选择创建剪贴蒙板。 步骤?11 创建阴影，我们先复制“pic”和“pic-holder”这两个图层。 选中复制的两个图层，执行编辑自由变换，然后调整高度为：-100.0% 当复制的两个图层仍处于选中状态时右击选择转换为智能对象，把这个图层命名为“shadow”，并且确定这个图层是位于底部。 选择“shadow”层然后单击添加图层蒙版（位于图层面版的底部）。 选择渐变工具（G）设置黑、白、黑从下到上拉一个线性渐变。 你应该会得到下面的图像。 步骤?12 我们需要为图像添加一个说明，先创建一个240*25像素的选区，填充颜色值：#1a1919，作为说明的背景。?? ? ? 输入说明文字，字符设置如下：字体设置：Arial字体大小: 15px字体样式: Regular反锯齿设置：None颜色：#82aa48 确定你的文件简洁！ 步骤?13 复制一份特色图像然后右对齐。 我们将要在中部做一个大一些的图，我们先创建一个340×200px的选区，如下图所示对齐，用任何颜色填充。 以下图作参考，执行描边 。 下图是我们做到这一步的效果。 确定你的图层系统化并且已经重组。 我已经创建了三个