苏泊尔平底煎锅好吗:博客模版制作全图解 - 飞过红尘的日志 - 网易博客

博客模版制作全图解

博客知识 2009-03-25 15:55:46 阅读206 评论3   字号：大中小 订阅

芷苑模版制作全图解

 巧用QQ、Photoshop、Dreamweaver

 音画整理：芷

文：芷 

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

        制作之前，首先要准备3个工具：

        1、截图工具（建议使用QQ截图）

        2、Photoshop图片处理软件（以下简称PS）

        3、Dreamweaver网页制作软件（以下简称DW）

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

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

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

顶区主图

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

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

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

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

        2、在表格中插入表格（属性如图）：

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

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

      3、 在第二层表格中再插入一个表格（属性如图）：

以背景的方式插入。

        4、插入主背景（属性如图）： 

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

        5、  DW的部分还剩下最后一步，就是预览保存了。

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

        这是预览后的全图，点击看看效果。为了写教程截全图，小芷的图片高度只设置了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个部分，但是在最后上传到系统后就会出现图片之间接缝处不合缝的问题。所以这里只能利用切片工具来完成。如图示：

        存储后的切片会以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日更新：

2、增加相关文章链接                                      

7月16日更新 ：

图片素材出自网络时空