說到模板教程，這應(yīng)該是小芷的第三篇了。

        第一篇《芷苑模版制作全圖解（一）》主要介紹的是，在系統(tǒng)中制作模板的過程。

        第二篇《芷苑模版制作全圖解（二）》主要介紹的是，如何巧妙的運(yùn)用QQ、Photoshop、Dreamweaver三個(gè)軟件，怎樣將三個(gè)軟件結(jié)合起來制作模板。

        當(dāng)教程《芷苑模版制作全圖解（二）》發(fā)出后，很多朋友誤認(rèn)為，只能用這三個(gè)工具才能制作模板，其實(shí)不然。

         此文以小芷剛做出的一款全屏模板《灌木精靈》為素材，將如何運(yùn)用Photoshop（以下簡稱PS）制作全屏模板的方法介紹一下，為方便理解，還是用圖解的方式。 

        制作素材：

素材1  

        由于圖片素材的像素為寬600px，高600px，那么與系統(tǒng)要求的寬1004px相差很多，我們就只能采用拼接的方式處理了，雖然系統(tǒng)有水平平鋪和垂直平鋪的設(shè)置，但是顯示出來的效果很雜亂，如果想要最后全屏無縫的效果就更不容易了，所以我們第一步就從素材1拼接處理開始。

        全屏版面分析：小芷使用的顯示器的分辨率是1440*900像素，為了符合全屏顯示的要求，將瀏覽器圖片寬度的像素設(shè)置為1440px，配合無縫拼接，高度設(shè)置為2400px（這個(gè)高度是根據(jù)圖片本身的畫面來設(shè)置的）。

       下面就按步驟來詳細(xì)介紹一下模板《灌木精靈》制作的全過程。

        步驟一：拼接素材、制作瀏覽器

        在PS打開素材1，新建一個(gè)寬1440px，高2400px的文檔，命名為《灌木精靈》。屬性如圖：

        1、在圖層窗口雙擊素材1 解鎖，然后利用移動(dòng)工具將素材1移動(dòng)到新建的文檔《灌木精靈》中。

        2、回到素材1，點(diǎn)擊菜單欄的圖像——旋轉(zhuǎn)畫布——水平翻轉(zhuǎn)，將翻轉(zhuǎn)后的素材1利用移動(dòng)工具移動(dòng)到文檔《灌木精靈》中。如同樣方式執(zhí)行圖像——旋轉(zhuǎn)畫布——垂直翻轉(zhuǎn)，移動(dòng)翻轉(zhuǎn)后的素材1到《灌木精靈》中，再將垂直翻轉(zhuǎn)后的素材1執(zhí)行圖像——旋轉(zhuǎn)畫布——水平翻轉(zhuǎn)，同樣移動(dòng)到《灌木精靈》中。這時(shí)文檔《灌木精靈》中就有四個(gè)新增加的圖層了，而且是四個(gè)畫面不同方向素材1。現(xiàn)在我們就將這四個(gè)圖層進(jìn)行拼接處理。

        拼接方法：點(diǎn)進(jìn)移動(dòng)工具，在菜單欄的顯示界定框出打上勾  ，然后點(diǎn)擊圖片會(huì)出現(xiàn)圖片的界定框，在界定框上點(diǎn)擊一下，屬性欄就會(huì)在菜單欄顯示，這時(shí)只需要將屬性欄中的數(shù)值調(diào)整到圖片之間的無縫狀態(tài)就可以了。最后確定無誤后將四個(gè)圖層合并。

        合并圖層的方法：一般有兩種，一種是關(guān)掉背景層的眼睛，然后確定圖層顯示欄中只剩下需要合并的圖層后，點(diǎn)擊圖層——合并可見圖層合并圖層（這種方法適合在圖層比較少的情況下使用）。另一種是，確定需合并的圖層為上下層關(guān)系后，點(diǎn)擊圖層——向下合并圖層，依次將圖層合并。

        3、將拼接后的圖層復(fù)制三層，用同樣的方法拼接、合并。這時(shí)拼接后的圖層寬度為2400px（這樣拼接是為了瀏覽器畫面顯示的對(duì)稱協(xié)調(diào)），遠(yuǎn)遠(yuǎn)大于背景了，利用移動(dòng)工具將圖層居中。

        居中方法：高度調(diào)整固定后，將兩側(cè)超出背景圖層的邊緣的部分拉回到背景邊框，然后將屬性欄寬度百分比調(diào)整回100%，這樣圖片自然就居中了，高度居中方法一致，不過最后是調(diào)整高度百分比哦!

此圖為第一次合并的屬性

        拼接效果如下：

點(diǎn)擊圖片可查看全圖

        這樣圖片拼接就完成了，我們可以把拼接好的圖片運(yùn)用于系統(tǒng)制作中的瀏覽器圖片，保存為JPEG格式備用，命名為瀏覽器1。但考慮到在頁面加載時(shí)，圖片像素越小打開的速度就越快，那么我們還需要將拼接好的圖片再進(jìn)行一下處理。

        處理方法：在PS中將保存為JPEG格式的瀏覽器1打開，利用裁切工具將瀏覽器1裁切為一個(gè)完整的循環(huán)畫面，裁切后的尺寸為：寬1440px，高1200px。保存命名為瀏覽器2備用。

        裁切后的瀏覽器2效果：

點(diǎn)擊圖片可查看全圖

        步驟二：制作主圖    

        1、回到主文檔《灌木精靈》中，新建圖層，將前景色設(shè)置為#4B3B23，利用圓角矩形工具在新建圖層中拉出一個(gè)寬1004px，高度1750px的圓角矩形框。（高度尺寸在后面還將根據(jù)需要調(diào)整）

        屬性如圖：

        2、對(duì)圓角矩形框進(jìn)行圖層樣式設(shè)置，除內(nèi)發(fā)光的設(shè)置為默認(rèn)，其余各項(xiàng)屬性設(shè)置如圖：        

        設(shè)置后的《灌木精靈》效果如下圖： 

點(diǎn)擊圖片可查看全圖

        3、到了這一步，模板的基本框架就出來了，下面根據(jù)個(gè)人的愛好，對(duì)模板進(jìn)行一下修飾，在《灌木精靈》模板中主要修飾的部分有三處：按鈕的修飾、4區(qū)修飾、底區(qū)的修飾。

        按鈕修飾

        按鈕制作方法 ：

        很多朋友曾經(jīng)問過小芷，模板上那些漂亮的按鈕是怎么樣制作的？怎樣定位按鈕的位置？那么帶著這兩個(gè)問題，小芷就將按鈕的制作過程一并介紹一下。

       （1）、按鈕素材的選擇

        根據(jù)模板畫面的特點(diǎn)和個(gè)人喜好，選擇和畫面色彩接近、諧調(diào)的圖案。小芷一般都是就地取材，直接在素材1中選擇一處圖案填充，這樣既方便又快捷，呵呵！以下是用從素材1中選取的圖案，做一個(gè)演示，相信大家一看就明白了。

        （2）、將按鈕素材設(shè)置為定義圖案

         定義圖案方法：確定選定的圖案為當(dāng)前操作文檔時(shí)，點(diǎn)擊菜單中的編輯——定義圖案，出現(xiàn)一個(gè)對(duì)話框，將圖案命名后就可以關(guān)掉文檔了。

         如圖：

        （3）、回到《灌木精靈》主文檔中，新建圖層。利用橢圓工具（這里可根據(jù)喜好選擇工具形狀），將前景色設(shè)置為#4D3C24，在新建圖層中拉出一個(gè)橢圓形狀的圖案，橢圓的大小可根據(jù)按鈕的大小調(diào)整。然后利用魔棒工具在橢圓上點(diǎn)擊一下，這時(shí)橢圓周圍就會(huì)出現(xiàn)一個(gè)選定框，然后點(diǎn)擊編輯——填充——選擇自定義的圖案“花”填充。

        如圖：

        （4）、將填充好的橢圓進(jìn)行圖層樣式設(shè)置

         如圖： 

        （5）、新建圖層，前景色設(shè)置為#4D3C24，同前面一樣操作，在填充好的橢圓居中位置再畫出一個(gè)較小的橢圓，調(diào)整圖層透明度為90%，設(shè)置圖層樣式。

          如圖：      

        （6）、合并兩個(gè)橢圓的圖層，這樣一個(gè)橢圓形的按鈕也就做好了。當(dāng)然，想要按鈕更漂亮，還可以在橢圓的周圍添加一些裝飾。

        添加裝飾的按鈕圖示：           由于《灌木精靈》的頂區(qū)已經(jīng)比較多花草了，就沒有繼續(xù)修飾了。

         （7）、將做好的按鈕復(fù)制六個(gè)圖層，定位按鈕。

         按鈕位置的定位方法：水平位置按鈕之間的距離為等距離設(shè)置，系統(tǒng)導(dǎo)航欄的文字是可以根據(jù)按鈕位置調(diào)節(jié)，這里注意的是，垂直定位的問題，根據(jù)小芷以往制作模板的經(jīng)驗(yàn)，只要頂區(qū)、導(dǎo)航區(qū)設(shè)置的圖片高度都為滿數(shù)據(jù)設(shè)置的話，按鈕的位置應(yīng)該距界定框頂部距離為497.5px，當(dāng)然這個(gè)數(shù)據(jù)也要根據(jù)按鈕的大小稍微調(diào)整。  

          四區(qū)修飾：

        （1）、新建圖層，利用矩形選框工具，在距頂部550px處向下居中選定一個(gè)矩形框，矩形框的大小為寬：1004px，高100px，也就是系統(tǒng)四區(qū)的大小。

        （2）、切換到瀏覽器1圖層，利用仿制圖章工具在矩形框內(nèi)，左手按住Alt鍵，右鍵居中位置選定圖案仿制源后點(diǎn)擊。

         （3）、切換到圓角矩形框圖層為操作層，在選定框內(nèi)居中位置仿制涂抹，這樣選定框內(nèi)的圖層就被復(fù)制的圖案代替了。

         （4）、在四區(qū)添加一些文字，進(jìn)行修。

            按鈕、四區(qū)修飾后的《灌木精靈》效果： 

 點(diǎn)擊圖片可查看全圖

        底區(qū)的修飾：

       （1）、如同四區(qū)修飾一樣，新建圖層，利用矩形選框工具，在底區(qū)的圓角矩形框內(nèi)設(shè)定一個(gè)寬為1004px，高為260px的矩形選框。

        （2）、切換到瀏覽器1圖層，利用仿制圖章工具在瀏覽器1圖層中選擇合適的圖案做為仿制源，左手按住Alt鍵，右鍵居中選定圖案點(diǎn)擊。

        （3）、切換到圓角矩形框圖層為操作層，在選定框內(nèi)居中位置仿制涂抹，這樣選定框的圖層就被復(fù)制的圖案代替了。

        （4）、繼續(xù)在底區(qū)復(fù)制好的圖案二分之一處，利用矩形選框工具，矩形選框的大小根據(jù)圖案倒置部分的大小設(shè)定，目的是將倒置的圖案制作處水中波紋的效果。選框一定不要將圓角的粉色邊框選入哦！否則邊框會(huì)變形的。選框設(shè)定好后，執(zhí)行濾鏡——扭曲——水波命令。

         屬性如圖：

        底區(qū)修飾后的《灌木精靈》效果： 

點(diǎn)擊圖片可查看全圖

        做到這里，模板主圖基本就完成了，下面一個(gè)步驟就是利用切片工具切片保存了。

        步驟三：切片保存

        點(diǎn)擊工具欄中的切片工具，按照系統(tǒng)的要求將模板進(jìn)行切片，切片成瀏覽器（為了更好的顯示，在前面已經(jīng)制作了全屏的瀏覽器2，所以切片部分的瀏覽器圖片可以不使用了）、頂區(qū)（這里值得注意的是，由于系統(tǒng)頂端已經(jīng)設(shè)置了一個(gè)寬為1004px，高為30px的按鈕，那么我們?cè)谇衅臅r(shí)候需要將這個(gè)問題考慮進(jìn)去，否則在系統(tǒng)制作后，瀏覽器和頂區(qū)圖片的圖案不能銜接）、四區(qū)、一區(qū)、二區(qū)、三區(qū)和底區(qū)。

點(diǎn)擊圖片可查看全圖 

        存儲(chǔ)后的切片會(huì)以images的文件形式存在。

        以下是保存后《灌木精靈》切片圖：           

 點(diǎn)擊圖片可查看全圖

        步驟四：細(xì)節(jié)的處理

        由于《灌木精靈》模板是按頂部全屏模式設(shè)計(jì)的，因此必須考慮瀏覽器圖片和各區(qū)圖片圖案的銜接問題。

        1、前面在切片的時(shí)候已經(jīng)將頂區(qū)圖案的銜接問題解決了，也就是在頂區(qū)插入圖片的時(shí)候，只需要將頂區(qū)2插入就可以了。

        2、三區(qū)圖片的處理，三區(qū)圖片在頁面延伸的過程中，會(huì)自動(dòng)垂直平鋪，那么為了延伸的背景可以和瀏覽器背景的圖案同步延伸，我們就需要將瀏覽器的圖案在做一下處理。

        處理方法：在PS中打開三區(qū)圖片，以圖片頂部為裁切起點(diǎn)，利用裁切工具將三區(qū)圖片進(jìn)行裁切，裁切尺寸為：寬度尺寸不變，高度設(shè)置為1200px，也就是一個(gè)完整的循環(huán)畫面。

        處理后的三區(qū)圖片如圖：

三區(qū)（點(diǎn)擊圖片可查看全圖）       

         3、在系統(tǒng)插入三區(qū)圖片的時(shí)候自然是插入修改后的圖片了。這樣無論圖片怎么樣延伸，瀏覽器圖片和中區(qū)圖片的圖案都不會(huì)錯(cuò)位了。當(dāng)然在系統(tǒng)中設(shè)置瀏覽器的時(shí)候，就要設(shè)置為隨頁面滾動(dòng)了。

        4、在《灌木精靈》模板的頂區(qū)中，小芷還將頂區(qū)的圖片重新在PS中制作了一下，添加了幾只會(huì)動(dòng)的蝴蝶。其實(shí)，還有一種簡單方法。就是在系統(tǒng)中插入頂區(qū)圖片的時(shí)候，將頂區(qū)的圖片換成透明背景的動(dòng)畫圖片，一樣有不錯(cuò)的效果哦！小芷之所以在PS中在制作，是因?yàn)橄氚押ㄎ辉谠O(shè)定的位置上，系統(tǒng)的幾個(gè)方位都不是很合適。

        看看制作后的頂區(qū)2效果，是不是漂亮些了。

 點(diǎn)擊圖片可查看全圖

         終于到了最后了，不知大家學(xué)會(huì)了么？再接下來就是在系統(tǒng)中制作了，如果有不清楚的朋友可以參考一下小芷的另一篇教程。 

【原創(chuàng)】芷苑模版制作全圖解（一） 

        此文模板已在系統(tǒng)中制作，有喜歡的朋友可點(diǎn)擊圖片直接分享。

點(diǎn)擊圖片查看模板效果 

          以下是小芷制作的一些模板，分享所有模板請(qǐng)點(diǎn)擊： 

【原創(chuàng)】芷苑模板集錦  

  此教程歡迎大家的分享引用，希望各位朋友引用時(shí)，尊重小芷的勞動(dòng)果實(shí)，不要?jiǎng)h掉出處。本文也會(huì)不時(shí)的更新，請(qǐng)分享了的朋友經(jīng)常關(guān)注，如更新請(qǐng)重新引用一下。謝謝！

        引用方法：點(diǎn)擊文章下方的分享，然后點(diǎn)引用到我的博客就可以了。

        查看此文更新鏈接：

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

 上一篇：【演示】博客中添加計(jì)數(shù)器

下一篇：【演示】博客中添加門鈴響聲

相關(guān)教程：【原創(chuàng)】芷苑模版制作全圖解（一）        

 【原創(chuàng)】芷苑模版制作全圖解（二）

其他教程：【原創(chuàng)】芷苑竹簡畫制作全圖解