博客模版制作全图解- 阳光的日志- 网易博客

博客模版制作全图解

2010-04-24 20:08:08 阅读7 评论0 字号:

 

 

 

 

 博客模版制作全图解

 

      博客模版制作全图解 - 天帅童子 - 天帅童子的博客   

 

 巧用QQ、Photoshop、Dreamweaver

 

        写这个教程之前,首先要说明一下,小芷不是专业的制作人,只是个人爱好。这里,将个人摸索学习的心得,用图解的方式写出来,希望大家能在小芷笨拙的笔下学会一些基本的模板制作。

        制作之前,首先要准备3个工具:

        1、截图工具(建议使用QQ截图)

        2、Photoshop图片处理软件(以下简称PS)

        3、Dreamweaver网页制作软件(以下简称DW)

         正所谓“巧妇难为无米之炊”,光有工具是不行的,想要制做出漂亮的模板,素材的收集是非常重要的,这也是小芷最觉得最花时间的事了,网络图片千千万,真要找到自己喜欢的可要费点心思。

三种(背景和边框当然也可以自己制作)。如果想要模板装饰的更漂亮,还可以找一些漂亮的分割线。

        小芷用以下的几张素材,用图文方式教大家,完成一个简易的模板。写的有点繁琐,主要是针对没有太多制作基础朋友,请大家耐心的看完,相信多少会有点收获的。

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

顶区主图

    

        根据系统的设置,一个模板分为:浏览器、顶区、导航条、4区、2区、3区、1区和底区八个部分。要想做出的模板切片符合系统的要求,尺寸的大小就尤为重要了,网易系统要求的图片{zd0}尺寸数据如下(宽*高):顶区(1004PX*450PX),导航条(1004PX*100PX),4区(1004PX*100PX),底区(1004PX*800PX)这些数据中,宽是不能改变的,高只能小于不能大于。1区、2区、3区宽度为1004PX,在高度上没有要求,但要注意一点的是3区缩进的问题,如果模板不做边框的话,就不用考虑,3区的缩进{zd0}尺寸为50PX,这里也就意味着边框的宽度尺寸不要大于50px,如果超过的话,在你设置模板边框的时候,边框线将覆盖在边框上,影响美观。小芷一般把边框控制在40PX以内。

         很多朋友问,怎么图片完成,上传到模板制作系统后,顶区、导航和4区之间会出现缝隙,这是由于在制作图片的时候都是分开制作保存的,要想避免不合缝的问题,就需要图片在PS制作完成切片后,以Web格式保存。(小芷后面再具体介绍)

        这样,我们需把顶区、导航条、4区在一张图片上完成,图片背景{zd0}尺寸为宽1004PX、总高度650PX。1区、2区、3区在一张图上完成,底区和浏览器可以单独完成。

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

        插入表格时,首先设置表格的宽度(1004PX),表格的宽度直接影响模板的宽度。对齐的方式选择顶端对齐。将表格的高度设置为800PX以上,这样背景做好后便于QQ截图。间距是根据自己的需要来设置的,数字越大边框就越宽(这里别忘记考虑3区的缩进问题),填充和边框都可以根据自己的喜好设置,方法同间距设置要求一样,小芷在这里就不一一介绍了。属性都设置好后就可以将以背景的方式插入了。

        2、在表格中插入表格(属性如图):

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

         其实,制作带边框的背景图片,主要的方法就是表格套表格,将表格之间的间距设置好了,再将你的素材以背景的方式插入就可以了,要想边框的层次多,就多插入几层表格。

        如图将属性设置好,这里要注意的是表格的宽度和高度都以{bfb}的属性设置,这样表格会自动随着外层表格的变化而变化。现在可以将以背景的方式插入了。

      3、 在第二层表格中再插入一个表格(属性如图):

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

以背景的方式插入。

        4、插入主背景(属性如图): 

        {zh1}就是主背景图片的插入了,这里主要设置的是对齐方式,水平设置为居中对齐,垂直设置为顶端,这样设置主要是避免在背景中添加数据时,会在表格垂直位置的中部出现,也就是上面出现一节空白(模板制作这里可以不考虑,但要是用作日志背景的话就一定要注意了)。属性设置好了后,就可以将主背景图片以背景的方式的插入。

      

        5、  DW的部分还剩下{zh1}一步,就是预览保存了。

        小芷这里只需要预览就可以了。因为,我们前面做了那么多,就是想要得到下面的背景图片。

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

        这是预览后的全图,点击看看效果。为了写教程截全图,小芷的图片高度只设置了659PX。下面的内容就交给QQ来完成了。

QQ截图大家都不陌生吧。其实,截图拷屏的方法很多,但小芷选择QQ截图的主要原因是因为,QQ在截图的时候,系统自带边框截图尺寸的显示,非常的方便。可以直接截取我们需要的大小。顶部三个区(1004PX*650PX),中区和底区只用截取底区(1004PX*800PX)。如图:

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客 

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

中区底区截图

         三、利用PS制作浏览器、顶区、导航条、4区、2区、3区、1区和底区八个部分的背景图片。

PS是一个非常强大的图片处理软件,大家多少都有接触,小芷在这里不是教大家怎么使用它,要是那样,小芷可能是班门弄斧了。如何巧用PS,主要是利用几个工具把你搜集的素材和背景融合起来。下面用顶区主图示例介绍一下小芷的做法。

        1、浏览器图片制作

        在PS中打开顶区主图,调整尺寸后选取图中的部分裁剪,然后制作成浏览器的背景图片(图片效果采用了滤镜的胶片颗粒,然后在图像调整中将颜色调暗)保存为JPG格式就可以了。效果如下:

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

浏览器图片

        

        2、顶区、导航条和4区图片的制作

        制作顶部3个区的图片时,需要使用PS中图层的方法,为了使顶区主图和背景图片能够相融合,我们需要将图片用仿制图章工具,以顶部截图 背景图片为仿制源,把顶区主图图片的边缘先处理一下。

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

顶部图片1

顶部图片2

        这时就可以将处理好的图片利用图层的方式制作了。 制作的具体方法,小芷就也不多讲了,制作后的效果图片小芷贴出来大家一看就明白了。这里主要说一下导航条按钮的数据,当你在背景上做好按钮后,为了能让系统的七个栏目内容乖乖的呆在你所制作的按钮中,一定在ps的时候就要调整好,水平位置一般不用考虑,在系统中可以随意调节。但是垂直距离就要设置好了,导航条按钮一般是在导航条图片的居中位置,距顶部图片的上边距大概为497px(这个尺寸不是固定的,也要随着你做的按钮大小略微调整)。数据的调整方法如图:

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

        图片做到这里算是告一段落了,下面一步是小芷准备重点介绍一下的, 接下来就是要将上面的图片切成3个部分,大家一般都会想到使用裁切工具,使用裁切工具是可以将图片分成3个部分,但是在{zh1}上传到系统后就会出现图片之间接缝处不合缝的问题。所以这里只能利用切片工具来完成。如图示:

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

        存储后的切片会以images的文件形式存在。切片如图:

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

顶区图片

导航条图片

4区图片

         3、1区、2区、3区图片的制作。

        这三个区的制作方法同上,切片如图:

        存储后的切片同样以images的文件形式存在。切片如图:

3区图片(3区也可以直接平铺插入主背景图片)

        底区的图片没有太多的要求,只要把底区的截图在PS编辑好,尺寸:1004PX*800PX(只能小于或等于800PX),保存为JPG格式就可以了。

          

         剩下的就是把做好的图片在系统中制作了。具体的制作方法可以参照小芷的另一篇图解:        

        小芷把在系统做好后的模板全图贴出来,大家可以感受一下。 

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

        

        小芷今后将努力制作出不同风格的模板,请大家继续关注。

        此教程欢迎大家的分享引用,只是教程写的很辛苦,希望各位朋友引用时,尊重小芷的劳动果实,不要删掉出处。本文也会不时的更新,请分享了的朋友经常关注,如更新请重新引用一下。谢谢!

更新记录:

5月28日更新:1、增加模板直接分享链接。                                                  

5月31日更新:1、增加部分修改后模板的分享                                               

2、部分图片更新                                             

6月02日更新:

6月03日更新:

                                   

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

电脑自带装置抓图方法

 

用电脑自带装置抓图裁剪制作教程的快速方法:

每个电脑都有一个Print Screen键 博客模版制作全图解 - 天帅童子 - 天帅童子的博客,位置在最上面一排:

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

 Print Screen键用途可以抓图,在准备抓图的页面上按一下Print Screen键,然后点击电脑左下角开始——程序——附件——画图:

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

使用遨游浏览器的朋友可以直接点击网页右上方的画图标志

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客 

 进入画图板,点击上方的编辑——粘贴:

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

粘贴后选择左侧工具栏先点{dy}项再点一下第二项选定裁剪:

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

用鼠标选定需要裁减的范围:

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

按鼠标右键选取剪切:

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

点左上角文件——新建——粘贴,同时可以利用左侧工具栏的提示对图片进行文字等编辑(轻点标志可以看到功能提示):

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客    

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客

粘贴后点击左上角文件另存即可,存盘格式请选择jpg格式:

 博客模版制作全图解 - 天帅童子 - 天帅童子的博客



引文来源  

<#--{zx1}日志--> <#--推荐日志--> <#--引用记录--> <#--相关日志--> <#--推荐日志--> <#--推荐阅读--> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构-->
郑重声明:资讯 【博客模版制作全图解- 阳光的日志- 网易博客】由 发布,版权归原作者及其所在单位,其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实,请读者仅作参考,并请自行核实相关内容。若本文有侵犯到您的版权, 请你提供相关证明及申请并与我们联系(qiyeku # qq.com)或【在线投诉】,我们审核后将会尽快处理。
—— 相关资讯 ——