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

daok201 的博客

 
 
 

日志

 
 

【转载】图解制作博客个性模板全过程  

2015-09-28 15:10:45|  分类: 【转载】博客入门 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

引用:飞过红尘

 

 

必备工具:Adobe Photoshop CS 8.0 软件。

下载地址:http://www.duote.com/soft/808.html

 

制作模板方法:

打开Photoshop之后,点“文件”菜单选择“新建”文件:在打开的对话框如图1-1所示内容设置。设置后画布如图1—2的画布样式。注意:图片宽度一定要设置为1004像素,高度设置1200PX是为了把整个模板在一个图像中制作完成,便于切割图片。图像宽度应该严格按照规定尺寸设置,否则在安装时候版面会出现问题。另外,就是在画布上添加标尺(在[视图]菜单中选择“标尺”命令后即可为画面添加标尺),以便计算准确。

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图1-1,设置单位一定是像素为计量单位,分辨率72,颜色模式为RGB颜色)

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图1--2)画布显示比例50%(可在“视图”菜单中选择“放大”或者“缩小”调整显示比例。上图的出现的阶梯状阴影是截图时出现的问题,不是画布的原始状态。当鼠标放在画面的边缘时,出现双箭头显示时,可以将画布边缘框拖开一定宽度。上图灰色阴影部分就是拖开之后的显示状态)。

 

(一)顶区的制作

1、在“图层”调板中点“创建新的图层”按钮,如图2-1所示;在上面的选项栏设置“羽化值为0",如图2-2所示。

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图2-1)

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图2-2)

 

2、工具箱中选择“矩形选框”工具,在画布文件上建立矩型选区宽度为1004,高度为450以内(尤其要注意不能超过450以上,否则在安装时就要出麻烦了,我设置为1004宽度-440高度)如图3所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图3,高度为440PX,宽度为1004PX)

 

3、在工具箱中选择“拾色器”,设置前景色R值为100,G值为55,B值为0。如图4所示(提示:颜色可以根据自己喜好设置,可能会创作出更为理想的效果):设置后点击“好”。

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图4)

 

4、按住键盘上的“Alt+delete”键,对选区内填充颜色。效果如图5所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图5,填充颜色之后的显示效果)

 

5、打开“选择”菜单选择“取消选择”命令,将选区去掉。取消选区后如图6所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图6,取消选区之后的样式)

 

6、在[图层]调板中将填充后的“图层1” 选择后按住标鼠拖至下面的“创建新的图层”按钮上,再复制一层“图层1副本”,如图7所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图7,拖动复制新图层之后的样式)

 

7、在“图层”调板中将新复制的“图层1副本”拖至“图层1”之下。如图8所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图8,移动至“图层1”下面的样式;移动办法是用鼠标按住后拖动至“图层1”和“背景”之间,当出现横杠时松开鼠标。)

 

8、在“图层”调板中按图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来“锁定”按钮,将其选定,使其层处于锁定状态。如图9所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图9,锁定之后的样式)

 

9、将工具箱中将“拾色器”前景色设置为黑色(这是作为今后博客模板的最底层颜色,可根据自己的需要设置)。如图10所示(R值为0,G值为0,B值为0是黑颜色):

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图10,设置为黑色的样式,之后点击“好”)

 

10、住“Alt+Delete”键,使图层1副本填充为黑色。如图11所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图11,“图层1副本”填充后的样式)

 

11、“图层调板”上方将设定的“锁定”按钮上点击,取消其选定。如图12所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图12,取消锁定的样式)

 

12、按住键盘上“ctrl+T”键,对图像进行自由变换。如图13所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图13,按住ctrl+T键之后样式)

 

13、在选项栏进行设置,“W”值95%、“H”值90%如图14--1所示:设置后选区变换如图14--2所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图14--1。对W设置95%,H设置90%的样式)

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图14-2。设置完成后图像样式)

 

14、按键盘上“Enter”(回车键)键,确认变换。确认后如图15所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图15,点击“回车”键进行确认之后样式)

 

15、在“图层调板”中单击选择“图层1”层。如图16所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图16,点击“图层1之后的样式,应该显示为被选择的颜色)

 

16、按住键盘上的“Ctrl”健不放,在“图层调板”上单击“图层1副本”缩览图,将其上层图像选取。如图17所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图17,上层选取之后的样式)

 

17、按键盘“Delete”键,将上层选区内的图像删除。如图18所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图18,上层图像被删除之后的样式)

 

18、在菜单栏“选择”中点“取消选择”命令,将选区去除。如图19所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图19,取消选区的样式)

 

19、将外层制作立体效果。选择菜单栏中“图层——图层样式——投影”命令,弹出的对话框中设置参数如图20所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图20,对投影效果设置的参数样式,此时不必点击“好”,下面还要继续设置)

 

20、在“图层样式”对话框中继续进行选项和设置。点击左侧[斜面和浮雕]选项(注意:不止是勾选,而是在点开到变色,即表示选中),其参数设置如图21-1所示:设置完之后点“好”。图像效果如21-2所示

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图21-1,设置“斜面和浮雕”的参数样式,设置之后点击“好”)

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图21-2,点击“好”之后图像样式)

 

21、为内层进行效果加工。在“图层调板”选择“图层1副本”。如图22所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图22,点击“图层1副本”之后样式)

 

22、在选中的“图层1副本”上单击右键,在弹出的右键菜单中选择“混合选项”命令。在打开的“图层样式”对话框左侧单击“斜面和浮雕”,其设置参数如图23-1所示:设置完成之后,点击“好”,图像效果如图23-2所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图23-1,对“斜面和浮雕”设置参数样式)

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图23-2,设置后点击“好”之后图像样式)

 

23、在“图层调板”中单击图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来黑色箭头,在弹出的菜单中点击“合并图层”命令,将顶区制作合并为一个图层。合并后的“图层调板”显示效果如图24所示:图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图24,“合并图层”之后的样式)

 

通过上面操作,顶区模板的背影制作已经完成。顶区制作后的效果如图25所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图25)顶区效果图

 

 

接下来需要制作导航条了。如果顶区制作已经能够做到如此效果,下面的制作基本上都是类同操作,因此在图像样式上就不再祥细阐述。

(二)导航条的制作

导航条制作要求精细,图像最大高度不能超过100PX,宽度要与顶区宽度一致,为1004PX;按钮共七个,应该均匀分布在标尺的350至920之间,这样安装之后可以将文字在按钮正中位置显示。具体制作如下:

1、在[图层]调板中点图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来[创建新的图层]按钮,新创建“图层1“。如图1所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图1)

 

2、在工具箱中选择图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来“矩型选择”工具,在画面的顶区下面建立高80PX,宽1004PX的矩型选区。注意:新建选区应该是从标尺440PX(顶区的下边框)向下至标尺520位置。如图2所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图2)

 

3、对“拾色器”的前景色进行设置,R值为100,G值为55,B值为0。如图3所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

( 图3)

 

4、按住键盘的“Alt+delete”键对选区内填充颜色。效果如图4所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图4)

 

5、打开“选择”菜单选择“取消选择”命令,将选区去掉。取消选区后如图5所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图5)

 

6、在[图层]调板中将填充后的“图层1”用鼠标按住拖至下面的“创建新的图层”按钮上,再复制一层“图层1副本”,如图6所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图6)

 

7、在“图层调板”中将新复制的“图层1副本”拖至“图层1“之下。如图7所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图7)

 

8、将图层调板的“锁定”按钮选中,将其锁定。如图8所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图8)

 

9、将“拾色器”前景色设置为黑色:R值为0,G值为0,B值为0。如图9所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图9)

 

10、按键盘上“Alt+Delete” 键,使“图层1副本”填充为黑色。如图10所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图10)

 

11、“图层调板”上方将设定的“锁定”按钮上点击,取消其选定。如图所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

 

12、按键盘上的“Ctrl+T” 键,对图像进行自由变换。如图11所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图11)

 

12、在选项栏中对“W” 和“H” 值进行设置,设置参数如图12-1所示:设置后图像样式如图12-2所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图12-1)

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图12-2)

 

13、按键盘上“Enter” 既(回车键)对变换进行确认。确认后的图像如图13所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图13)

 

14、在“图层调板”中单击“图层1” 将其选中。选中后显示如图14所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来(图14)

 

15、按住键盘上的“Ctrl” 键不放,在“图层”调板单击“图层1副本”的缩览图,将下层选中。图像显示如图15所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图15)

 

16、按键盘上的“Delete” 键,将上层选区内的图像删除。图像显示如图16所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

 

17、选择菜单中的“选择——取消选择”命令,取消选区后图像显示如图17所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图17)

 

18、选择菜单栏中的“图层”——“图层样式”——“投影”命令,在弹出的“图层样式”对话框中设置参数如图18所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图18)

 

19、继续在“图层样式”对话框中进行选项和设置。在“图层样式”左侧单击“斜面和浮雕”选项,将其选择并进行参数设置。设置参数如图19所示:设置完成点击“好”。

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图19)

 

20、在“图层”调板中选择“图层1副本”。如图20所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图20)

 

21、在“图层1副本”层上右键单击,弹出的右键菜单中选择“混合选项”命令。在弹打开的“图层样式”对话框中左侧单击“斜面和浮雕”选项,将其选择并进行参数设定,设置参数如图21所示:设置完成点击“好”。

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图21)

 

22、在[图层]调板点击图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来黑色箭头,在打开的对话框中选择“合并图层”命令,将其合并为一个图层。合并后的[图层调板]显示如图22所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图22)

 

 

以上为导航条底层制作,其制作方法和步骤与顶区制作完全一致。接下来进入按钮的制作,这也是导航条制作的重点。

(三)按钮的制作:

1、在“视图”菜单中选择“实际像素”命令,将图像调整为100%显示。并滑动滚动条将导航条图像靠在标尺下边。如图1所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图1)

 

2、在[图层调板]点击“创建新的图层”按钮,新建“图层1”。如图2所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图2)

 

3、在工具箱中选择“椭圆型选框”工具,在导航条图像标尺350PX起至420止,建立一个长70PX的椭圆形选框。上下位置适中即可。如图3所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图3)

 

4、在“拾色器”中设置前景色,R值100,G值为55,B值为0。如图4所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图4)

 

5、按住键盘的“Alt+delete” 键对选区内填充颜色。效果如图5所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图5)

 

6、打开“选择”菜单选择“取消选择”命令将选区去掉。取消选区后如图6所示: 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图6)

 

7、在“图层调板”中拖扯“图层1“ 至“创建新的图层”按钮上,复制一个新的图层“图层1副本”。如图7所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图7)

 

8、在“图层调板”中将“图层1副本”拖至“图层1” 下边。如图8所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图8)

 

9、在“图层调板”中选择“锁定”按钮,将其选择。如图9所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

 (图9)

 

10、将“拾色器”前景色设置,R值为0,G值为0,B值为0。如图10所示:图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图10)

 

11、按“Alt+Delete” 键,使“图层1副本”填充为黑色。如图11所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图11)

 

12、在“图层调板”上方将设定的“锁定”按钮上点击,取消其选定。如图12所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图12)

 

13、按键盘上的“Ctrl+T” 键,对图像进行自由变换。如图13所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图13)

 

14、在选项栏上设置W值85%,H值85%;如图14所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图14)

 

15、按键盘上的“Delete” 键,对选区进行确认。确认后显示如图15所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图15)

 

16、在“图层调板”中单击“图层1” 将其选中。选中后显示如图16所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

 (图16)

 

17、按住键盘上的“Ctrl” 键不放,点击“图层调板”中的“图层副本1” ,将上层选中。如图17所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图17)

 

18、按键盘是的“Delete” 键,将上层图像删除。如图18所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图18)

 

19、在“选择”菜单中选取“取消选择”命令。将选区取消。如图19所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图19)

 

20、选择菜单栏中的“图层”——“图层样式”——“投影”命令,在弹出的“图层样式”对话框中设置参数如图20所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图20)

 

21、继续在“图层样式”对话框中进行选项和设置。在“图层样式”左侧单击“斜面和浮雕”选项,将其选择并进行参数设置。设置参数如图21所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图21)

 

22、在“图层样式”参数设置好后,点击“好”。图像效果如图22所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图22)

 

23、在“图层调板”中选择“图层1副本”,选定后如图23所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图23)

 

24、在“图层1副本”缩览图上右键点击,在弹出的右键菜单中选择“混合选项”命令,在打开的“图层样式”对话框中选择左侧的“斜面和浮雕”选项,设置参数如图24所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图24)

 

25、设置好参数单击“好”,显示图像如图25所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图25)以上的操作(除“椭圆型选框”工具不同外)与之前的顶区制作完全相同

 

26、在“图层调板”中的“图层1” 层中,眼睛后面有个小方框图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来,点击之后建立链接。如图26所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图26)

 

27、在“图层调板”中,拖动“图层1副本”至下边的“创建新组”按钮上,建立一个图层组。如图27所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图27)

 

28、在“图层调板”中,将新创建的“序列1” 拖至下面的“创建新的图层”按钮上,复制新的图层组,一共复制6个副本。如图28所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图28)

 

29、在工具箱中选择“移动工具”,在按钮图像上进行移动并均匀摆放。注意:最后一个按钮在标尺910前面。

在移动按钮图像时,移动那一个按钮图像,相对就要在“图层调板”中选择其相对应的图层,这样才可以移动这个图像。移动之后分布显示如图29所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图29)

 

30、在“图层调板”中选择图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来黑色箭头,在弹出的菜单中选择“合并图层”命令。合并之后的“图层调板”显示如图所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图30)

 

 

至此导航条制作全部完成,接下来进行底区制作。

(四)、制作底区、中区

1、要在制作中区之前先来制作底区。

底区的制作方法步骤与顶区的制作完全相同。

需要注意的是:底区的高度要限制在800PX以内。制作后的图像效果如图所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

 (底区完成后效果图)

 

2、中区制作

将剩余部分全部用来制作中区。

其制作方法步骤与顶区制作相同,也不再具体演示制作过程。制作完成后的效果如图所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(中区制作完成后的图像效果)

经过上面各区的制作,模板背景已经制作完成了 。

 

二、顶区和底区的装扮

装扮修饰顶区和底区,应该根据个人空间主题来选择合适的图片或者为空间命名标题,尽量要达到形式与内容相对统一,能够使人简单浏览就能对空间主题一目了然。可以在顶区制作标题框,方法与制作模板顶区的步骤相同。也可以不设置博客标题,只用图片来装扮。也可以用文字工具在顶区内写上自己欣赏的诗词名句或者自己空间的感言等等。对于底区的装扮可以直接移入图片,也可以再制作两个对等的边框(两个相同的边框可先制作完成一个,利用按钮复制方法再复制别一个,用移动工具放到合适位置),中间放置大框,将框里面移入图片进行装扮。

顶区装扮效果如图所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

顶区移入图片装扮效果

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

顶区移入图片装扮效果

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

顶区移入图片效果

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

顶区移入图片后加入空间标题效果

 

下面是底区装扮后效果:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

底区移入图片装扮效果

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

底区移入图片装扮效果

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

底区分栏移入图片效果

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

底区分栏式装扮效果

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

模板图片全貌显示效果

 

三、制作模板的切割与保存

制作好的模板素材最终是要应用到博客中,如何将图像切割这是重点内容。下面就是具体方法步骤:

1、在工具箱中选择“切片工具”,分别延制作的顶区、导航条、中区(要切割为三片图片,既上部、中部和下部)、底区分别切割成切片素材保存待用。在切割时一定要按照标尺水平移动鼠标,最大限度减小缝隙。利用[切片工具]在图像上切割的图片素材,在安装时能够保持整个模板整齐划一,美观无缝隙。切割后显示如图1所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图1)

此时切片自动编号,显示为灰色时则切处没有激活。

 

2、用鼠标右键点每一个切片图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来编号,弹出右键菜单中选择“提升到用户切片”命令,此时切片编号显示为蓝色,则表示切片已经处于激活状态。如图2所示:在存储之前,必须记住每个切片编号应该在博客中的安装位置,否则安装时就要出现问题。

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图2)

 

3、在菜单中选择“存储为Web所用格式”命令,打开的对话框如图3所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图3)

只要在“预设”中选择“GIF” 格式即可。

 

4、点“储存”按钮后弹出对话框如图4所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图4)

按照上面进行设置之后,点击“保存”,完成了切片的储存。

 

5、储存方式是以文件夹形式,如图5所示,

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来(图5)

找到储存的文件夹之后,打开浏览并把没用的图片(切片的缝隙)删除,把素材图片存放好在安装时使用。打开后的图片如图6所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图6-1)此切片编号为01号,安装时是顶区位置。

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图6-2)此切片编号为03号,安装在导航条位置。

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图6-3)此切片编号05号,安装在三列式的1区既上层。

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图6-4)此切片编号为07号,是安装在三列式的2区中层。

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图6-5)此切片编号为09号,是安装在三列式的3区底层。

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图6-6)此切片编号11号,是安装在底区位置。

 

 

四、模块的制作、切割、保存和应用。

1、模块制作与前面的顶区制作方法相同,这里不重复演示具体操作过程。但要重点注意模块制作的规格。制作模块的图片宽度为250PX,高度为300PX。制作完成后效果如图1所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图1)

 

2、在工具箱中选择“切片工具”,对模块进行切割成9片图像。切割如图2所示:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

(图2)

 

重点提示需要注意:模块的切片尺寸要格外注意。01和05号切片是安装在博客模块的1区和3区位置,高在100PX之内,宽度在50PX以内;模块19和21号是安装在博客模块的7区和9区位置,高度在100PX以内。

 

各编号安装位置如下:

01号在安装时为1区位置;03号为2区位置;05号为3区位置;11号为4区位置;12号为5区位置;13号为6区位置;19号为7区位置;20号为8区位置;21号为9区位置。千万不能搞错位置,否则安装后就要出现麻烦。

 

3、激活切片后保存为Wed格式,打开文件夹各图片显示如下:

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来编号01号图片为1区位置

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

编号03号图片为2区位置

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

编号05号图片为3区位置

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

编号11号图片为4区位置

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

编号12号图片为5区位置

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

编号13号图片6区位置

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

编号19号图片7区位置

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

编号20号图片8区位置

 

图解制作博客个性模板全过程 - 梦雨玲 - 梦雨玲---之旅欢迎您常来

编号21号图片9区位置

 

在进行博客自定义安装时,请观看网易学院视频教程:

 


相关文章:

  (原)博客顶栏图片加文字动效制作

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

历史上的今天

评论

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

页脚

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