網頁播放器開發系列教程(二 )--界面設計

書接上文，咱們繼續開發。

1.界面設計

首先我先用PS設計出如圖1的播放器界面。詳細設計步驟再也不表述，這是美工的主要工做，下面我主要講解一下切圖工做，這部分工做我認爲仍是本身動手比較合適，美工不知道咱們的需求，也不知道怎麼切割符合咱們的要求，因此要親自動手。掌握一些圖片設計工具仍是十分有必要的

咱們用PS打開設計圖（如圖2），仍是老思路，首先是對設計圖進行總體分析，具體怎麼切割才符合簡單、佔用網速帶寬少，又不失美觀，作到心中有數。

圖2 PS界面

PS界面介紹。

首先咱們來介紹一下PS軟件界面，圖2中是一個完整的PS界面，左側是工具箱，中間是設計圖，右側最下方是圖層面板（圖中有詳細的標註），這三個區域是咱們經常使用的部分。

獲取單一圖片背景色值。

從設計圖來看，播放器背景色單一，咱們只要獲取背景顏色RGB值便可，在網頁展現的時候用CSS設置這個背景顏色值就能夠了。獲取這個顏色值，在PS中十分簡單，咱們點擊工具箱中的前景色，會跳出顏色面板，鼠標移動到設計稿背景色上，會有一個吸管工具，點擊一下，顏色面板中會顯示剛纔吸管吸收的顏色值，整改操做過程圖3所有標識清楚了，只要按照表示步驟1-4操做便可，咱們的顏色值獲取到了，顏色值爲「f0f8ff」，這個數值咱們記住，之後咱們用的到。

圖3 獲取背景顏色值

分解設計圖

所謂分解設計圖就是把設計圖分解成一個個圖片，共咱們在Html和css中使用。根據設計圖來看，播放、暫停、上一首、下一首按鈕在一塊兒是個組合（如圖4），

圖4 播放按鈕

圖5  分解後的播放按鈕

因此咱們要把圖4拆解成背景，和播放、暫停、上一首、下一首圖片（如圖5），而後咱們在CSS中把這些組合在一塊兒。首先咱們找到播放、暫停、上一首、下一首圖對應圖層，單擊圖層前面的眼睛圖標，隱藏圖層，操做如圖6，最後顯示效果如圖7。

 圖6顯示須要的圖層，關閉不須要的圖層

  圖7去除不顯示圖層後的效果

 

 選中組合背景圖層，而後按住Ctrl按鍵單擊該圖層，這樣顯示區的圖片就被選中了，而後在PS工具箱中找到剪裁工具，操做如圖8所示。

圖層8 選中背景操做

 而後在圖片上單擊一下，出現剪裁預覽樣式如圖9.

 

圖9 剪裁預覽樣式

 而後單擊回車按鈕，隨便選擇其它一個工具箱中按鈕，彈出對話框，選擇裁剪按鈕，就能獲得咱們想要的圖片了，整改操做過程如圖10所示。

 圖10 剪裁成功

 

而後，依次選擇「菜單」→「導出」→「存儲web全部格式（舊版）」,如圖11.

 

 圖11 存儲圖片

再彈出的對話框中，預設選擇「PNG-24」，而後選擇存儲便可，操做過程如圖12所示. .

記住這個流程，之後咱們每一步須要提取圖片的時候，都是大同小異的操做。總的思想是：項獲取哪部分圖片就顯示哪部分圖層，同時隱藏掉的圖層，而後再剪裁保存。咱們把這個操做叫走爲「提取圖片步驟」，以便咱們後面使用方便。

按照「提取圖片步驟」，依次提取上一首、下一首、播放、中止按鈕圖片，如圖5所示。同理咱們提取進度條背景、音量控制背景，音量大小背景，進度播放頭，音量播放頭、隨機播放選中和釋放、單曲循環選中和釋放等圖片，最後提取圖片如圖12所示。可是值得一體的是，在獲取進度背景、音量背景和音量播放背景時，只要獲取一像素寬的圖片便可，緣由是：咱們再後面HTML展現頁面時，用CSS設置對圖片平鋪就可實現效果。這樣咱們全部的素材圖片就所有準備好了，下一步咱們將編寫HTML代碼和CSS代碼，將全部提取分割的素材重新組合，以網頁的形式展現。

 

圖12 最後切割效果

 

下一步咱們進行頁面設計，就是把這些圖片再組合起來，用網頁的形式展現。