渐变Photoshop教程：制作超现代感的博客模板

Photoshop教程制作超现代感的博客模板

“个人博客”已经越来越多的被国内用户所接受并使用 由于博客程序的使用和管理比较简单 门槛也较低因此如今自己开博、写博也成为了一种趋势。而大多数是作为个人的心情抒发或日记形式所以BLOG界面也比较直接往往排版就分为左右内容与导航区不过简单的东西不一定容易设计往往优秀的BLOG界面还是比较稀少的这里我们将要介绍的BLOG网站就是由国外设计师设计截面清爽简洁细节处理比较到位值得借鉴。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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