如何動手輕松制作windows閃游瀏覽器個性酷靚皮膚

本篇文章給大家分享的是有關(guān)如何動手輕松制作閃游瀏覽器個性酷靚皮膚，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

4月14日晚間，閃游瀏覽器0.9發(fā)布的，除了開啟速度的優(yōu)化提升，這次更是加入了個性皮膚的切換支持。
　
一、閃游瀏覽器的皮膚構(gòu)造

閃游瀏覽器的皮膚是一個擴(kuò)展名為.sks的zip文檔，可以用WinRar、Winzip或者7-Zip等軟件直接打開，也可以直接把這個擴(kuò)展名改成.zip直接雙擊打開。這個擴(kuò)展名為.sks的zip文件包內(nèi)由許多圖像和一個描述性的文本文件組成的。閃游瀏覽器推薦使用 .PNG 圖像格式來支持界面元素的透明效果，定義皮膚的文本文件必須使用 .INI 擴(kuò)展名，使用 “SaaYaa_skin.ini” 文件名的文件將作為該皮膚的默認(rèn)樣式定義文件。

二、閃游瀏覽器的皮膚安裝使用

1、下載官方示例皮膚并雙擊安裝：

大家可以下載官方皮膚頁面的一個示例皮膚（官方示例皮膚下載：http://www.saayaa.com/skin/download.aspx?skinid=1），下載這個名為Metal.sks的皮膚文件，雙擊這個皮膚文件Metal.sks，將自動打開閃游瀏覽器并應(yīng)用這個皮膚，如果您的閃游瀏覽器正在運行中，那么也將直接即時更換刷新成您指定的皮膚。

閃游瀏覽器官方提供下載的皮膚將會有很多種，我們會不定期的添加，請隨時關(guān)注http://www.saayaa.com/skin或者官方皮膚論壇：http://bbs.ruanmei.com/forum-54-1.html

注意：如果雙擊下載的皮膚文件彈出一個對話框，說明皮膚文件沒有被正確的關(guān)聯(lián)上，請運行最新版本的閃游瀏覽器，或者在那個彈出的對話框里面指定用閃游瀏覽器打開?；蛘?，您把這個皮膚文件直接拖到閃游瀏覽器上面。

皮膚將安裝在閃游瀏覽器所在的安裝目錄下的一個名為skin 的文件夾下，例如上面的Metal.sks 這個皮膚，就會在skin\Metal 下面。大家可以到這個文件夾下面去看看，里面包含 SaaYaa_skin.ini 這個界面定義的文本設(shè)置文件，還產(chǎn)生 metal/control 和 metal/toolbar 兩個文件夾，里面都是新皮膚所用到的圖片資源文件。

2、切換皮膚

點擊下閃游瀏覽器右上角的個性設(shè)置按鈕，即可方便的進(jìn)行皮膚切換（默認(rèn)皮膚還支持膚色變化），也可以點擊進(jìn)入官方皮膚下載頁面。

三、閃游瀏覽器的皮膚制作：

如果大家想修改已經(jīng)安裝的皮膚，那么直接修改ini文件的設(shè)置和替換control、toolbar這兩個文件夾下面的圖片就可以了。如果要新制作一個，那就首先在閃游安裝文件夾下面的 skin 文件夾里面新建一個文件夾，以皮膚的英文名、拼音來命名行了（如果你喜歡用中文也可以）。

然后將官方提供的示例皮膚里面的 SaaYaa_skin.ini 復(fù)制過來（如果是只讀的就右鍵屬性去掉它的只讀屬性），方便我們一會的修改，新建control 和 toolbar 文件夾用來存放我們的皮膚圖片，這兩個文件夾的名字都是可以在 ini文件中修改的。

當(dāng)然，我們的建議是，你最好不用新建文件夾，而是復(fù)制官方的示例皮膚文件夾然后改名，例如你復(fù)制一下metal文件夾，改名成你自己的。然后修改里面的設(shè)置文件和替換圖片即可。這樣，可以更直觀的隨時看到預(yù)覽效果。

1、為皮膚的工具欄制作背景

閃游瀏覽器頂部的工具欄背景圖片分為左中右三個部分，左面和右面我們可以放上一個皮膚的固定標(biāo)志性圖片，放個小貓小狗花花草草或者自己的照片都可以，中間的部分是在瀏覽器改變大小時用來平鋪的部分，示例中只有中間的圖片，名字為 ini中定義的

;工具欄背景
Background_Image=control\title_bg.png 如果需要的話 還可以在下面加上左面和右面的圖片

;工具欄左側(cè)背景
Background_Image_Left = control\back_left.png

;工具欄右側(cè)背景
Background_Image_Right = control\back_right.png

2、增加工具欄按扭

閃游皮膚每一個按鈕都有三種狀態(tài)，一般是 默認(rèn)狀態(tài)，禁止?fàn)顟B(tài)(disable)和鼠標(biāo)移上(hover)。

圖片名字和大小我們可以自已定義

從左到右依次是

;新建按鈕 因新建按鈕帶有下拉框那個下拉按鈕，所以其寬度 = 30 + 14
NewBtn_Size = 44,32
NewBtn_Normal = toolbar\new.png
NewBtn_Hover = toolbar\new_hover.png

;后退按鈕
BackBtn_Size = 30,32
BackBtn_Normal = toolbar\back.png
BackBtn_Hover = toolbar\back_hover.png
BackBtn_Disable= toolbar\back.disable.png


;前進(jìn)按鈕
NextBtn_Size = 30,32
NextBtn_Normal = toolbar\forward.png
NextBtn_Hover = toolbar\forward_hover.png
NextBtn_Disable= toolbar\forward.disable.png


;更多(More)按鈕
MoreBtn_Size = 16,18
MoreBtn_Normal = toolbar\split.png
MoreBtn_Hover = toolbar\split.png
MoreBtn_Disable= toolbar\split.disable.png


;刷新按鈕
;Space_Width 用于指定此按鈕與前一個按鈕的間隔寬度默認(rèn)是0,即無間隔
RefreshBtn_Size = 30,32
RefreshBtn_Normal = toolbar\refresh.png
RefreshBtn_Hover = toolbar\refresh_hover.png
RefreshBtn_Space_Width = 9


;停止按鈕
StopBtn_Size = 30,32
StopBtn_Normal = toolbar\stop.png
StopBtn_Hover = toolbar\stop_hover.png

;主頁按鈕
HomeBtn_Size = 30,32
HomeBtn_Normal = toolbar\home.png
HomeBtn_Hover = toolbar\home_hover.png

;撤銷按鈕
RestoreBtn_Size = 45,32
RestoreBtn_Normal = toolbar\undo.png
RestoreBtn_Hover = toolbar\undo_hover.png
RestoreBtn_Disable = toolbar\undo.disable.png


;Go按鈕
GoBtn_Size = 45,32
GoBtn_Normal = toolbar\go.png
GoBtn_Hover = toolbar\go_hover.png
GoBtn_Space_Width = 5

;查找按鈕
SearchBtn_Size = 30,32
SearchBtn_Normal = toolbar\24_search.png
SearchBtn_Hover = toolbar\24_search_hover.png
SearchBtn_Space_Width = 5

;高亮按鈕
HighLightBtn_Size = 30,32
HighLightBtn_Normal = toolbar\highlight.png
HighLightBtn_Hover = toolbar\highlight_hover.png

;以下Btn默認(rèn)的大小:16x16,另外Hover狀態(tài)的圖片不必指定

;收藏欄上的添加收藏夾按鈕
FavBtn_Normal = toolbar\16_favorites.png

;Tab欄上的側(cè)邊欄,添加,全屏按鈕
Tab_Slider_Normal = control\tab_sidebar.png
Tab_Slider_Favorite = toolbar\16_favorites.png
Tab_Slider_History = toolbar\16_history.png
Tab_Slider_Active = control\sidebar_tab_active.png
Tab_Slider_BK_Left = control\panetab_bg.png
Tab_Slider_BK_Right = control\panetab_right.png
Tab_Slider_BK_Top = control\panetab_top.png


Tab_New_Normal = control\tab_new.png
Tab_FullScreen_Normal = control\TabBar_FullScreen.png
Tab_Close_Normal = control\tab_close.png
Tab_Close_Hover = control\tab_close_hover.png

標(biāo)題欄上的四個按鈕 更換皮膚，最小化，最大化，關(guān)閉

[Buttons]
;Windows系統(tǒng)按鈕大小與圖片大小相等
;Windows系統(tǒng)按鈕圖片,正常狀態(tài)和高亮狀態(tài)
Win_System_Btn = control\skin_selector.png
Win_System_Btn_Hover = control\skin_selector_hover.png
Win_Min_Btn = control\win_minimize.png
Win_Min_Btn_Hover = control\win_minimize_hover.png
Win_Max_Btn = control\win_maximum.png
Win_Max_Btn_Hover = control\win_maximum_hover.png
Win_Close_Btn = control\win_close.png
Win_Close_Btn_Hover = control\win_close_hover.png
Win_Restore_Btn = control\win_restore.png
Win_Restore_Btn_Hover = control\win_restore_hover.png

3、地址欄和搜索欄輸入框

這兩個輸入框（術(shù)語是textbox）采用一樣的圖片，也是分為左中右，并且每個圖片有兩種狀態(tài)， 默認(rèn)狀態(tài)和鼠標(biāo)移上(hover)后顯示的狀態(tài)。

Edit_Height=23
Edit_Left = control\combo_left.png
Edit_Left_Hover = control\combo_left_hover.png

Edit_Center = control\combo.png
Edit_Center_hover = control\combo_hover.png

Edit_Thumb_Width = 16
Edit_Thumb_Normal = control\combo_dropdown.png
Edit_Thumb_Hover = control\combo_dropdown_hover.png

4、標(biāo)簽欄

定義當(dāng)前標(biāo)簽

Tab_Active_Left = control\tab_active_left.png
Tab_Active_Center = control\tab_active_center.png
Tab_Active_Right = control\tab_active_right.png

非激活標(biāo)簽

Tab_InActive_Left = control\tab_inactive_left.png
Tab_InActive_Center = control\tab_inactive_center.png
Tab_InActive_Right = control\tab_inactive_right.png


標(biāo)簽欄背景

Tab_BK = control\tab_bg.png

5、菜單字體，顏色，邊框

;Windows外邊框顏色
Frame_Border_Color1 = #DADADA

;Windows內(nèi)邊框顏色
Frame_Border_Color2 = #DADADA

;工具欄字體顏色
ToolBar_Text_Color = #335f91

;Menu背景顏色
Menu_BK_Color = #EFEFEF

;Menu邊框顏色
Menu_Border_Color=#666666

;Menu分隔線顏色
Menu_Separator_Color=#BDBDBD

;Menu字體顏色
Menu_Text_Color = #333333

;高亮字體顏色
HighLight_Text_Color = #333333

;禁用字體顏色
Disable_Text_Color = #BDBDBD

;編輯框(Edit) 顏色
Edit_Text_Color = #333333

四、皮膚的發(fā)布

哇，終于做出了自己“版權(quán)所有”的皮膚了，快到http://bbs.ruanmei.com/forum-54-1.html這兒來分享一下吧！分享之前需要做什么？對，打包。

用你習(xí)慣的壓縮軟件，把剛才你做好的文件夾壓縮成一個.Zip格式的文件（不要壓成rar或者7z等其他格式），然后，把這個文件改名成 .sks 結(jié)尾的文件。好吧，上傳到論壇給大家分享一下吧。軟媒會不定期的舉辦評比和有獎比賽，看看誰的皮膚更酷更風(fēng)行！

五、補(bǔ)充說明

制作完全屬于自己的個性化皮膚其實不是那么難的吧？如果大家想邊制作邊看效果，這就涉及到刷新問題了，閃游瀏覽器0.9版本里面，要看到自己做出的效果，需要你點擊右上角的下拉箭頭（個性設(shè)置按鈕），然后切換到其他皮膚再切換回來。這可能不方便，我們會在4月17日前發(fā)布一個0.91版本，可以直接點擊你皮膚的名字進(jìn)行即時的刷新，這樣邊制作，邊刷新，會更方便！

以上就是如何動手輕松制作閃游瀏覽器個性酷靚皮膚，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。