最终效果图：
源文件下载：ui_teach.rar
1、打开ps，新建一个文档，300px*400px，填充黑色背景，依照下图打好参考线。
2、新建一个图层，沿参考线做一个选区，填充上灰色，然后缩选1px，删除多余的色块，创建出边框；也可以用描边的方式来完成。
3、复制边框图层，选择边框内的部分，填充上背景色，此时我们便有了三个图层：
4、建立一个“顶部工具条”的序列，在这个序列中新建一个图层，命名“绿色部分”，选取如图矩形框，填充上白色。
5、对"绿色部分"添加图层样式,做"渐变叠加",设置如图:
6、效果如图：
