注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

兮纪年

销怠的执念

 
 
 

日志

 
 

【转载】【原创教程】网易博客模版设计与制作——夺宝奇兵007  

2014-11-29 11:14:17|  分类: 博客代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
【原创教程】网易博客模版设计与制作——夺宝奇兵007 - 夺宝奇兵007 - 夺宝奇兵007

 

网易博客模版设计与制作

文:夺宝奇兵007 

 

  博客模版的设计与制作,是科技与艺术的结合,是个性化的体现,与审美情趣关系密切,特别是娴熟的制作技法,是模版质量的关键。一个精美的模版会使人赏心悦目,流连忘返。完成这样的一幅作品,是各方面知识的综合运用。

 

  一开始学习设计模版时,我什么都不懂,找不到规律。特别是顶图高度多少合适,各种字体颜色的设定等等。为了能够找到一些规律,制作时就打开了四个网页,一个是编辑设计状态的,一个是首页,一个是日志,一个是关于我。在编辑设定过程中,每次点选一种字体颜色后,就到那三个网页中去刷新一下看效果,看看哪里发生了变化,找到后,若不满意立刻作以调整。这样渐渐地深陷其中。有时候,裁切出来的图填充到“九宫格”后,发现对不齐,有接缝。就得重新裁切,重新上传至“九宫格”再看效果。有时候会发现是“九宫格”的长宽尺寸不对,那就重新调整尺寸。经过不断努力,反复试验,渐渐地找了点规律和重点。

 

  设计一个模版之前,想要怎样的模版效果应该提前在脑海中构思,然后作图去实现它。有一种模版,浏览器可以锁定不动,这样的模版就不用制作顶图、导航栏、中区、底图和主要模块、侧栏模块,将这些编辑框的颜色一个一个都删空,就是没有填充任何颜色,也不用填图,主要是设定各种字体颜色。那么这个浏览器背景图就很重要,注意图案不要太复杂,让各种字体显示清楚,一般使用风景远景大图最好。还有一种是顶图统领全局,其他部分以颜色搭配即可。还有一种就是版面细腻,边框由外到内逐次显示,中区有边框线,主要模块有边框线,侧栏模块有边框线,但这些边框线由外到内,形成层次感,也很精致。还有一种线条有发光感的模版,科技类的偏多,效果也不错。还有一种是背景有磨砂感的模版,需要精细化制图才能实现。

 

          总之,学无止境。认真钻研,总会有收获的。再加上朋友的支持与鼓励,就更有信心了。想要学习制作模版的朋友,可以继续探讨以下内容。

 

  下面就制作的细节作以简要说明:

 

  我们先了解一下模版的结构,形成一个整体的概念,这样有利于设计和制作。

           一个博客模版由浏览器、(顶图、导航栏、中区、底图)、(主要模块、侧栏模块)、(文字、视频、图片、音乐)等构成。从垂直屏幕方向看,浏览器是最底层,它会被(顶图、导航栏、中区、底图)遮挡,而(中区)又会被(主要模块、侧栏模块)遮挡,(主要模块、侧栏模块)则是一个容器,其中可以显示(文字、视频、图片、音乐),这些显示内容也会遮挡(主要模块和侧栏模块)的中区部分。这样,我们看到的博客模板,是在同一个平面而由前至后叠加遮盖后的效果。由于遮挡,最底层的浏览器只有博客主板的周边部分显现。博客主板由顶图、导航栏、中区、底图从上到下在同一平面排列构成,是博客模版的主要部分。

 

  为了描述简便,我们将:

 

  浏览器称为为“背景层”。

 

  顶图、导航栏、中区、底图称为“主板层”。

 

  主要模块、侧栏模块称为“模块层”。

 

  背景层就是浏览器,可以由图片或颜色来设计。背景层的图片以纯色为好,大多数是黑色或灰黑色,这主要是为了衬托主板层。浏览器填充为纯色主要是为了不眼花缭乱。由于背景层是横向和纵向平铺的,当图片的宽度很大时,看到的就是向下平铺了。假如背景图是均匀的浅色花纹或纯色,用500*500像素的小图(再小一些也可以),就可以铺满背景。浏览器用图最大不能超过1000kb,否则不能成功上传。最好小于900kb

 

  主板层由顶图、导航栏、中区、底图组成,宽度全部都是1004像素。顶图最大高度450像素,底图最大高度800像素。顶图、导航栏、中区、底图在一个平面上,是从上到下依次排列的。

 

  顶图最大高度450像素。顶图是模版的精华部分,也是模版特征的主要体现。因为一个顶图最能代表这个模版的类型。顶图的图片可以是科技类、书画类、山水类、风景类、照片类、人物类、建筑物、版画类、水墨画类、设计图案类、服装类、体育类、等等等等。根据个人爱好可以放置各种各样的美图。由此体现设计者的思路与爱好。


【原创教程】网易博客模版设计与制作——夺宝奇兵007 - 夺宝奇兵007 - 夺宝奇兵007

(顶图 尺寸4000*430像素)

原图网址:http://blog.163.com/chenzhanfei007@126/prevPhDownload.do?host=chenzhanfei007@126&albumId=273996435&photoId=9097778273 

 

  导航栏最大高度100像素。一般设计为35~40像素高,宽度与顶图、中区、底区一样,都是1004像素。导航栏上有:【首页】、【日志】、【相册】、【博友】、【收藏】、【音乐】、【关于我】这七个【文字按钮】,文字按钮之间的距离可设计为60像素,文字按钮可以上传小的背景图作为衬托,这样,小的背景图的宽度也是60像素(高度31像素)。文字按钮可以设计鼠标滑过小背景图,尺寸60*31像素,可以是GIF动画图等。


【原创教程】网易博客模版设计与制作——夺宝奇兵007 - 夺宝奇兵007 - 夺宝奇兵007导航栏文字当前项背景图60*31像素

 【原创教程】网易博客模版设计与制作——夺宝奇兵007 - 夺宝奇兵007 - 夺宝奇兵007导航栏文字鼠标滑过背景图60*31像素

 

  中区可以设定横向和纵向平铺。随着博客模块高度的增加,中区向下自动扩展,使其能够全部囊括主要模块和侧栏模块的内容。比如,日志就在主要模块中显示,有的日志内容很长,大约是屏幕的5倍或10倍,即使这样,中区会向下延伸,包容这些内容。因此中区用图最好也是纯色的或图案细碎均匀的。中区用图也是一种背景图,由于被(主要模块和侧栏模块)遮挡,只会露出四周和模块之间间隙等部分,这些露出的部分就是可见的中区图。中区是由高度大约50~200800像素的小图向下平铺而成,因此是“满填充”。

 

  中区的两边可以设计为边框效果,但无顶边和底边。由于下平铺,就会形成左右边框线。不能有上边线和底边线,因为向下平铺,上下边线就会重复出现,就像横向栅格一样,就不是边框效果了。那么,上边框如何加上?可以加在“导航栏”的底边上,样式与左右边框一样。底边框可以加在“底图”的上边沿上。这样,不论中区向下延伸扩大多少,都会形成一个边框的效果。其中上边框在导航栏底边沿,下边框在底图上边沿,左右边框线是由中区向下平铺形成的。要想使中区在左右边沿有边框效果,中区的图案就制作成像“H”而没有中间横杠的那样,宽度1004像素,高度(20~100)像素均可,左右边框线的宽度大约2像素。其图案有向下重复性。注意图案向下重复出现时不要有接缝。

 

  底区最大高度800像素。因此设计图案时高度最高为800像素。一般情况下高度为150~400像素为宜。

 

  以上顶图、导航栏、中区、底图可以是一张整图,然后通过“裁切”分别裁切出来。这样裁切“导航栏”时,就带着中区的上边框线,裁切中区时,就不带上边框和下边框,裁切底图时,就带着中区的底边框线。如此,一张整图,就可以完成顶图、导航栏、中区和底图,这样是一个整体的效果,而不是不相关的各种图的拼凑。

 

   用photoshop cs3做好一张整图,尺寸宽度为1004像素,高度为800像素。

      从上向下拉一条横标尺线(鼠标放在编辑画面的顶标尺线处,按住左键拖曳)在高度300像素处(为了裁切高度为300像素的顶图),用标尺线预隔出顶图区域。

      再拉一条横标尺线在335像素出,为了裁切高度35像素的导航栏,

      再拉一条横标尺线在500像素处,这样,底图的高度就是300像素。

      用裁切工具,裁切出顶图,另存一下,取名“书法模版顶图”,

      编辑----后退一步,回到了原整图编辑页面,

      再裁切出“导航栏”,另存,取名,

      编辑----后退一步,回到了原整图编辑页面,

      在裁切出中区用图,另存,取名,

      编辑----后退一步,回到了原整图编辑页面,

      再裁切出底图,另存,取名。编辑----后退一步,回到原整图编辑页面

      以上这些图一个一个上传到博客风格编辑界面上,就有了“模版层”。

 

 “博客风格编辑界面”的进入。登陆博客,在博客的左上角有一个向下闪动的绿色箭头,鼠标接触,弹出横向菜单,会看到——【博客装扮】,点开,就进入到了“博客风格编辑界面”。可以随意编辑也不会坏掉,若设计不理想,可以随便引用一个模版风格暂时使用,有时间再继续设计制作。

 

  主要模块和侧栏模块的设计与制作。主要模块在编辑状态就是一个“魔方格”编辑图,或者叫“九宫格”。第一层三个框,第二层三个框,第三层三个框。为了方便说明,第一层三个框就设为1-11-21-3;第二层三个框就设为2-12-22-3;第三层三个框就设为3-13-23-3

我们需要制作一个有边框效果的图(1000*400像素),分别裁切出九个小图,去填充“九宫格”。

1-1就是模块中左上角的位置,宽度最大50像素,一般设定为5~20像素之间,现设为10像素,也就是:关于我、最近访客、博友、我的圈子这些文字的左边距。

1-2就是主要模块的眉头,可以横向平铺。

1-3就是主要模块右上角的位置,宽5~20像素,高20像素。

第一层三个框的高度都是一致的,统一的。参考值20像素。

2-1是主要模块的左边沿,可以向下平铺,宽度10像素,与1-1宽度一致。

2-2是主要模块的中区,也是模块内容的背景,可以横向和纵向平铺。

2-3是主要模块的有边沿,可以向下平铺。同2-1一样,会形成边框线。

第二层的2-12-3的图案是对称的,向下平铺能形成左右边框效果。

3-1是主要模块的左下角,3-2是底边。3-3是右下角。

以上九个图案,可以用一张制作好的整图裁切而成。


 【原创教程】网易博客模版设计与制作——夺宝奇兵007 - 夺宝奇兵007 - 夺宝奇兵007

 【原创教程】网易博客模版设计与制作——夺宝奇兵007 - 夺宝奇兵007 - 夺宝奇兵007
 
【原创教程】网易博客模版设计与制作——夺宝奇兵007 - 夺宝奇兵007 - 夺宝奇兵007
 
【原创教程】网易博客模版设计与制作——夺宝奇兵007 - 夺宝奇兵007 - 夺宝奇兵007
 
【原创教程】网易博客模版设计与制作——夺宝奇兵007 - 夺宝奇兵007 - 夺宝奇兵007
 
【原创教程】网易博客模版设计与制作——夺宝奇兵007 - 夺宝奇兵007 - 夺宝奇兵007
 
【原创教程】网易博客模版设计与制作——夺宝奇兵007 - 夺宝奇兵007 - 夺宝奇兵007
 
【原创教程】网易博客模版设计与制作——夺宝奇兵007 - 夺宝奇兵007 - 夺宝奇兵007
 
【原创教程】网易博客模版设计与制作——夺宝奇兵007 - 夺宝奇兵007 - 夺宝奇兵007

 【原创教程】网易博客模版设计与制作——夺宝奇兵007 - 夺宝奇兵007 - 夺宝奇兵007
 

  主要模块填图完成后,侧栏模块相应自动完成,不用另外制作——裁切——上传完成填图。如果想要一种主要模块与侧栏模块不一致的效果时,就要重新制作一个边框图,裁切出九个小图,分别填充侧栏模块的“九宫格”。

 

  主要模块设计中,会有到文字颜色的设定,有:模块标题文字颜色、重要文字颜色、次要文字颜色、链接文字颜色。模块标题文字就是每一个模块的标题文字,如:关于我、最近访客、博友、关注,还有自定义模块的名称等。重要文字颜色就是日志内容中文字的颜色,一篇小说、散文、杂文等的文字颜色,篇幅大,字数多,是博客的主要内容。次要文字就是不带链接的那些指示性文字,如:日志中有“本文转载自夺宝奇兵007、“阅读(70)”、“评论(20)”、“最近读者”、“评论”等,还出现在日志网页中日志链接题目下边,如:“2013-09-24 08:46  阅读73 评论4。这些文字在日志链接题目的下方,字体小,有辅助的提示作用。链接文字就是日志网页中日志的题目,带链接。这些文字的颜色构成了模版风格色调,通过反复调试,才会找到理想的效果。

 

  在不断地实践中,这条学习之路越走越清晰了。我大约用了一年的时间学习制作博客模版,做了大约有20个。有的效果好,有的效果不理想,但或多或少也有一点收获。只要循序渐进、细心钻研、持之以恒就能学会,也会越做越好。最主要的是审美情趣的提高。

  在设计的过程中,也遇到一边设计一边出思路的时候。一开始想要的效果做不出来,就变换思路,最终以比较满意的效果成形。实际上,博客模本的风格数不胜数。有清淡简洁类型的,有重色大图的,有轻巧便装的。从主色调角度看有红、黄、蓝、绿、淡灰、淡蓝、紫色、黑的等,这些都与主题相联系。从类型上看,有古典型的、有现代科技类型的、有科幻类型的、有时尚时装的、有人物特写类型的、有摄影绘画类型的等等。

 

      博客模板制作经验交流与探讨:

      1、可以不要顶图,将顶图的颜色框删空,不上传顶图。让浏览器背景图可见。这样,顶图的图案可以超出主板左右的范围,形成图案包围主板的效果。

      2、不用任何一张图,仅凭颜色的设定,就可以设计出完美的博客模板。

      3、将顶图、底图的颜色删空,不上传任何图,可以形成由浏览器全包围主板的模版。即主板在中央,四周是浏览器用图或颜色的可见部分。

      4、可以隐藏侧栏模块的“模块标题文字”。

      5、顶图可以使用GIF动画,增添活力。

      6、各种特殊效果,经过反复实践,还会有异想天开的效果。

 

          教育家陶行知说过:行动是老子,知识是儿子,创造是孙子。千里之行始于足下,只要敢于挑战,勇于探索,没有攻不破的难题。最关键的就是行动,有了行动才会有知识的积累,才会培养出兴趣。是的,有时候,兴趣是靠自己培养出来的。有了行动,也许仅仅一次的行动,会使你发现另一片崭新的天地。在那里,你可以凭空想象,一展才华,尽情施展。也许,过不了多久,你就会拥有自己喜欢的个性化的模版。这一切都源于——行动。记得刚刚来到网易建博的时候,看到很多各式各样精美的模版,就非常喜欢,可就是不知道怎样制作和设计。想拥有一个自己个性化的模版就成了自己默默的梦想。祝愿朋友在不断的探索中展现艺术创作的灵感,在不断的探索中渐入佳境,祝愿朋友心想事成,梦想成真!


【原创教程】网易博客模版设计与制作——夺宝奇兵007 - 夺宝奇兵007 - 夺宝奇兵007
底图(4000*200像素) 这里只能缩小显示。
  评论这张
 
阅读(81)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017