设计制作博客模块背景边框图例详解

博客制作教程

设计制作博客模块背景边框图例详解

编写：山间溪流

网易博客的“风格自定义工具”是一款功能强大的博客模板设计工具，通过这个工具几乎可以制作出90%以上的现有网易官方主题风格。除了可以设置制作更换顶栏图片、导航、中区、底区、页面背景和浏览器背景外，还可以精心雕琢风格各个细节，如：博客标题文字大小位置、按钮、导航当前项和鼠标滑过项、以及模块花边等等……

设计制作模块背景边框（或称模块花边）是精心雕琢风格的很重要的内容，好的模块背景边框可以给博客增光添彩，大大提高博客的艺术性和观赏性。为了帮助一些新手朋友更好理解和应用本教程的内容，现在我们首先介绍一下有关模块的知识。

我想重点说两个问题：

1：在点击“风格自定义工具”上的“模块”后，操作界面上很醒目的出现了“九个区”，这九个区是什么意思呢？它的意思就是说：一个模块是由九个部分组成的。如果你要用“自定义工具”制作模块的背景边框图，你首先就要把设计好的模块背景边框图分割成九部分，这就是素材的准备，要制作好九个小区的背景图片素材。然后，再按照顺序一个一个上传到模块区域内，最后才能组成一个完整的模块背景边框。本教程就是按照这个意思和思路进行操作的。

2：在博客上，虽然各个模块的背景边框都是相同的，但由于的位置和内容的不同，模块显示出的大小又不尽相同，这就是说，模块的尺寸大小是可以自动变化的。这种变化是依靠“2、5、8小区”的自由变化实现的。所以在选择“平铺方式”时，与其他小区是不同的，你在阅读下面的内容时稍加注意就能发现。

下边我以设计制作圆角四边形模块背景边框为例，介绍一下利用“风格自定义工具”设设计制作模块背景边框的方法步骤。

第一步：在现有博客中区的背景上（可以把背景用截图工具截下来），利用图片处理软件制作出如下图所示的圆角四边形模块背景边框图。(如图1所示）

第二步：对上图进行剪裁，剪裁后如下图所示：

第三步：将图2分割成9部分，如图3所示：

图3：将背景边框图进行分割

第四步：点击“换风格”→　“自定义风格”→　“修改”，进入博客“风格自定义工具”操作页面，点击上方导航栏中的“模块”→　“背景”→　“1区”→　“选图”，从电脑中选取“1区”的图片，载入图片后，“平铺方式”选择“不平铺”，并设置调整该区的尺寸，操作设置与效果如图4所示：

图4：载入并设置1区图片的过程和效果图

第五步：点击“2区”→　“选图”，从电脑中选取“2区”的图片，载入图片后，“平铺方式”选择“水平平铺”，并设置调整该区的尺寸，操作设置与效果如图5所示：

图5：载入并设置2区图片的过程和效果图

第六步：点击“3区”→　“选图”，从电脑中选取“3区”的图片，载入图片后，“平铺方式”选择“不平铺”，并设置调整该区的尺寸，操作设置与效果如图6所示：

图6：载入并设置3区图片的过程和效果图