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

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

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

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

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

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

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

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

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

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

2、切換皮膚

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

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

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

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

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

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

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

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

;工具欄左側背景
Background_Image_Left = control\back_left.png

;工具欄右側背景
Background_Image_Right = control\back_right.png

2、增加工具欄按扭

閃游皮膚每一個按鈕都有三種狀態，一般是 默認狀態，禁止狀態(disable)和鼠標移上(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


;前進按鈕
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 用于指定此按鈕與前一個按鈕的間隔寬度默認是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默認的大小:16x16,另外Hover狀態的圖片不必指定

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

;Tab欄上的側邊欄,添加,全屏按鈕
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

標題欄上的四個按鈕 更換皮膚，最小化，最大化，關閉

[Buttons]
;Windows系統按鈕大小與圖片大小相等
;Windows系統按鈕圖片,正常狀態和高亮狀態
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、地址欄和搜索欄輸入框

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

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、標簽欄

定義當前標簽

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

非激活標簽

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


標簽欄背景

Tab_BK = control\tab_bg.png

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

;Windows外邊框顏色
Frame_Border_Color1 = #DADADA

;Windows內邊框顏色
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

四、皮膚的發布

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

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

五、補充說明

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

以上就是如何動手輕松制作閃游瀏覽器個性酷靚皮膚，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。