如何用Photoshop设计一个

部渐变透明的。

    将一个纸张的材质盖住内容区头部的一部分。可以用色相/饱和度（ctrl+u）将其调整为蓝绿色。

    按住ctrl然后点右边图层中内容区的缩略图，可以创建一个选框，然后反选（ctrl+alt+i）然后删除多于的部分（注：这里更推荐另一种方法，首先确定纸张层与内容层相邻并且纸张层在内容层上面，然后在纸张层上右键，创建图层蒙版，就可以出现类似的效果，后面调整起来比较方便），然后还是擦出一条渐变来。

    用铅笔工具在头部的下面画一条1px的横线。

    选择内容图层然后用上面的方法建立一个选取，按住alt键来缩小选区如上图。然后新建一个图层在这个选区内填充上白色并且改变透明度为90%这样然后略微做一下渐变，这样就在头部添加了一点高光。

    继续用矩形选框工具在内容区域上面画一个侧边栏。依旧填充灰色背景（#eeeeee）

    添加一个透明的边框，跟上面做的方法差不多选择描边选项即可。

    继续用外发光来添加一个浅灰色的边，调整扩展值到最大这样我们可以得到一个双边线效果。

    再用内发光工具给侧边栏添加一个白色的边线效果，方法跟上面的一样。调整阻塞选项到最大值，可以让光出现的比较柔和。

    最后在侧边栏上添加一个从白色到灰色的渐变来增加些细节和层次。

    将侧边栏裁开，因为之前计划的是每一个菜单目录都是一个单独的区域。>

    博客日志区的设计方法跟前面的很类似，每一日志都需要有一个自己的封闭区域。画一个矩形来模拟这些区域。

    填充上白色，然后右键点击侧边栏将他的图层样式拷贝走然后粘贴到这个日志区域图层上。（偷懒的方法一定不要忘记嘎）

    到这一步基本上框架已经搞定了，下面我们在页面上做一些文本测试来看看我们的颜色和大小有没有问题

    创建一个导航区域，注意要有渐变，做法参照头部的方法。输入导航文字。

    随便扒拉一篇你要发布的日志复制过来，调整颜色和大小和行间距。标题是相当重要的元素所以必须要粗点颜色要醒目点。一些作者信息例如时间日期等到时不重要的，所以他们可以小一点颜色浅一点。

    在内容区域底部画一个浅色矩形。

    用一些看起来很棒而且免费的按钮来设置一些函数，添加一些次级信息例如留言数，继续阅读等。这些信息对访客来讲还是很有用的所以将他们另外隔开放到另一个地方来。

    最后添加写其他页面原色比如订阅啦等。rss图标你可以在教程很多地方找到例如

    atutorial活freeiconset。（国内的站酷不错）

    咣当当最后一个华丽丽拥有良好的页面信息和清楚的框架结构的博客界面设计就这样的出来鸟。下面我们会讲解如何将这个设计稿转化为真正的网页。

    终于翻译完了，其实主要是想看第二章如何布局的，不过看到这个教程比较完备就顺便先把这个翻译了。有些地方是按照自己的方法来翻译的，不过都能达到类似的效果。如果有不足还望大家指出

    原文链接：blog。spoongraphics。co。uk/tutorials/create-a-vibrant-modern-blog-design-in-adobe-photoshop

    博客地址：plidezus/index。php/2009/01/create-a-vibrant-modern-blog-design-in-photoshop/