简易圆角

要做一个demo，美工给了效果图片，需要将其变成html。

 

将过程记录下，记录的重点是ps的基本操作和图片的切法，都是自己摸索的，应该还有更好的方法。

 

效果图的部分如下：

用div+css来实现，圆角用背景图片来做，多个背景可以做到同一个背景图片上，这样可以减少请求次数，从效果图上看，只有顶部需要圆角效果，其他部分可以直接用border来做，顶部用3个div分别做左边，右边和中部的背景来实现效果，如图：

准备做如下背景图：

 

用PS打开效果图，放大后用标尺可以看出，圆角宽度6px即可，所以背景图片宽12px，高度只要大于顶部圆角的高度即可。首先建根据算好尺寸，如12*300，建一个图片，截取圆角部分复制到新建的图片上，如图：

 
 复制过来发现最右边能看到底部的马赛克（有透明），直接从左边1px位置选择一列，ctrl+t进行自由变换，拉宽覆盖到右边这1px，然后通过左边圆角来复制右边圆角，复制刚才的图层，通过自由变换，水平翻转，如图：

 下图就是翻转后的效果，左边6px是左边的圆角背景，右边6px是右边的圆角背景：

 

 
合并这两个图层，准备将高度拉到之前算好的尺寸，如图：

（合并图层）

 （拉一个标尺）

 （自由变换拉伸到指定高度）

 

然后就是图片的下半部分放中间的div的背景图片，做x方向的平铺，方式和这类似。

接下来用类似的方式做出按钮的图片：

 此图做的时候没考虑清楚，高亮图片应该放在右边，这样写css的时候，position的默认位置可以写0，会简单一点，在保存为gif前可以先水平翻转一次；

CSS部分比较简单，background-image都一样，主要就是根据图片和div来控制background-position，略了。