|
说到模板教程，这应该是小芷的第三篇了。
第一篇《芷苑模版制作全图解（一）》主要介绍的是，在系统中制作模板的过程。
第二篇《芷苑模版制作全图解（二）》主要介绍的是，如何巧妙的运用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插入就可以了。
2、三区图片的处理，三区图片在页面延伸的过程中，会自动垂直平铺，那么为了延伸的背景可以和浏览器背景的图案同步延伸，我们就需要将浏览器的图案在做一下处理。
处理方法：在PS中打开三区图片，以图片顶部为裁切起点，利用裁切工具将三区图片进行裁切，裁切尺寸为：宽度尺寸不变，高度设置为1200px，也就是一个完整的循环画面。
处理后的三区图片如图：
三区（点击图片可查看全图）
3、在系统插入三区图片的时候自然是插入修改后的图片了。这样无论图片怎么样延伸，浏览器图片和中区图片的图案都不会错位了。当然在系统中设置浏览器的时候，就要设置为随页面滚动了。
4、在《灌木精灵》模板的顶区中，小芷还将顶区的图片重新在PS中制作了一下，添加了几只会动的蝴蝶。其实，还有一种简单方法。就是在系统中插入顶区图片的时候，将顶区的图片换成透明背景的动画图片，一样有不错的效果哦！小芷之所以在PS中在制作，是因为想把蝴蝶定位在设定的位置上，系统的几个方位都不是很合适。
看看制作后的顶区2效果，是不是漂亮些了。
点击图片可查看全图
终于到了最后了，不知大家学会了么？再接下来就是在系统中制作了，如果有不清楚的朋友可以参考一下小芷的另一篇教程。
【原创】芷苑模版制作全图解（一）
此文模板已在系统中制作，有喜欢的朋友可点击图片直接分享。
点击图片查看模板效果
以下是小芷制作的一些模板，分享所有模板请点击：
【原创】芷苑模板集锦
此教程欢迎大家的分享引用，希望各位朋友引用时，尊重小芷的劳动果实，不要删掉出处。本文也会不时的更新，请分享了的朋友经常关注，如更新请重新引用一下。谢谢！
引用方法：点击文章下方的分享，然后点引用到我的博客就可以了。
查看此文更新链接：
http://style8899.blog.163.com/blog/static/59255188200842743230793/
上一篇：【演示】博客中添加计数器
下一篇：【演示】博客中添加门铃响声
相关教程：【原创】芷苑模版制作全图解（一）
【原创】芷苑模版制作全图解（二）
其他教程：【原创】芷苑竹简画制作全图解
| 
评论