本文主要是告诉大家如何在Photoshop里面设计一个有活力并具有现代感的博客界面。

　　我们会从零开始告诉大家如何从一个空白的画布来一步步的制作出整个界面。

　　这是我为Springy Developments的一个WordPress主题项目中的一个特别的设计，将来我想我们一起来看看如何将这个设计转化为编码的过程以及最后如何将他们制作成最终的产品。

　　牢记最初的概念设计稿，下面的教程将会一步一步来明确这个过程。想要一个好的设计，大量的试验和一些元素的重新安排是不可或缺的，因为这将让我们很好的理解为什么使用这些工具，为什么这样布局来设计这样一个产品。

　　打开PS然后创建一个空白文档。我比较喜欢在一个大一点宽屏文档上面开始制作。切记使用RGB色彩模式以及设置为72DPI就好，因为我们紧紧是在屏幕上使用(注：一般印刷是300dpi，而屏幕只要72就够了，CMYK为印刷色)

　　首先我们来处理页面的背景，这个地方没什么特别有趣的填充物。给背景选择一个素色，然后从上面使用放射性渐变工具一直拖到中间。当然你也可以选用自己喜欢的颜色，在这里我就选择了我选择的是蓝绿色的渐变。

　　打开一个 牛皮纸 素材， 我们将用它来为背景增加一些有趣的材质效果。

将材质去色 (CTRL+SHIFT+U),然后选择高斯模糊用大一点的像素来抹掉牛皮纸上面的一些细节。

　　将修改过的牛皮纸材质放在渐变的背景色上面，然后选择混合模式的叠加选项，再修改透明度为90%。

　　在一个网页设计中设计合理的用户显示器范围是网页布局一个重要的步骤。除非另有要求，我一般都是将分辨率调整到1024×768，因此我在文档的中部将参考线设置为960px宽，两边空白处各有20px宽，这是为了以防一些元素超出之前设置的屏幕分辨率。

　　使用圆角矩形工具画一个内容区域如上图所示，颜色为浅灰色(#eeeeee)，圆角半径为20px。注意在这种情况下圆角矩形并不要两边顶满，因为下面右侧还要添加一些东西。

　　双击圆角矩形图层然后添加8白色描边，宽度为8px，混合模式为叠加然后调整透明度为30%，这样就会有一个很酷的透明效果！

　　再次为这个圆角矩形兄添加一个内发光，白色的5像素即可，这样会让边线产生一个很细小的倾斜效果。

最后添加一个外发光，黑色的15%透明度的，于是一个淡淡的内容区的阴影就这样出现了。

　　新建一层，再画一个圆角矩形宽度一样，但这次要改改圆角半径，10px足矣。在下面给这个灰色区域添加一点点渐变让他有一种倾斜度。

　　复制一个之前的内容区域，然后用橡皮工具从中间将两侧的边线擦出一个渐变来。(注，这里最好选择一个图层蒙版然后用渐变做，橡皮的透明度不好控制，不知道他是怎么做到的。

　　在整个边线上再用铅笔工具画1px的垂线。这里可以按住shift来保持角度和垂直。

　　还是要慢慢擦出来渐变(其实这一步可以在擦边线之前做好然后再套上图层蒙版做渐变。

　　这样一个巨大的灰色内容区就这么的呈现在眼前鸟，并且下部还有些渐变哦。回顾下来看看，顶端的圆角要比下面的大，边线是在中部渐变透明的。

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

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

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

(责任编辑：admin)