建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 图像设计 > Photoshop教程 >

photoshop打造个性的博客模板(2)

时间:2011-03-10 20:08来源: 作者: 点击:
选择内容图层然后用上面的方法建立一个选取,按住ALT键来缩小选区如上图。然后新建一个图层在这个选区内填充上白色并且改变透明度为90%这样然后略微做一下渐变,这样就在头部添加了一点高光。 继续用矩形选框工具在

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片