Photoshop设计淡雅风格的博客网页模板.pdfVIP

photoshop 学 习 教 程 Photoshop 设计淡雅风格的博客网页模板 960 网格目前已经在网页设计普遍使用，利用960 的分割特点可以很方便的对网页设计中的元素进行分区与排版。 本文中就是利用960 网格的分块特点设计的一个简洁的博客网页模板。 在photoshop 中学习制作基于960 网格系统的网页模板，你将会学到图层效果和定位元素相关知识。 最终效果预览 第一步 一般在Photoshop 中制作网页模板的时候，我使用960 网格系统。现而今这个网格系统在web 设计中相当流行。 然而我仍然相信网格系统不应该被过度的依赖。我使用960 的主要原因是它psd 文件中自带的参考线可以大大提 高web 设计的效率。所以我推荐到这里免费下载960 。下载完成后用PS 打开一个12 行的psd 文件 (960_grid_12_col.psd)，将会看到下面这个文件。 第二步 如果参考线没有打开，请通过-视图显示-智能参考线和视图-对齐到-参考线打开，快捷键Ctrl+; 。以下你看到 的是我已经在图中间画好了一个黑色矩形，接下来所有的元素都将包含在这个矩形中。其实你没有必要画这个矩 形，因为背景是白色的，如果你觉得有帮助，不妨画之。 1 photoshop 学 习 教 程 第三步 新建一个图层，选择渐变工具然后选择如下图白色到黑色的一个渐变效果。画的时候按住shift 使渐变线绝对水平。 如果效果上有差异，可以多试几次。 第四步 选择矩形选定工具沿着参考线从左上到右下在第二步中的渐变图中选定如下区域。按ctrl+shift+I 反选，然后按 delete 删除反选区域。 2 photoshop 学 习 教 程 第五步 重复上面两个步骤，让右边也同样加入一个渐变图层，确保它们是对称的。 第六步 新建一个图层组把两个边沿渐变矩形拖入其中，然后选定图层组，将不透明度设置为10%。 3 photoshop 学 习 教 程 第七步 接下来加入两边的虚线效果。如果只需要在css 中使用dashed 边框，那么这个虚线效果在PS 中是没有必要制 作的。一个聪明的办法是使用图形变换 工具;首先创建一个新图层，然后按Ctrl+T，然后把这个蓝色矩形稍微下 移一些，然后连续按Ctrl+Shift+Alt+T。如果你感觉这个方法复杂 了，可以手动的创建每个蓝色矩形。然后选定 所有蓝色矩形，按Ctrl+E 将它们合并。然后复制这个图层到右边，做成两个对称的边沿。 第八步 现在加入网页标题和标识性语言，这里我使用到的字体是“Rockwell” 。使用同样的蓝色。如果你熟悉色板，一个 聪明的办法是分别新建一个蓝色、一个灰色色板以供后续使用。 第九步 现在用Helvetica 或者Tahoma 无衬线字体创建菜单项。只需要输入一些大写的同色的字体。一般我喜欢把大写字体的 字间距调大一点。选择字体，勾选窗口字符，然后在字符面板中调整字间距。每个菜单项都在不同的图层中调整。 4 photoshop 学 习 教 程 第十步 把所有的菜单项加入一个图层组，复制一个副本，然后把色彩调为灰色，这样就有两个菜单组了，一个是蓝色的，一 个是灰色的。这样做是为了在网页中产生一个鼠标悬停变色效果。每次同时只让一个菜单项可见，效果如图： 第十一步 如果站点需要RSS 订阅功能，那么可以加入一个自定义的RSS 订阅图标。首先创建一个蓝色矩形框，然后用Rockwell 字体写上“RSS” 。订阅图标可以到这里下载，选择“Developer Kit”，然后放入我们的psd 文件中。 然后把图标放入一 个新的图层组，然后复制组，把蓝色矩