芷苑模板制作全圖解（三）
全屏模板《灌木精靈》制作過程
http://style8899.blog.163.com音畫整理：芷
文：芷
說到模板教程，這應該是小芷的第三篇了。
第一篇
《芷苑模版制作全圖解（一）》主要介紹的是，在系統(tǒng)中制作模板的過程。
第二篇
《芷苑模版制作全圖解（二）》主要介紹的是，如何巧妙的運用QQ、Photoshop、Dreamweaver三個軟件，怎樣將三個軟件結合起來制作模板。
當教程
《芷苑模版制作全圖解（二）》發(fā)出后，很多朋友誤認為，只能用這三個工具才能制作模板，其實不然。
此文以小芷剛做出的一款全屏模板《灌木精靈》為素材，將如何運用Photoshop（以下簡稱PS）制作全屏模板的方法介紹一下，為方便理解，還是用圖解的方式。
制作素材：
素材1
素材分析：
由于圖片素材的像素為寬600px，高600px，那么與系統(tǒng)要求的寬1004px相差很多，我們就只能采用拼接的方式處理了，雖然系統(tǒng)有水平平鋪和垂直平鋪的設置，但是顯示出來的效果很雜亂，如果想要最后全屏無縫的效果就更不容易了，所以我們第一步就從素材1拼接處理開始。
全屏版面分析：小芷使用的顯示器的分辨率是1440*900像素，為了符合全屏顯示的要求，將瀏覽器圖片寬度的像素設置為1440px，配合無縫拼接，高度設置為2400px（這個高度是根據(jù)圖片本身的畫面來設置的）。
下面就按步驟來詳細介紹一下模板《灌木精靈》制作的全過程。
步驟一：拼接素材、制作瀏覽器
在PS打開素材1，新建一個寬1440px，高2400px的文檔，命名為《灌木精靈》。屬性如圖：
1、在圖層窗口雙擊素材1 解鎖，然后利用移動工具將素材1移動到新建的文檔《灌木精靈》中。
2、回到素材1，點擊菜單欄的圖像——旋轉畫布——水平翻轉，將翻轉后的素材1利用移動工具移動到文檔《灌木精靈》中。如同樣方式執(zhí)行圖像——旋轉畫布——垂直翻轉，移動翻轉后的素材1到《灌木精靈》中，再將垂直翻轉后的素材1執(zhí)行圖像——旋轉畫布——水平翻轉，同樣移動到《灌木精靈》中。這時文檔《灌木精靈》中就有四個新增加的圖層了，而且是四個畫面不同方向素材1?，F(xiàn)在我們就將這四個圖層進行拼接處理。
拼接方法：點進移動工具，在菜單欄的顯示界定框出打上勾 ，然后點擊圖片會出現(xiàn)圖片的界定框，在界定框上點擊一下，屬性欄就會在菜單欄顯示，這時只需要將屬性欄中的數(shù)值調整到圖片之間的無縫狀態(tài)就可以了。最后確定無誤后將四個圖層合并。
合并圖層的方法：一般有兩種，一種是關掉背景層的眼睛，然后確定圖層顯示欄中只剩下需要合并的圖層后，點擊圖層——合并可見圖層合并圖層（這種方法適合在圖層比較少的情況下使用）。另一種是，確定需合并的圖層為上下層關系后，點擊圖層——向下合并圖層，依次將圖層合并。
3、將拼接后的圖層復制三層，用同樣的方法拼接、合并。這時拼接后的圖層寬度為2400px（這樣拼接是為了瀏覽器畫面顯示的對稱協(xié)調），遠遠大于背景了，利用移動工具將圖層居中。
居中方法：高度調整固定后，將兩側超出背景圖層的邊緣的部分拉回到背景邊框，然后將屬性欄寬度百分比調整回100%，這樣圖片自然就居中了，高度居中方法一致，不過最后是調整高度百分比哦!
此圖為第一次合并的屬性
拼接效果如下：
點擊圖片可查看全圖
這樣圖片拼接就完成了，我們可以把拼接好的圖片運用于系統(tǒng)制作中的瀏覽器圖片，保存為JPEG格式備用，命名為瀏覽器1。但考慮到在頁面加載時，圖片像素越小打開的速度就越快，那么我們還需要將拼接好的圖片再進行一下處理。
處理方法：在PS中將保存為JPEG格式的瀏覽器1打開，利用裁切工具將瀏覽器1裁切為一個完整的循環(huán)畫面，裁切后的尺寸為：寬1440px，高1200px。保存命名為瀏覽器2備用。
裁切后的瀏覽器2效果：
點擊圖片可查看全圖
步驟二：制作主圖
1、回到主文檔《灌木精靈》中，新建圖層，將前景色設置為#4B3B23，利用圓角矩形工具在新建圖層中拉出一個寬1004px，高度1750px的圓角矩形框。（高度尺寸在后面還將根據(jù)需要調整）
屬性如圖：
2、對圓角矩形框進行圖層樣式設置，除內發(fā)光的設置為默認，其余各項屬性設置如圖：
設置后的《灌木精靈》效果如下圖：
點擊圖片可查看全圖
3、到了這一步，模板的基本框架就出來了，下面根據(jù)個人的愛好，對模板進行一下修飾，在《灌木精靈》模板中主要修飾的部分有三處：按鈕的修飾、4區(qū)修飾、底區(qū)的修飾。
按鈕修飾
按鈕制作方法 ：
很多朋友曾經問過小芷，模板上那些漂亮的按鈕是怎么樣制作的？怎樣定位按鈕的位置？那么帶著這兩個問題，小芷就將按鈕的制作過程一并介紹一下。
（1）、按鈕素材的選擇
根據(jù)模板畫面的特點和個人喜好，選擇和畫面色彩接近、諧調的圖案。小芷一般都是就地取材，直接在素材1中選擇一處圖案填充，這樣既方便又快捷，呵呵！以下是用從素材1中選取的圖案，做一個演示，相信大家一看就明白了。
（2）、將按鈕素材設置為定義圖案
定義圖案方法：確定選定的圖案為當前操作文檔時，點擊菜單中的編輯——定義圖案，出現(xiàn)一個對話框，將圖案命名后就可以關掉文檔了。
如圖：
（3）、回到《灌木精靈》主文檔中，新建圖層。利用橢圓工具（這里可根據(jù)喜好選擇工具形狀），將前景色設置為#4D3C24，在新建圖層中拉出一個橢圓形狀的圖案，橢圓的大小可根據(jù)按鈕的大小調整。然后利用魔棒工具在橢圓上點擊一下，這時橢圓周圍就會出現(xiàn)一個選定框，然后點擊編輯——填充——選擇自定義的圖案“花”填充。
如圖：
（4）、將填充好的橢圓進行圖層樣式設置
如圖：
（5）、新建圖層，前景色設置為#4D3C24，同前面一樣操作，在填充好的橢圓居中位置再畫出一個較小的橢圓，調整圖層透明度為90%，設置圖層樣式。
如圖：
（6）、合并兩個橢圓的圖層，這樣一個橢圓形的按鈕也就做好了。當然，想要按鈕更漂亮，還可以在橢圓的周圍添加一些裝飾。
添加裝飾的按鈕圖示：
由于《灌木精靈》的頂區(qū)已經比較多花草了，就沒有繼續(xù)修飾了。
（7）、將做好的按鈕復制六個圖層，定位按鈕。
按鈕位置的定位方法：水平位置按鈕之間的距離為等距離設置，系統(tǒng)導航欄的文字是可以根據(jù)按鈕位置調節(jié)，這里注意的是，垂直定位的問題，根據(jù)小芷以往制作模板的經驗，只要頂區(qū)、導航區(qū)設置的圖片高度都為滿數(shù)據(jù)設置的話，按鈕的位置應該距界定框頂部距離為497.5px，當然這個數(shù)據(jù)也要根據(jù)按鈕的大小稍微調整。
四區(qū)修飾：
（1）、新建圖層，利用矩形選框工具，在距頂部550px處向下居中選定一個矩形框，矩形框的大小為寬：1004px，高100px，也就是系統(tǒng)四區(qū)的大小。
（2）、切換到瀏覽器1圖層，利用仿制圖章工具在矩形框內，左手按住Alt鍵，右鍵居中位置選定圖案仿制源后點擊。
（3）、切換到圓角矩形框圖層為操作層，在選定框內居中位置仿制涂抹，這樣選定框內的圖層就被復制的圖案代替了。
（4）、在四區(qū)添加一些文字，進行修。
按鈕、四區(qū)修飾后的《灌木精靈》效果：
點擊圖片可查看全圖
底區(qū)的修飾：
（1）、如同四區(qū)修飾一樣，新建圖層，利用矩形選框工具，在底區(qū)的圓角矩形框內設定一個寬為1004px，高為260px的矩形選框。
（2）、切換到瀏覽器1圖層，利用仿制圖章工具在瀏覽器1圖層中選擇合適的圖案做為仿制源，左手按住Alt鍵，右鍵居中選定圖案點擊。
（3）、切換到圓角矩形框圖層為操作層，在選定框內居中位置仿制涂抹，這樣選定框的圖層就被復制的圖案代替了。
（4）、繼續(xù)在底區(qū)復制好的圖案二分之一處，利用矩形選框工具，矩形選框的大小根據(jù)圖案倒置部分的大小設定，目的是將倒置的圖案制作處水中波紋的效果。選框一定不要將圓角的粉色邊框選入哦！否則邊框會變形的。選框設定好后，執(zhí)行濾鏡——扭曲——水波命令。
屬性如圖：
底區(qū)修飾后的《灌木精靈》效果：
點擊圖片可查看全圖
做到這里，模板主圖基本就完成了，下面一個步驟就是利用切片工具切片保存了。
步驟三：切片保存
點擊工具欄中的切片工具，按照系統(tǒng)的要求將模板進行切片，切片成瀏覽器（為了更好的顯示，在前面已經制作了全屏的瀏覽器2，所以切片部分的瀏覽器圖片可以不使用了）、頂區(qū)（這里值得注意的是，由于系統(tǒng)頂端已經設置了一個寬為1004px，高為30px的按鈕，那么我們在切片的時候需要將這個問題考慮進去，否則在系統(tǒng)制作后，瀏覽器和頂區(qū)圖片的圖案不能銜接）、四區(qū)、一區(qū)、二區(qū)、三區(qū)和底區(qū)。
點擊圖片可查看全圖
存儲后的切片會以images的文件形式存在。
以下是保存后《灌木精靈》切片圖：
瀏覽器
頂區(qū)1
頂區(qū)2
導航條
四區(qū)
二區(qū)
三區(qū)
一區(qū)
底區(qū)
瀏覽器
點擊圖片可查看全圖
步驟四：細節(jié)的處理
由于《灌木精靈》模板是按頂部全屏模式設計的，因此必須考慮瀏覽器圖片和各區(qū)圖片圖案的銜接問題。
1、前面在切片的時候已經將頂區(qū)圖案的銜接問題解決了，也就是在頂區(qū)插入圖片的時候，只需要將頂區(qū)2插入就可以了。
2、三區(qū)圖片的處理，三區(qū)圖片在頁面延伸的過程中，會自動垂直平鋪，那么為了延伸的背景可以和瀏覽器背景的圖案同步延伸，我們就需要將瀏覽器的圖案在做一下處理。
處理方法：在PS中打開三區(qū)圖片，以圖片頂部為裁切起點，利用裁切工具將三區(qū)圖片進行裁切，裁切尺寸為：寬度尺寸不變，高度設置為1200px，也就是一個完整的循環(huán)畫面。
處理后的三區(qū)圖片如圖：
三區(qū)（點擊圖片可查看全圖）
3、在系統(tǒng)插入三區(qū)圖片的時候自然是插入修改后的圖片了。這樣無論圖片怎么樣延伸，瀏覽器圖片和中區(qū)圖片的圖案都不會錯位了。當然在系統(tǒng)中設置瀏覽器的時候，就要設置為隨頁面滾動了。
4、在《灌木精靈》模板的頂區(qū)中，小芷還將頂區(qū)的圖片重新在PS中制作了一下，添加了幾只會動的蝴蝶。其實，還有一種簡單方法。就是在系統(tǒng)中插入頂區(qū)圖片的時候，將頂區(qū)的圖片換成透明背景的動畫圖片，一樣有不錯的效果哦！小芷之所以在PS中在制作，是因為想把蝴蝶定位在設定的位置上，系統(tǒng)的幾個方位都不是很合適。
看看制作后的頂區(qū)2效果，是不是漂亮些了。
點擊圖片可查看全圖
終于到了最后了，不知大家學會了么？再接下來就是在系統(tǒng)中制作了，如果有不清楚的朋友可以參考一下小芷的另一篇教程。
【原創(chuàng)】芷苑模版制作全圖解（一）此文模板已在系統(tǒng)中制作，有喜歡的朋友可點擊圖片直接分享。
點擊圖片查看模板效果
以下是小芷制作的一些模板，分享所有模板請點擊：
【原創(chuàng)】芷苑模板集錦此教程歡迎大家的分享引用，希望各位朋友引用時，尊重小芷的勞動果實，不要刪掉出處。本文也會不時的更新，請分享了的朋友經常關注，如更新請重新引用一下。謝謝！
引用方法：點擊文章下方的分享，然后點引用到我的博客就可以了。
查看此文更新鏈接：
http://style8899.blog.163.com/blog/static/59255188200842743230793/ 上一篇：【演示】博客中添加計數(shù)器下一篇：【演示】博客中添加門鈴響聲相關教程：
【原創(chuàng)】芷苑模版制作全圖解（一）【原創(chuàng)】芷苑模版制作全圖解（二）其他教程：
【原創(chuàng)】芷苑竹簡畫制作全圖解配樂：黑玫瑰（愛爾蘭風笛）
圖片素材出自網絡
