网易博客风格皮肤自定义制作

 素材：爱亦浓   创意 ：冰清

 {dy}章、博客皮肤介绍

说明：网易博客风格自定义官方教程链接已经好久打不开了，在网上又找不到别的教程，所以特制作一份供博友们参考，转载请注明出处，谢谢！

　　　　　　　　　　　　　　　　　　－－《爱亦浓》博客

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

第二章、博客背景层设计

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

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

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

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

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

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

（网易官方建议以上四张图{zj0}宽度为1004像素，偶用1280像素，效果也不差）

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

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

1、登录自己的博客，点击博客右上角“换衣服”，在左边选择“风格自定义”

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

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

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

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

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

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

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

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

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

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

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

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

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区设置相同。

第四章 浏览器背景设计

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

二、浏览器背景设计分开两种，一种是直接填充颜色，就在网易博客里操作就可以，另外如果想再做美观一点，可以再加一个自已做的图片，需要另外准备图片素材。

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

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

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

第五章：其他

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

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

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