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

wangpei0018的博客

【每天从微笑开始,做自己的正能量】

 
 
 

日志

 
 

【转载】【博客技巧】怎么制作网易博客风格教程  

2013-09-07 09:16:11|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |


2011年08月02日 - 夕阳无限美 - 夕阳无限美de博客


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


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

                   

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

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

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

  

第二章、博客背景层设计:
 
一、 博客背景层分为顶区、导航、中区和底区四部分,
二、 首先应准备图片素材,建议图片宽度为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寸显示器里两边会被裁剪一部分。
 
第五章:其他
一、其他项设置分别为按钮、分隔线、当前项和风格信息,这几个对博客影响不大,随意设置,能和博客整体协调即可。
二、全部设置好后,点击“保存风格”即“使用此风格”即完成博客风格制作。
三、注意,在以上操作为防止忽然出错可多点击“保存风格”,先保存,然后再对其修改。



 自制自用模板(20) - 夕阳无限美 - 夕阳无限美欢迎您

 教你制作博客首页顶区的动态图片

 

网易博客首页提供了多种格式顶图样式,但是特殊时候如果你要制作自己的个性首页模式,那么顶图的制作则是需要掌握的,下面以滑雪图为例,向大家介绍其制作过程。

  一、顶图的加工

   1、顶图的图片必须是宽幅的,与顶栏形状、宽度一致,宽度一般在1004PX,高度150----400PX。

  2、这种图片一般要用图片处理软件进行加工,我用的是PHOSOHOP C2软件。

  3、首先上网找到自己喜欢的主题照片,点击“另存图片”按钮,将图片复制到自已的硬盘上。

  4、打开PODOSOHP C2软件,导入图片,对图片进行处理。

  点新建文件:

教你制作博客首页顶区的动态图片 - 理睬 - .

导入网上下载的图片。对图片进行裁剪在恰当合适尺寸,如果输入的图片小两端进行添充到合格尺寸。

教你制作博客首页顶区的动态图片 - 理睬 - .

 

4、制作完成后生成的图片作为底图”.

 

教你制作博客首页顶区的动态图片 - 理睬 - .

教你制作博客首页顶区的动态图片 - 理睬 - .

5、然后在此底图的基础上作闪图(如何作闪图参考博客中的另外文章)作好后另保存动画。保存在你的电脑中,等会儿备用(上传博客)。

6、再将制好的动画根据尺寸大小导入到U5中,对动画进一步加工,导入运动员等,制成新的动画,(U5的制作参观本博客中的相关文章)

 二、顶图的上传

   顶图制作好后,需要在博客的编辑状态下,点击首页左上角的绿色竖箭头,点击“装扮博客”=》“换衣服”=》选择“风格自定义”=》“新建风格”=》选择“顶区”=》选择图片平铺的方向和位置=》选择背景的颜色=》设置顶区的高度=》点击“选图”=》在你的电脑中选择前面已经保存的经过裁切的长条图图片(一般宽为1004,高为150---350较好)=》点击“保存风格”=》点击“返回”=》点击“使用此风格”=》点击顶上面的“关闭”。

   至此,全部完成,如觉得上传的照片不满意,可以重复刚才的操作,直到满意为止。



素材/理睬博客



 生日素材(三) - 尽善尽美 - 德不孤,必有邻!生日素材(三) - 尽善尽美 - 德不孤,必有邻!生日素材(三) - 尽善尽美 - 德不孤,必有邻!生日素材(三) - 尽善尽美 - 德不孤,必有邻!生日素材(三) - 尽善尽美 - 德不孤,必有邻!生日素材(三) - 尽善尽美 - 德不孤,必有邻!


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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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