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

.

.

 
 
 

日志

 
 

芷苑模板制作全图解  

2008-11-24 20:53:51|  分类: 博客教程 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
【原创】芷苑模板制作全图解

 芷苑模板制作全图解 - 天高云淡 -        天高云淡

 芷苑模板制作全图解 - 天高云淡 -        天高云淡

 

 

 芷苑模板制作全图解(三)

全屏模板《灌木精灵》制作过程

http://style8899.blog.163.com

 音画整理:芷

文:芷 

芷苑模板制作全图解 - 天高云淡 -        天高云淡 

 

 

 

芷苑模板制作全图解 - 天高云淡 -        天高云淡

       

        说到模板教程,这应该是小芷的第三篇了。

        第一篇《芷苑模版制作全图解(一)》主要介绍的是,在系统中制作模板的过程。

        第二篇《芷苑模版制作全图解(二)》主要介绍的是,如何巧妙的运用QQ、Photoshop、Dreamweaver三个软件,怎样将三个软件结合起来制作模板。

        当教程《芷苑模版制作全图解(二)》发出后,很多朋友误认为,只能用这三个工具才能制作模板,其实不然。

         此文以小芷刚做出的一款全屏模板《灌木精灵》为素材,将如何运用Photoshop(以下简称PS)制作全屏模板的方法介绍一下,为方便理解,还是用图解的方式。 

        制作素材:

芷苑模板制作全图解 - 天高云淡 -        天高云淡

素材1  

        素材分析:

        由于图片素材的像素为宽600px,高600px,那么与系统要求的宽1004px相差很多,我们就只能采用拼接的方式处理了,虽然系统有水平平铺和垂直平铺的设置,但是显示出来的效果很杂乱,如果想要最后全屏无缝的效果就更不容易了,所以我们第一步就从素材1拼接处理开始。

        全屏版面分析:小芷使用的显示器的分辨率是1440*900像素,为了符合全屏显示的要求,将浏览器图片宽度的像素设置为1440px,配合无缝拼接,高度设置为2400px(这个高度是根据图片本身的画面来设置的)。

       

       下面就按步骤来详细介绍一下模板《灌木精灵》制作的全过程。

        步骤一:拼接素材、制作浏览器

        在PS打开素材1,新建一个宽1440px,高2400px的文档,命名为《灌木精灵》。属性如图:

芷苑模板制作全图解 - 天高云淡 -        天高云淡

       

        1、在图层窗口双击素材1 解锁,然后利用移动工具将素材1移动到新建的文档《灌木精灵》中。

        2、回到素材1,点击菜单栏的图像——旋转画布——水平翻转,将翻转后的素材1利用移动工具移动到文档《灌木精灵》中。如同样方式执行图像——旋转画布——垂直翻转,移动翻转后的素材1到《灌木精灵》中,再将垂直翻转后的素材1执行图像——旋转画布——水平翻转,同样移动到《灌木精灵》中。这时文档《灌木精灵》中就有四个新增加的图层了,而且是四个画面不同方向素材1。现在我们就将这四个图层进行拼接处理。

        拼接方法:点进移动工具,在菜单栏的显示界定框出打上勾  ,然后点击图片会出现图片的界定框,在界定框上点击一下,属性栏就会在菜单栏显示,这时只需要将属性栏中的数值调整到图片之间的无缝状态就可以了。最后确定无误后将四个图层合并。

        合并图层的方法:一般有两种,一种是关掉背景层的眼睛,然后确定图层显示栏中只剩下需要合并的图层后,点击图层——合并可见图层合并图层(这种方法适合在图层比较少的情况下使用)。另一种是,确定需合并的图层为上下层关系后,点击图层——向下合并图层,依次将图层合并。

        3、将拼接后的图层复制三层,用同样的方法拼接、合并。这时拼接后的图层宽度为2400px(这样拼接是为了浏览器画面显示的对称协调),远远大于背景了,利用移动工具将图层居中。

        居中方法:高度调整固定后,将两侧超出背景图层的边缘的部分拉回到背景边框,然后将属性栏宽度百分比调整回100%,这样图片自然就居中了,高度居中方法一致,不过最后是调整高度百分比哦!

芷苑模板制作全图解 - 天高云淡 -        天高云淡

此图为第一次合并的属性

        拼接效果如下:

芷苑模板制作全图解 - 天高云淡 -        天高云淡

点击图片可查看全图

        这样图片拼接就完成了,我们可以把拼接好的图片运用于系统制作中的浏览器图片,保存为JPEG格式备用,命名为浏览器1但考虑到在页面加载时,图片像素越小打开的速度就越快,那么我们还需要将拼接好的图片再进行一下处理。

        处理方法:在PS中将保存为JPEG格式的浏览器1打开,利用裁切工具将浏览器1裁切为一个完整的循环画面,裁切后的尺寸为:宽1440px,高1200px。保存命名为浏览器2备用。

        裁切后的浏览器2效果:

芷苑模板制作全图解 - 天高云淡 -        天高云淡

点击图片可查看全图

       

        步骤二:制作主图    

        1、回到主文档《灌木精灵》中,新建图层,将前景色设置为#4B3B23,利用圆角矩形工具在新建图层中拉出一个宽1004px,高度1750px的圆角矩形框。(高度尺寸在后面还将根据需要调整)

        属性如图:

芷苑模板制作全图解 - 天高云淡 -        天高云淡

 

        2、对圆角矩形框进行图层样式设置,除内发光的设置为默认,其余各项属性设置如图:      芷苑模板制作全图解 - 天高云淡 -        天高云淡  

        设置后的《灌木精灵》效果如下图: 

芷苑模板制作全图解 - 天高云淡 -        天高云淡

点击图片可查看全图

        3、到了这一步,模板的基本框架就出来了,下面根据个人的爱好,对模板进行一下修饰,在《灌木精灵》模板中主要修饰的部分有三处:按钮的修饰、4区修饰、底区的修饰。

        按钮修饰

        按钮制作方法 :

        很多朋友曾经问过小芷,模板上那些漂亮的按钮是怎么样制作的怎样定位按钮的位置?那么带着这两个问题,小芷就将按钮的制作过程一并介绍一下。

       (1)、按钮素材的选择

        根据模板画面的特点和个人喜好,选择和画面色彩接近、谐调的图案。小芷一般都是就地取材,直接在素材1中选择一处图案填充,这样既方便又快捷,呵呵!以下是用从素材1中选取的图案,做一个演示,相信大家一看就明白了。

        (2)、将按钮素材设置为定义图案

         定义图案方法:确定选定的图案为当前操作文档时,点击菜单中的编辑——定义图案,出现一个对话框,将图案命名后就可以关掉文档了。

         如图:

芷苑模板制作全图解 - 天高云淡 -        天高云淡

 

        (3)、回到《灌木精灵》主文档中,新建图层。利用椭圆工具(这里可根据喜好选择工具形状),将前景色设置为#4D3C24,在新建图层中拉出一个椭圆形状的图案,椭圆的大小可根据按钮的大小调整。然后利用魔棒工具在椭圆上点击一下,这时椭圆周围就会出现一个选定框,然后点击编辑——填充——选择自定义的图案”填充。

        如图:

 芷苑模板制作全图解 - 天高云淡 -        天高云淡

 

        (4)、将填充好的椭圆进行图层样式设置

         如图: 芷苑模板制作全图解 - 天高云淡 -        天高云淡

        

        (5)、新建图层,前景色设置为#4D3C24,同前面一样操作,在填充好的椭圆居中位置再画出一个较小的椭圆,调整图层透明度为90%,设置图层样式。

          如图:      

 芷苑模板制作全图解 - 天高云淡 -        天高云淡

        (6)、合并两个椭圆的图层,这样一个椭圆形的按钮也就做好了。当然,想要按钮更漂亮,还可以在椭圆的周围添加一些装饰。

        添加装饰的按钮图示:芷苑模板制作全图解 - 天高云淡 -        天高云淡           由于《灌木精灵》的顶区已经比较多花草了,就没有继续修饰了。

         (7)、将做好的按钮复制六个图层,定位按钮。

         按钮位置的定位方法:水平位置按钮之间的距离为等距离设置,系统导航栏的文字是可以根据按钮位置调节,这里注意的是,垂直定位的问题,根据小芷以往制作模板的经验,只要顶区、导航区设置的图片高度都为满数据设置的话,按钮的位置应该距界定框顶部距离为497.5px,当然这个数据也要根据按钮的大小稍微调整。  

          四区修饰

        (1)、新建图层,利用矩形选框工具,在距顶部550px处向下居中选定一个矩形框,矩形框的大小为宽:1004px,高100px,也就是系统四区的大小。

        (2)、切换到浏览器1图层,利用仿制图章工具在矩形框内,左手按住Alt键,右键居中位置选定图案仿制源后点击。

         (3)、切换到圆角矩形框图层为操作层,在选定框内居中位置仿制涂抹,这样选定框内的图层就被复制的图案代替了。

         (4)、在四区添加一些文字,进行修。

            按钮、四区修饰后的《灌木精灵》效果: 

芷苑模板制作全图解 - 天高云淡 -        天高云淡

 点击图片可查看全图

        底区的修饰

       (1)、如同四区修饰一样,新建图层,利用矩形选框工具,在底区的圆角矩形框内设定一个宽为1004px,高为260px的矩形选框。

        (2)、切换到浏览器1图层,利用仿制图章工具在浏览器1图层中选择合适的图案做为仿制源,左手按住Alt键,右键居中选定图案点击。

        (3)、切换到圆角矩形框图层为操作层,在选定框内居中位置仿制涂抹,这样选定框的图层就被复制的图案代替了。

        (4)、继续在底区复制好的图案二分之一处,利用矩形选框工具,矩形选框的大小根据图案倒置部分的大小设定,目的是将倒置的图案制作处水中波纹的效果。选框一定不要将圆角的粉色边框选入哦!否则边框会变形的。选框设定好后,执行滤镜——扭曲——水波命令。

         属性如图:

芷苑模板制作全图解 - 天高云淡 -        天高云淡

       

        底区修饰后的《灌木精灵》效果: 

芷苑模板制作全图解 - 天高云淡 -        天高云淡

点击图片可查看全图

        做到这里,模板主图基本就完成了,下面一个步骤就是利用切片工具切片保存了。

       

        步骤三:切片保存

        点击工具栏中的切片工具,按照系统的要求将模板进行切片,切片成浏览器(为了更好的显示,在前面已经制作了全屏的浏览器2,所以切片部分的浏览器图片可以不使用了)、顶区(这里值得注意的是,由于系统顶端已经设置了一个宽为1004px,高为30px的按钮,那么我们在切片的时候需要将这个问题考虑进去,否则在系统制作后,浏览器和顶区图片的图案不能衔接)、四区、一区、二区、三区和底区。

 

芷苑模板制作全图解 - 天高云淡 -        天高云淡

点击图片可查看全图 

        存储后的切片会以images的文件形式存在。

        以下是保存后《灌木精灵》切片图:           

芷苑模板制作全图解 - 天高云淡 -        天高云淡 浏览器

 

芷苑模板制作全图解 - 天高云淡 -        天高云淡

顶区1

芷苑模板制作全图解 - 天高云淡 -        天高云淡

顶区2

芷苑模板制作全图解 - 天高云淡 -        天高云淡

导航条

芷苑模板制作全图解 - 天高云淡 -        天高云淡

四区

芷苑模板制作全图解 - 天高云淡 -        天高云淡

二区

芷苑模板制作全图解 - 天高云淡 -        天高云淡

三区

芷苑模板制作全图解 - 天高云淡 -        天高云淡

一区

芷苑模板制作全图解 - 天高云淡 -        天高云淡

底区

芷苑模板制作全图解 - 天高云淡 -        天高云淡

浏览器

 点击图片可查看全图

 

        步骤四:细节的处理

        由于《灌木精灵》模板是按顶部全屏模式设计的,因此必须考虑浏览器图片和各区图片图案的衔接问题。

        1、前面在切片的时候已经将顶区图案的衔接问题解决了,也就是在顶区插入图片的时候,只需要将顶区2插入就可以了。

        2、三区图片的处理,三区图片在页面延伸的过程中,会自动垂直平铺,那么为了延伸的背景可以和浏览器背景的图案同步延伸,我们就需要将浏览器的图案在做一下处理。

        处理方法:在PS中打开三区图片,以图片顶部为裁切起点,利用裁切工具将三区图片进行裁切,裁切尺寸为:宽度尺寸不变,高度设置为1200px,也就是一个完整的循环画面。

        处理后的三区图片如图:

芷苑模板制作全图解 - 天高云淡 -        天高云淡

三区(点击图片可查看全图)       

         3、在系统插入三区图片的时候自然是插入修改后的图片了。这样无论图片怎么样延伸,浏览器图片和中区图片的图案都不会错位了。当然在系统中设置浏览器的时候,就要设置为随页面滚动了。

        4、在《灌木精灵》模板的顶区中,小芷还将顶区的图片重新在PS中制作了一下,添加了几只会动的蝴蝶。其实,还有一种简单方法。就是在系统中插入顶区图片的时候,将顶区的图片换成透明背景的动画图片,一样有不错的效果哦!小芷之所以在PS中在制作,是因为想把蝴蝶定位在设定的位置上,系统的几个方位都不是很合适。

        看看制作后的顶区2效果,是不是漂亮些了。

芷苑模板制作全图解 - 天高云淡 -        天高云淡

 点击图片可查看全图

         终于到了最后了,不知大家学会了么?再接下来就是在系统中制作了,如果有不清楚的朋友可以参考一下小芷的另一篇教程。 

【原创】芷苑模版制作全图解(一) 

        此文模板已在系统中制作,有喜欢的朋友可点击图片直接分享。

芷苑模板制作全图解 - 天高云淡 -        天高云淡

点击图片查看模板效果 

          以下是小芷制作的一些模板,分享所有模板请点击: 

【原创】芷苑模板集锦  

 

 

  此教程欢迎大家的分享引用,希望各位朋友引用时,尊重小芷的劳动果实,不要删掉出处。本文也会不时的更新,请分享了的朋友经常关注,如更新请重新引用一下。谢谢!

        引用方法:点击文章下方的分享,然后点引用到我的博客就可以了。

        查看此文更新链接:

http://style8899.blog.163.com/blog/static/59255188200842743230793/

          

 

 

 上一篇:【演示】博客中添加计数器

下一篇:【演示】博客中添加门铃响声

相关教程:【原创】芷苑模版制作全图解(一)        

 【原创】芷苑模版制作全图解(二)

其他教程:【原创】芷苑竹简画制作全图解                     

 

          

芷苑模板制作全图解 - 天高云淡 -        天高云淡

芷苑模板制作全图解 - 天高云淡 -        天高云淡芷苑模板制作全图解 - 天高云淡 -        天高云淡芷苑模板制作全图解 - 天高云淡 -        天高云淡   

  

 

图片素材出自网络

芷苑模板制作全图解 - 天高云淡 -        天高云淡

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

历史上的今天

评论

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

页脚

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