一、準(zhǔn)備圖片素材

  首先用圖片設(shè)計(jì)軟件（如:Photoshop ）設(shè)計(jì)好模板的風(fēng)格，并根據(jù)模板不同區(qū)域的尺寸，將圖片裁切成所需要的素材。

  一般最多需要裁切出14張不同尺寸或圖案的素材圖片（有些素材圖片也可以互相代用），注意各個(gè)素材圖片在模板制作中相應(yīng)的尺寸規(guī)范要求。

  圖片素材尺寸可參考：

  1、頂區(qū)圖片素材寬度為1004px，推薦高度260px；

  2、導(dǎo)航條圖片素材寬度不超過(guò)1004px，高度在32——100px范圍內(nèi)；

  3、底區(qū)圖片素材寬度為1004px，推薦高度200px；

  4、中區(qū)側(cè)向區(qū)（2、1區(qū)域）圖片素材推薦寬度10px，高度200px；

  5、模塊側(cè)向區(qū)（1、3、4、6、7、9區(qū)域）圖片素材推薦寬度5px，高度100px。模塊2區(qū)圖片素材推薦寬度100px，推薦高度25px。模塊8區(qū)圖片素材推薦寬度100px，推薦高度20px。

  說(shuō)明：以上圖片素材的裁切尺寸，并不一定是模板的實(shí)際采用尺寸，制作時(shí)，應(yīng)根據(jù)模板風(fēng)格對(duì)寬度和高度靈活調(diào)整，如設(shè)置成不平鋪或水平平鋪、垂直平鋪、水平+垂直平鋪等。

  二、制作頂圖和博客標(biāo)題

  1、選擇背景圖片前，將不需要的背景顏色去除掉；

  2 、將頂區(qū)背景圖片的高度調(diào)整到圖片素材的尺寸（260px），可設(shè)置成不平鋪；

  3、點(diǎn)擊背景圖片的“選圖”按鈕，選擇頂區(qū)圖片素材；

  4、頂區(qū)文字（博客標(biāo)題）可按個(gè)人喜好選擇其字體、大小、顏色、位置等。如果是事先已設(shè)計(jì)好標(biāo)題文字的頂區(qū)圖片素材，則可將原有的標(biāo)題文字隱蔽掉（調(diào)整左右、上下位置）。

  三、制作導(dǎo)航條

  1、選擇背景圖片前，將不需要的背景顏色去除掉；

  2、點(diǎn)擊背景圖片的“選圖”按鈕，選擇導(dǎo)航條圖片素材；

  3、將導(dǎo)航條背景圖片的高度調(diào)整到圖片素材的尺寸（如32——100px），可設(shè)置成不平鋪；

  4、導(dǎo)航標(biāo)題文字按個(gè)人喜好選擇大小、粗細(xì)和顏色，文字的水平位置及寬度可調(diào)整；

  5、當(dāng)前項(xiàng)、鼠標(biāo)劃過(guò)項(xiàng)的背景圖片，按個(gè)人喜好進(jìn)行選擇，但圖片的大小應(yīng)與導(dǎo)航條相適應(yīng)；

  6、當(dāng)前項(xiàng)、鼠標(biāo)劃過(guò)項(xiàng)的的文字，按個(gè)人喜好選擇其大小、粗細(xì)及顏色。

  四、制作中區(qū)（下面以3列結(jié)構(gòu)模板為例）

  1、選擇背景圖片前，將不需要的背景顏色去除掉；

  2、中區(qū)的2區(qū)域、1區(qū)域是模板的左右側(cè)邊框。制作時(shí)，依次點(diǎn)擊中區(qū)的2區(qū)域、1區(qū)域背景圖片的“選圖”按鈕，選擇中區(qū)側(cè)向區(qū)（2、1區(qū)域）圖片素材。因圖片素材寬度為10px，故設(shè)置時(shí)應(yīng)作相應(yīng)調(diào)整。圖片素材高度只有200px，故應(yīng)設(shè)置成垂直平鋪；

  3、中區(qū)3的圖片是模板的底面背景，按個(gè)人喜好選擇一張圖片，即點(diǎn)擊背景圖片的“選圖”按鈕選擇圖片，并設(shè)置成水平+垂直平鋪，背景圖片左右兩側(cè)縮進(jìn)寬度均調(diào)整為5px或10px。

  總之，靈活應(yīng)用中區(qū)的不同布局和區(qū)域，可以制作更多的效果。

  五、制作底區(qū)

  1、選擇背景圖片前，將不需要的背景顏色去除掉；

  2、將底區(qū)背景圖片的高度調(diào)整到圖片素材的尺寸（如200px）可設(shè)置成不平鋪；

  3、點(diǎn)擊背景圖片的“選圖”按鈕，選擇底區(qū)圖片素材；

  4、底區(qū)文字按個(gè)人喜好選擇顏色及上下位置。

  六、制作模塊

  1、選擇背景圖片前，將不需要的背景顏色去除掉；

  2、模塊的側(cè)向區(qū)是每個(gè)模塊的左右側(cè)邊框。制作時(shí)，依次點(diǎn)擊模塊側(cè)向區(qū)（1、3、4、6、7、9區(qū)域）背景圖片的“選圖”按鈕，選擇模塊側(cè)向區(qū)圖片素材。因圖片素材寬度為5px，故設(shè)置時(shí)應(yīng)分別作相應(yīng)調(diào)整。其中4、6區(qū)域圖片素材高度只有100px，故應(yīng)設(shè)置成垂直平鋪。

  注意：模塊1、3區(qū)的高度調(diào)整應(yīng)與模塊2區(qū)圖片素材高度25px相適應(yīng)，模塊7、9區(qū)的高度調(diào)整應(yīng)與模塊8區(qū)圖片素材高度20px相適應(yīng)；

  3、模塊2區(qū)是每個(gè)模塊的上邊框，也是模塊的標(biāo)題欄。制作時(shí)，點(diǎn)擊背景圖片的“選圖”按鈕，選擇模塊2區(qū)圖片素材。圖片素材高度為25px，故設(shè)置時(shí)應(yīng)作相應(yīng)調(diào)整（與模塊1、3區(qū)的高度調(diào)整相對(duì)應(yīng)）。圖片素材寬度為100px，可設(shè)置成水平平鋪；

  4、模塊8區(qū)是每個(gè)模塊的下邊框。制作時(shí)，點(diǎn)擊背景圖片的“選圖”按鈕，選擇模塊8區(qū)圖片素材。圖片素材高度為20px，故設(shè)置時(shí)應(yīng)作相應(yīng)調(diào)整，（與模塊7、9區(qū)的高度調(diào)整相對(duì)應(yīng)）。圖片素材寬度為100px，可設(shè)置成水平平鋪；

  5、模塊5區(qū)的圖片是模塊的底面背景，按個(gè)人喜好選擇一張圖片，即點(diǎn)擊背景圖片的“選圖”按鈕選擇圖片，并設(shè)置成水平+垂直平鋪；

  6、模塊的各類文字可按個(gè)人喜好選擇顏色或位置；

  7、模塊邊框的粗細(xì)、類型及顏色可按個(gè)人喜好進(jìn)行設(shè)置。

  七、制作瀏覽器背景

  1、選擇背景圖片前，將不需要的背景顏色去除掉；

  2、瀏覽器背景圖按個(gè)人喜好選擇一張圖片，即點(diǎn)擊背景圖片的“選圖”按鈕選擇圖片，并設(shè)置成水平+垂直平鋪。另外，可根據(jù)自己的需要勾選“固定背景”。

  分辨率大于1024*768的顯示器可看到頁(yè)面兩側(cè)瀏覽器背景。

  八、其他

  1、模板按鈕的背景、邊框及文字的顏色，可根據(jù)自己的需要選擇；

  2、分隔線、當(dāng)前項(xiàng)及風(fēng)格信息，均可按個(gè)人喜好進(jìn)行設(shè)置。