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

美天阳光

音乐是人类灵魂的避难所!

 
 
 

日志

 
 

【引用】博客个性化模板制作设置  

2011-09-06 19:46:46|  分类: 制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

        博客个性化模板制作设置

       

        最近,本人对博客模板的风格设计及制作进行了初步尝试,有些粗浅体会。现将博客模板制作设置的步骤与方法作一简要介绍,希望能起到抛砖引玉的作用:

        部分素材及组合图:

 

顶图

博客模板制作设置 - 武克 - 武克博客

 

导航条

博客模板制作设置 - 武克 - 武克博客

 

底图

博客模板制作设置 - 武克 - 武克博客

 

模板组合效果

博客模板制作设置 - 武克 - 武克博客

 

  一、准备图片素材

  首先用图片设计软件(如:Adobe Photoshop CS3 )设计好模板的风格,并根据模板不同区域的尺寸,将图片裁切(制作)成所需要的素材。顶图、导航条、底图采用“飘雪动画秀 V3.10”软件将相关素材加以合成。  

 一般最多需要裁切出14张不同尺寸或图案的素材图片(有些素材图片也可以互相代用),注意各个素材图片在模板制作中相应的尺寸规范要求。

  图片素材尺寸可参考:

  1、顶区图片素材宽度为1004px,推荐高度260px;

  2、导航条图片素材宽度不超过1004px,高度在32——100px范围内;

  3、底区图片素材宽度为1004px,推荐高度200px;

  4、中区侧向区(2、1区域)图片素材推荐宽度10px,高度200px;

  5、模块侧向区(1、3、4、6、7、9区域)图片素材推荐宽度5px,高度100px。模块2区图片素材推荐宽度100px,推荐高度25px。模块8区图片素材推荐宽度100px,推荐高度20px。

  说明:以上图片素材的裁切尺寸,并不一定是模板的实际采用尺寸,制作时,应根据模板风格对宽度和高度灵活调整,如设置成不平铺或水平平铺、垂直平铺、水平+垂直平铺等。

  二、制作顶图和博客标题

  1、选择背景图片前,将不需要的背景颜色去除掉;

  2 、将顶区背景图片的高度调整到图片素材的尺寸(260px),可设置成不平铺;

  3、点击背景图片的“选图”按钮,选择顶区图片素材;

  4、顶区文字(博客标题)可按个人喜好选择其字体、大小、颜色、位置等。如果是事先已设计好标题文字的顶区图片素材,则可将原有的标题文字隐蔽掉(调整左右、上下位置)。

  三、制作导航条

  1、选择背景图片前,将不需要的背景颜色去除掉;

  2、点击背景图片的“选图”按钮,选择导航条图片素材;

  3、将导航条背景图片的高度调整到图片素材的尺寸(如32——100px),可设置成不平铺;

  4、导航标题文字按个人喜好选择大小、粗细和颜色,文字的水平位置及宽度可调整;

  5、当前项、鼠标划过项的背景图片,按个人喜好进行选择,但图片的大小应与导航条相适应;

  6、当前项、鼠标划过项的的文字,按个人喜好选择其大小、粗细及颜色。

  四、制作中区(下面以3列结构模板为例)

  1、选择背景图片前,将不需要的背景颜色去除掉;

  2、中区的2区域、1区域是模板的左右侧边框。制作时,依次点击中区的2区域、1区域背景图片的“选图”按钮,选择中区侧向区(2、1区域)图片素材。因图片素材宽度为10px,故设置时应作相应调整。图片素材高度只有200px,故应设置成垂直平铺;

  3、中区3的图片是模板的底面背景,按个人喜好选择一张图片,即点击背景图片的“选图”按钮选择图片,并设置成水平+垂直平铺,背景图片左右两侧缩进宽度均调整为5px或10px。

  总之,灵活应用中区的不同布局和区域,可以制作更多的效果。

  五、制作底区

  1、选择背景图片前,将不需要的背景颜色去除掉;

  2、将底区背景图片的高度调整到图片素材的尺寸(如200px)可设置成不平铺;

  3、点击背景图片的“选图”按钮,选择底区图片素材;

  4、底区文字按个人喜好选择颜色及上下位置。

  六、制作模块

  1、选择背景图片前,将不需要的背景颜色去除掉;

  2、模块的侧向区是每个模块的左右侧边框。制作时,依次点击模块侧向区(1、3、4、6、7、9区域)背景图片的“选图”按钮,选择模块侧向区图片素材。因图片素材宽度为5px,故设置时应分别作相应调整。其中4、6区域图片素材高度只有100px,故应设置成垂直平铺。

  注意:模块1、3区的高度调整应与模块2区图片素材高度25px相适应,模块7、9区的高度调整应与模块8区图片素材高度20px相适应;

  3、模块2区是每个模块的上边框,也是模块的标题栏。制作时,点击背景图片的“选图”按钮,选择模块2区图片素材。图片素材高度为25px,故设置时应作相应调整(与模块1、3区的高度调整相对应)。图片素材宽度为100px,可设置成水平平铺;

  4、模块8区是每个模块的下边框。制作时,点击背景图片的“选图”按钮,选择模块8区图片素材。图片素材高度为20px,故设置时应作相应调整,(与模块7、9区的高度调整相对应)。图片素材宽度为100px,可设置成水平平铺;

  5、模块5区的图片是模块的底面背景,按个人喜好选择一张图片,即点击背景图片的“选图”按钮选择图片,并设置成水平+垂直平铺;

  6、模块的各类文字可按个人喜好选择颜色或位置;

  7、模块边框的粗细、类型及颜色可按个人喜好进行设置。

  七、制作浏览器背景

  1、选择背景图片前,将不需要的背景颜色去除掉;

  2、浏览器背景图按个人喜好选择一张图片,即点击背景图片的“选图”按钮选择图片,并设置成水平+垂直平铺。另外,可根据自己的需要勾选“固定背景”。

  分辨率大于1024*768的显示器可看到页面两侧浏览器背景。

  八、其他

  1、模板按钮的背景、边框及文字的颜色,可根据自己的需要选择;

  2、分隔线、当前项及风格信息,均可按个人喜好进行设置。

 

 

博客模板制作设置 - 武克 - 武克博客

 

博客模板制作设置 - 武克 - 武克博客

  评论这张
 
阅读(18)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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