【教程】自定義逗游客戶(hù)端個(gè)性化皮膚

4.修改名為‘main_wizardbtn_icons.png’ 的圖片文件，這是最大的系統(tǒng)圖標(biāo)文件。

皮膚運(yùn)行原理：在皮膚運(yùn)行的時(shí)候是按照坐標(biāo)依次讀取圖案的，所以修改的時(shí)候按位置替換就行。皮膚文件夾里系統(tǒng)圖標(biāo)特別多，對(duì)系統(tǒng)圖標(biāo)的修改目前建議只修改這一個(gè)就行，或者這個(gè)也不需要修改，視情況而定。

第八個(gè)黑色的影子就不用替換了，保持原狀就好或者直接刪除。是刪除而不是對(duì)圖片裁剪，不能改變圖片尺寸。如果你有其他創(chuàng)意可以進(jìn)行修改。

修改完成的圖片文件如下：

運(yùn)行效果如下：

5.修改名為‘main_frame.png’ 的圖片文件。又是一個(gè)奇怪形狀的圖片文件，這個(gè)文件就是客戶(hù)端左右兩邊和最下邊的狹長(zhǎng)條形部分。

皮膚運(yùn)行原理：圖片尺寸16x657像素，圖片沿著一條縱向中心線(xiàn)左右各8個(gè)像素區(qū)域?qū)ΨQ(chēng)，橫向左邊8個(gè)像素列正常顯示，右邊7個(gè)像素列正常顯示，第9個(gè)像素列橫向拉伸顯示。

這就是在第3步修改banner圖片后試運(yùn)行時(shí)最左邊和最右邊剩下的空白地方。前面說(shuō)過(guò)，banner圖片畫(huà)標(biāo)記的地方最好是能做成純色，否則就要在這個(gè)文件最上部填充8個(gè)像素寬的圖片，來(lái)延續(xù)banner圖片在客戶(hù)端皮膚運(yùn)行時(shí)兩側(cè)的顯示不足。如果填充為純色就方便制作了。

6.修改名為“gamemanager_manage_dlg_mainwnd.png” 的文件，這是對(duì)話(huà)框的主窗體文件。這個(gè)文件主要是修改標(biāo)題欄背景，可以只修改顏色，使它適應(yīng)主色調(diào)，也可以添加紋理。

下面是我制作的，即適應(yīng)了主色調(diào)（黯紅、黑），又填充了紋理。

7.修改名為 gamemanager_lb_bkgnd.png 的圖片文件。因?yàn)槲募腔疑兩愿鶕?jù)修改原則（修改原則見(jiàn)下文），這個(gè)文件可以不修改。如果修改的話(huà)可以填充紋理。

修改后：  運(yùn)行效果：

8.批量修改，經(jīng)過(guò)上面的操作，這個(gè)皮膚文件的主體已經(jīng)基本完成，接下來(lái)就是修改一些帶有大面積色塊的按鈕類(lèi)圖標(biāo)，修改色調(diào)使之與主題顏色相符。

修改原則：純白色或者灰色圖片文件可以不用修改，帶有主題顏色的圖片文件必須修改；在修改時(shí)可以只更改顏色，也可以填充紋理或者其他效果。

下面列出一些重要的，建議盡量修改的圖片文件：

A：把顏色調(diào)整為主題顏色    B：填充紋理或其他效果    C：可以不進(jìn)行處理

看起來(lái)需要修改的文件很多，但其實(shí)大多數(shù)只要修改顏色即可，操作起來(lái)很快，并沒(méi)有難度。

allmenubkgnd.png    A

allmenuline.png    A

btt_03.png    AB

gameinstall_progress.png    AB

gamemanager_btn_bigview_bg.png    AC

gamemanager_manage_dlg_btn_blue.png    AB

gamemanager_menu_btn_gnd.png    AB

header.png    A

HeaderBg.png    A

listViewMenu.png    A

main_btn_banner.png    AB

main_btn_max.png    AB

main_btn_min.png    AB

main_btn_restore.png    AB

main_menu_btn_bk_gnd.png    AB

main_rb_btn.png    AB

progress.png    AC

tag_btn.png    AB

user_btn.png    A

user_btn_ID.png    A

vScrollBarTemp.png    A

舉例說(shuō)明：

   最左側(cè)選項(xiàng)背景

    常規(guī)按鈕圖標(biāo)

 經(jīng)驗(yàn)槽

9.修改名為 main_wizardbtn_bkgnd.png 和 main_wizardbtn_current_selected.png 的文件。這兩個(gè)文件也是極其凸顯個(gè)性化的文件，可以進(jìn)行修改也可以保持原狀。

皮膚運(yùn)行原理：原理是按坐標(biāo)讀取。

main_wizardbtn_bkgnd.png 文件分為四部分，從左到右依次是“非選中狀態(tài)、鼠標(biāo)指向狀態(tài)、左鍵點(diǎn)擊狀態(tài)、選中狀態(tài)”，而main_wizardbtn_current_selectd.png 則是選中狀態(tài)，同第一個(gè)文件的第四個(gè)狀態(tài)，兩者共同組成選中狀態(tài)。

我對(duì)這兩個(gè)文件的修改是：

運(yùn)行效果圖如下：

選中背景是個(gè)星芒陣的背景圖案，這個(gè)圖案建議是鏤空的圖案，這樣更美觀(guān)也不至于過(guò)度阻擋背景圖片。另外，這張選中背景圖片制作時(shí)盡量做成半透明，只是建議。

再例如：

10.最后一步，制作index索引圖片。

這個(gè)過(guò)程非常簡(jiǎn)單，從skin的index文件夾里找到編號(hào)是5的index圖片，替換為主題圖片。然后將所有已經(jīng)制作好的皮膚文件夾5替換原來(lái)的文件夾5，這樣點(diǎn)擊客戶(hù)端的換膚圖標(biāo)，找到自己制作的皮膚，運(yùn)行即可。

  教程到此為止，完成之后就是一款自定義的個(gè)性化皮膚。想要什么風(fēng)格的皮膚自己可以輕松制作，對(duì)于喜歡個(gè)性化的人來(lái)說(shuō)，你的客戶(hù)端皮膚就是獨(dú)一無(wú)二的。

  我們可以交流經(jīng)驗(yàn)，分享皮膚，輕松自定義個(gè)性化皮膚就是這么簡(jiǎn)單。

注意事項(xiàng)：在替換原始皮膚文件，使用自定義文件時(shí)可能會(huì)遇到這種情況如下圖，index圖片不能替換，文字重疊的現(xiàn)象。這個(gè)不用擔(dān)心，即使出現(xiàn)這種情況皮膚依然能夠正常使用。造成這種現(xiàn)象的原因是因?yàn)榍皫讉€(gè)index圖片文件客戶(hù)端總會(huì)聯(lián)網(wǎng)下載獲取導(dǎo)致的?？梢蕴鎿Q后幾個(gè)皮膚文件就沒(méi)有這種情況，當(dāng)然了，不管怎么樣，都不會(huì)影響皮膚的使用。

DOTA2黑鳥(niǎo)---歿境神蝕者http://pan.baidu.com/s/1mg7eUEG

刺客信條4黑旗http://pan.baidu.com/s/1c0zTDq4

海賊王one piece  http://pan.baidu.com/s/1pJ6sVEF

DOTA2自然之力--大樹(shù)與小鹿http://pan.baidu.com/s/1dDEeQTb

火影忍者NARUTO http://pan.baidu.com/s/1sjPRJkT

英雄聯(lián)盟LOL http://pan.baidu.com/s/1jGKaxHs

呃...看不懂.....我要重新改寫(xiě)教程么....

空之境界--兩儀式 http://pan.baidu.com/s/1eQGfgAm