分享

怎么制作网易博客风格教程 - 阿居- 网易博客

 mhml 2011-04-02

怎么制作网易博客风格教程

『博客素材』 2010-03-06 21:36:12 阅读16941 评论51   字号: 订阅

中国古代作家全集系列 - 阿居 - 阿居的博客
 

 

要想拥有自己的博客风格,最好自己学习制作。做坏了没关系,不会影响到你的日志内容。影响到你的博客。只要恢复你原来的风格就行了。做成功的感觉那是太好了,你快来尝试制作一下吧!

                   

 

怎么制作网易风格教程 - 阿居 - 阿居的博客

第一章、博客皮肤介绍:

网易博客皮肤分为三块:分别是浏览器背景、博客背景、和模块共三层,类似于图层的概念,模块在最上面,博客背景在中间层,游览器背景在最下面。

怎么制作网易风格教程 - 阿居 - 阿居的博客

  

第二章、博客背景层设计:

 

一、 博客背景层分为顶区、导航、中区和底区四部分,

二、 首先应准备图片素材,建议图片宽度为1004像素,长度随意。在图片设计软件( 如:Photoshop )里把整个风格的效果设计好,并且根据不同区域尺寸切割好图片。(本例用Photoshop的切片工具来切割,也可以用别的方法)

 怎么制作网易风格教程 - 阿居 - 阿居的博客

顶区建议宽度为1004像素,高度为80-450像素,

导航建议宽度为1004像素,高度为32-100像素,

中区建议宽度为1004像素,高度随版面大小自动补充,

底区建议宽度为1004像素,高度为50-800像素,

(网易官方建议以上四张图最佳宽度为1004像素,偶用1280像素,效果也不差)

切割好图片,然后转出分成四张图片,图片格式是JPG或giF格式,也可以分开一张一张制作,但注意两张连接处要对接好。

2.也可以到网上下载自己喜欢的图片,包括博客的风格包,只能使用里面的图片(不能使用里面的代码,网易还没有开放)

 三、准备好图片,接下来把图片上传。

1、登录自己的博客,点击博客右上角“换风格”,进入风格设置界面,在左边选择“风格自定义”点击

怎么制作网易风格教程 - 阿居 - 阿居的博客

2、点击右边“新建风格”即可进入编辑区:

怎么制作网易风格教程 - 阿居 - 阿居的博客

3、依次点击顶区、背景和“选图”找到前面设计好的顶区图片,点击“打开”即可导入背景相片。

怎么制作网易风格教程 - 阿居 - 阿居的博客  

4、分别对裁剪、平铺方式、对齐方式等进行调整,直到图片位置满意为止。

 怎么制作网易风格教程 - 阿居 - 阿居的博客 

4、设置好顶区背景图后,再点击“文字”,即可以对顶区的文字进行大小,颜色及位置的修改。修改的效果在浏览器下方即可预览。

 怎么制作网易风格教程 - 阿居 - 阿居的博客

5、导航区设置,导航区的“背景”和“文字”设置与顶区设置相同,“当前项”是对当前浏览页面做特殊标记,,“鼠标滑过项”是对鼠标滑过停留的页面词进行设置的,可以修改字体、颜色也可以加背景图,

 

怎么制作网易风格教程 - 阿居 - 阿居的博客

6、中区、底区设置参照顶区设置。

   注意的是中区结构里有一个一行三列结构,那个一行刚好可以增加导航区的高度,这对于想把导航区图做的很大的博友很有用。

 

 第三章、模块设计

一、模块设计分开两种,一种是只做边框,就在网易博客里操作就可以,另外如果想再做美观一点,可以再加一个模块的背景图片,需要另外准备图片素材。

二、先说用边框做模块,依次点击模块、边框,在这里可以设置博客日志及首页边框线条、颜色等,如果不选择颜色,则模块会显示透明,直接用博客背景图做底版。修改的效果在浏览器下方即可预览。

怎么制作网易风格教程 - 阿居 - 阿居的博客

三、点击“文字”,可以设置博客日志及首页的文字颜色、位置。修改的效果在浏览器下方即可预览。

怎么制作网易风格教程 - 阿居 - 阿居的博客

四、这样博客模块就设计好了,如果不想再做模块背景图也没关系,如果想把模块弄的有个性一点,那就继续给模块做背景吧,

1、首先应把整个模块整体图案构思好,差不多如下,尺寸不要太大,具体尺寸要求后面讲。

怎么制作网易风格教程 - 阿居 - 阿居的博客

2、然后对这个图划分成9份,分成九张图,分法和博客背景图分法一样。

怎么制作网易风格教程 - 阿居 - 阿居的博客

3、图内1、3、7、9区四张图是模块的四个角,尺寸是固定,其他5张图是随着模块大小及日志的长短自动缩放的,长短是不固定的。

4、1和3区的尺寸高宽限制在50*100像素以内(网易官方数据),7和9区尺寸大小可以自已设置,

5、图内2、4、6、8、5区图的尺寸宽度以1、3、5、7区尺寸为准。长度随着日志长短重复连接填充,所以长度不用设置,但注意每一张图前后颜色不要相差太大,否则重复连接的时候头尾会有衔接痕迹的。

6、准备好图片后,点击模块、背景、 1区、选图,找到上一步准备的图片1,点击“打开”导入。

怎么制作网易风格教程 - 阿居 - 阿居的博客

7、在导入图片后,在平铺方式、对齐方式、当前区宽度和高度里进行调节,多试几次,直到下方预览结果位置准确为止。

怎么制作网易风格教程 - 阿居 - 阿居的博客

8、接下来2-9区设置相同。

这个比较复杂,不具备一定PS基础的就跳过这一步。

 

第四章 游览器背景设计

一、游览器背景指博客主体旁边两侧的部分。

二、游览器背景设计分开两种,一种是直接填充颜色,就在网易博客里操作就可以,另外如果想再做美观一点,可以再加一个自已做的图片,需要另外准备图片素材。(背景图片,网上很多,可以自己搜索)大小多可以,根据自己的需要选择。

二、先说直接填充颜色,点击游览器,然后选择左边的颜色即可修改浏览器背景。

怎么制作网易风格教程 - 阿居 - 阿居的博客

三、如果感觉直接填充颜色不好看,可以自己做一张图片,然后导入。点击游览器、选图,找到制作的图片,点击“打开”导入即可。导入后可以对图片进行设置:平铺方式、对齐方式和固定背景。

怎么制作网易风格教程 - 阿居 - 阿居的博客

四、制作浏览器背景图片时需注意,图片只是两边图案会显示,中间的图案全部会被博客背景和模块给覆盖。显示器的尺寸不同,显示出来的浏览器背景也会不同,比如19寸的显示器显示出来的图案,在17寸显示器里两边会被裁剪一部分。

 

第五章:其他

一、其他项设置分别为按钮、分隔线、当前项和风格信息,这几个对博客影响不大,随意设置,能和博客整体协调即可。

二、全部设置好后,点击“保存风格”即“使用此风格”即完成博客风格制作。

三、注意,在以上操作为防止忽然出错可多点击“保存风格”,先保存,然后再对其修改。

 (本人进行一些补充和修改,希望大家能看懂)

2010年08月06日 - 阿居 - 阿居的博客

本模块代码分享处

 

 

立地书厨

 

 

主题阅读

 

 

经典图库

 

代码素材

 

百万书库

 

 

武侠小说

 

 

中华艳史

 

 

英语学习

 

 

古典艳情

 

 

人与社会

 

 

破解软件

 

 

CS作弊器

 

 

电脑应用

 

 

家庭美食

 

 

实用知识

 

 

百万下载

 

 

哈佛管理

 

 

易经研究

 

 

知道丛书

 

 

传统蒙学

 

 

生活百科

 

 

做人做事

 

 

十大禁书

 

 

清纯美女

 

 

 

网易风格制作教程

 

 

 

花儿图片

 

 

 

 古典诗词

 

 

 

动物世界

 

 

 

婚礼致词范本精选

 

 

 

 静态背景

 

 

 

 ★世博会

 

 

 

边框素材
  评论这张
转发至微博
3  分享到:        
阅读(16941)| 评论(51)| 引用 (26) |举报

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多