博客模版制作全圖解
巧用QQ、Photoshop、Dreamweaver
寫這個教程之前，首先要說明一下，小芷不是專業(yè)的制作人，只是個人愛好。這里，將個人摸索學習的心得，用圖解的方式寫出來，希望大家能在小芷笨拙的筆下學會一些基本的模板制作。
制作之前，首先要準備3個工具：
1、截圖工具（建議使用QQ截圖）
2、Photoshop圖片處理軟件（以下簡稱PS）
3、Dreamweaver網(wǎng)頁制作軟件（以下簡稱DW）
正所謂“巧婦難為無米之炊”，光有工具是不行的，想要制做出漂亮的模板，素材的收集是非常重要的，這也是小芷最覺得最花時間的事了，網(wǎng)絡圖片千千萬，真要找到自己喜歡的可要費點心思。
三種（背景和邊框當然也可以自己制作）。如果想要模板裝飾的更漂亮，還可以找一些漂亮的分割線。
小芷用以下的幾張素材，用圖文方式教大家，完成一個簡易的模板。寫的有點繁瑣，主要是針對沒有太多制作基礎朋友，請大家耐心的看完，相信多少會有點收獲的。
頂區(qū)主圖
根據(jù)系統(tǒng)的設置，一個模板分為：瀏覽器、頂區(qū)、導航條、4區(qū)、2區(qū)、3區(qū)、1區(qū)和底區(qū)八個部分。要想做出的模板切片符合系統(tǒng)的要求，尺寸的大小就尤為重要了，網(wǎng)易系統(tǒng)要求的圖片最大尺寸數(shù)據(jù)如下（寬*高）：頂區(qū)（1004PX*450PX），導航條（1004PX*100PX），4區(qū)（1004PX*100PX），底區(qū)（1004PX*800PX）這些數(shù)據(jù)中，寬是不能改變的，高只能小于不能大于。1區(qū)、2區(qū)、3區(qū)寬度為1004PX，在高度上沒有要求，但要注意一點的是3區(qū)縮進的問題，如果模板不做邊框的話，就不用考慮，3區(qū)的縮進最大尺寸為50PX，這里也就意味著邊框的寬度尺寸不要大于50px，如果超過的話，在你設置模板邊框的時候，邊框線將覆蓋在邊框上，影響美觀。小芷一般把邊框控制在40PX以內(nèi)。
很多朋友問，怎么圖片完成，上傳到模板制作系統(tǒng)后，頂區(qū)、導航和4區(qū)之間會出現(xiàn)縫隙，這是由于在制作圖片的時候都是分開制作保存的，要想避免不合縫的問題，就需要圖片在PS制作完成切片后，以Web格式保存。（小芷后面再具體介紹）
這樣，我們需把頂區(qū)、導航條、4區(qū)在一張圖片上完成，圖片背景最大尺寸為寬1004PX、總高度650PX。1區(qū)、2區(qū)、3區(qū)在一張圖上完成，底區(qū)和瀏覽器可以單獨完成。
插入表格時，首先設置表格的寬度（1004PX），表格的寬度直接影響模板的寬度。對齊的方式選擇頂端對齊。將表格的高度設置為800PX以上，這樣背景做好后便于QQ截圖。間距是根據(jù)自己的需要來設置的，數(shù)字越大邊框就越寬（這里別忘記考慮3區(qū)的縮進問題），填充和邊框都可以根據(jù)自己的喜好設置，方法同間距設置要求一樣，小芷在這里就不一一介紹了。屬性都設置好后就可以將以背景的方式插入了。
2、在表格中插入表格（屬性如圖）：
其實，制作帶邊框的背景圖片，主要的方法就是表格套表格，將表格之間的間距設置好了，再將你的素材以背景的方式插入就可以了，要想邊框的層次多，就多插入幾層表格。
如圖將屬性設置好，這里要注意的是表格的寬度和高度都以100%的屬性設置，這樣表格會自動隨著外層表格的變化而變化?，F(xiàn)在可以將以背景的方式插入了。
3、 在第二層表格中再插入一個表格（屬性如圖）：
以背景的方式插入。
4、插入主背景（屬性如圖）：
最后就是主背景圖片的插入了，這里主要設置的是對齊方式，水平設置為居中對齊，垂直設置為頂端，這樣設置主要是避免在背景中添加數(shù)據(jù)時，會在表格垂直位置的中部出現(xiàn)，也就是上面出現(xiàn)一節(jié)空白（模板制作這里可以不考慮，但要是用作日志背景的話就一定要注意了）。屬性設置好了后，就可以將主背景圖片以背景的方式的插入。
5、 DW的部分還剩下最后一步，就是預覽保存了。
小芷這里只需要預覽就可以了。因為，我們前面做了那么多，就是想要得到下面的背景圖片。
這是預覽后的全圖，點擊看看效果。為了寫教程截全圖，小芷的圖片高度只設置了659PX。下面的內(nèi)容就交給QQ來完成了。
QQ截圖大家都不陌生吧。其實，截圖拷屏的方法很多，但小芷選擇QQ截圖的主要原因是因為，QQ在截圖的時候，系統(tǒng)自帶邊框截圖尺寸的顯示，非常的方便?？梢灾苯咏厝∥覀冃枰拇笮?。頂部三個區(qū)（1004PX*650PX），中區(qū)和底區(qū)只用截取底區(qū)（1004PX*800PX）。如圖：
中區(qū)底區(qū)截圖
三、利用PS制作瀏覽器、頂區(qū)、導航條、4區(qū)、2區(qū)、3區(qū)、1區(qū)和底區(qū)八個部分的背景圖片。
PS是一個非常強大的圖片處理軟件，大家多少都有接觸，小芷在這里不是教大家怎么使用它，要是那樣，小芷可能是班門弄斧了。如何巧用PS，主要是利用幾個工具把你搜集的素材和背景融合起來。下面用頂區(qū)主圖示例介紹一下小芷的做法。
1、瀏覽器圖片制作
在PS中打開頂區(qū)主圖，調(diào)整尺寸后選取圖中的部分裁剪，然后制作成瀏覽器的背景圖片（圖片效果采用了濾鏡的膠片顆粒，然后在圖像調(diào)整中將顏色調(diào)暗）保存為JPG格式就可以了。效果如下：
瀏覽器圖片
2、頂區(qū)、導航條和4區(qū)圖片的制作
制作頂部3個區(qū)的圖片時，需要使用PS中圖層的方法，為了使頂區(qū)主圖和背景圖片能夠相融合，我們需要將圖片用仿制圖章工具，以頂部截圖 背景圖片為仿制源，把頂區(qū)主圖圖片的邊緣先處理一下。
頂部圖片1
頂部圖片2
這時就可以將處理好的圖片利用圖層的方式制作了。 制作的具體方法，小芷就也不多講了，制作后的效果圖片小芷貼出來大家一看就明白了。這里主要說一下導航條按鈕的數(shù)據(jù)，當你在背景上做好按鈕后，為了能讓系統(tǒng)的七個欄目內(nèi)容乖乖的呆在你所制作的按鈕中，一定在ps的時候就要調(diào)整好，水平位置一般不用考慮，在系統(tǒng)中可以隨意調(diào)節(jié)。但是垂直距離就要設置好了，導航條按鈕一般是在導航條圖片的居中位置，距頂部圖片的上邊距大概為497px（這個尺寸不是固定的，也要隨著你做的按鈕大小略微調(diào)整）。數(shù)據(jù)的調(diào)整方法如圖：
圖片做到這里算是告一段落了，下面一步是小芷準備重點介紹一下的， 接下來就是要將上面的圖片切成3個部分，大家一般都會想到使用裁切工具，使用裁切工具是可以將圖片分成3個部分，但是在最后上傳到系統(tǒng)后就會出現(xiàn)圖片之間接縫處不合縫的問題。所以這里只能利用切片工具來完成。如圖示：
存儲后的切片會以images的文件形式存在。切片如圖：
頂區(qū)圖片
導航條圖片
4區(qū)圖片
3、1區(qū)、2區(qū)、3區(qū)圖片的制作。
這三個區(qū)的制作方法同上，切片如圖：
存儲后的切片同樣以images的文件形式存在。切片如圖：
3區(qū)圖片（3區(qū)也可以直接平鋪插入主背景圖片）
底區(qū)的圖片沒有太多的要求，只要把底區(qū)的截圖在PS編輯好，尺寸：1004PX*800PX（只能小于或等于800PX），保存為JPG格式就可以了。
剩下的就是把做好的圖片在系統(tǒng)中制作了。具體的制作方法可以參照小芷的另一篇圖解：
小芷把在系統(tǒng)做好后的模板全圖貼出來，大家可以感受一下。
小芷今后將努力制作出不同風格的模板，請大家繼續(xù)關(guān)注。
此教程歡迎大家的分享引用，只是教程寫的很辛苦，希望各位朋友引用時，尊重小芷的勞動果實，不要刪掉出處。本文也會不時的更新，請分享了的朋友經(jīng)常關(guān)注，如更新請重新引用一下。謝謝！
更新記錄：
5月28日更新：1、增加模板直接分享鏈接。
5月31日更新：1、增加部分修改后模板的分享
2、部分圖片更新
6月02日更新：
6月03日更新：
電腦自帶裝置抓圖方法
用電腦自帶裝置抓圖裁剪制作教程的快速方法：
每個電腦都有一個Print Screen鍵
，位置在最上面一排：
Print Screen鍵用途可以抓圖，在準備抓圖的頁面上按一下Print Screen鍵，然后點擊電腦左下角開始——程序——附件——畫圖：
使用遨游瀏覽器的朋友可以直接點擊網(wǎng)頁右上方的畫圖標志
進入畫圖板，點擊上方的編輯——粘貼：
粘貼后選擇左側(cè)工具欄先點第一項再點一下第二項選定裁剪：
用鼠標選定需要裁減的范圍：
按鼠標右鍵選取剪切：
點左上角文件——新建——粘貼，同時可以利用左側(cè)工具欄的提示對圖片進行文字等編輯（輕點標志可以看到功能提示）：
粘貼后點擊左上角文件另存即可，存盤格式請選擇jpg格式：
云中公子歡迎您
您已欣賞本篇
分
秒
