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


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

博客风格自己做使用Photoshop设计网页(5)
图29

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

博客风格自己做使用Photoshop设计网页(5)
图30

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

博客风格自己做使用Photoshop设计网页(5)
图31

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

博客风格自己做使用Photoshop设计网页(5)
图32

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

博客风格自己做使用Photoshop设计网页(5)
图33

  最后添加写其他页面原色比如订阅啦等 。RSS图标你可以在教程很多地方找到. (国内的站酷不错)

博客风格自己做使用Photoshop设计网页(5)
图34

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



[1] [2] [3] [4] [5]