设计制作博客模块背景边框图例详解
2012-03-21 08:51:55| 分类：
【博客初学】
| 标签：
|举报
|字号大中小 订阅
| 
博客制作教程 设计制作博客模块背景边框图例详解 编写：山间溪流 网易博客的“风格自定义工具”是一款功能强大的博客模板设计工具，通过这个工具几乎可以制作出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区图片的过程和效果图 第七步：点击“4区”→ “选图”，从电脑中选取“4区”的图片，载入图片后，“平铺方式”选择“垂直平铺”，并设置调整该区的尺寸，操作设置与效果如图7所示： 图7：载入并设置4区图片的过程和效果图 第八步：点击“5区”→ “选图”，从电脑中选取“5区”的图片，载入图片后，“平铺方式”选择“水平+垂直平铺”，并设置调整该区的尺寸，操作设置与效果如图8所示： 图八：载入并设置5区图片的过程和效果图 第九步：点击“6区”→ “选图”，从电脑中选取“6区”的图片，载入图片后，“平铺方式”选择“垂直平铺”，并设置调整该区的尺寸，操作设置与效果如图9所示 图9：载入并设置6区图片的过程和效果图 第十步：点击“7区”→ “选图”，从电脑中选取“7区”的图片，载入图片后，“平铺方式”选择“不平铺”，并设置调整该区的尺寸，操作设置与效果如图10所示： 图10：载入并设置7区图片的过程和效果图 第十一步：点击“8区”→ “选图”，从电脑中选取“8区”的图片，载入图片后，“平铺方式”选择“水平平铺”，并设置调整该区的尺寸，操作设置与效果如图11所示： 图11：载入并设置8区图片的过程和效果图 第十二步：点击“9区”→ “选图”，从电脑中选取“9区”的图片，载入图片后，“平铺方式”选择“不平铺”，并设置调整该区的尺寸，操作设置与效果如图12所示： 图12：载入并设置9区图片的过程和效果图 第十二步：点击“模块”→ “文字”，设置模块标题文字、重要文字、次要文字、链接文字的颜色，并调整模块标题文字的位置。 图13：设置模块文字的颜色和位置 第十四步：点击“模块”→ “边框”，在边框类型选项中选择“无边框”。去掉原来的边框线。 图14：设置模块的边框：去掉原来的边框线 第十五步：模块背景边框最终的效果图如15图所示： 图15：模块背景边框最终的效果图 山间溪流日志《专版导航》 
| |
评论这张
转发至微博
转发至微博
关闭
玩LOFTER，免费冲印20张照片，人人有奖！
我要抢>
<#--最新日志，群博日志-->
<#--推荐日志-->
<#--引用记录-->
<#--博主推荐-->
<#--随机阅读-->
<#--首页推荐-->
<#--历史上的今天-->
<#--被推荐日志-->
<#--上一篇，下一篇-->
<#-- 热度 -->
<#-- 网易新闻广告 -->
<#--右边模块结构-->
<#--评论模块结构-->
<#--引用模块结构-->
<#--博主发起的投票-->
评论