网页播放器开发系列教程(二 )--界面设计

书接上文，咱们继续开发。

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 最后切割效果

 

下一步咱们进行页面设计，就是把这些图片再组合起来，用网页的形式展现。