跳转到路径导航栏
跳转到正文内容

博客风格自己做 使用Photoshop设计网页

http://www.sina.com.cn  2010年10月13日 15:35  太平洋电脑网

  本教程主要是告诉大家如何在Photoshop里面设计一个有活力并具有现代感的博客界面。我们会从零开始告诉大家如何从一个空白的画布来一步步的制作出整个界面。下面是最终效果:

博客风格自己做使用Photoshop设计网页
最终效果图

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

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

博客风格自己做使用Photoshop设计网页
图01

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

博客风格自己做使用Photoshop设计网页
图02

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

博客风格自己做使用Photoshop设计网页
图03

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

博客风格自己做使用Photoshop设计网页
图04

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

博客风格自己做使用Photoshop设计网页
图05

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

博客风格自己做使用Photoshop设计网页
图06

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

博客风格自己做使用Photoshop设计网页
图07

上一页 1 2 3 4 5 下一页

新浪简介About Sina广告服务联系我们招聘信息网站律师SINA English会员注册产品答疑┊Copyright © 1996-2010 SINA Corporation, All Rights Reserved

新浪公司 版权所有