CSS（一）photoshop相关及切图

当我们拿到设计稿时，需要把设计稿制作成页面，因此就需要用到photoshop，然后使用photoshop切图

关于阴影拾取色的时候，如果阴影的颜色包含透明度，那么阴影就不应该写成16进制颜色如：#f5f5f5，因为这种写法无法表示透明度，应该写成rgba的方式，rgba可以表示透明度

 

切图

1.独立图层切图

方法一：

（1）新建空白文件

（2）找到图形的图层

（3）拖拽图形或图层到空白文件

（4）裁切掉多余的空白区域（图像-裁切-透明像素）

方法二：

（1）新建空白文件

（2）找到图层或图像

（3）复制到新建的空白文件

（4）裁切掉多余的空白区域（图像-裁切-透明像素）

2.非独立图层切图

不规则图形切图

（1）找到图像或图形所在的图层，或者合并所有可见图层

（2）使用矩形工具框住目标对象，然后点击魔棒工具（设置容错：0，连续功能打勾），按住alt键（相当于使用裁切功能去掉多余的部分），去掉多余的空白

（3）复制所选区域

（4）新建空白文件粘帖

文字处理（去掉演示中图形上的文字）

（1）选框工具选中，可平铺的区域

（2）使用自由变换功能

（3）或使用移动工具+alt键

平铺背景的切图

（1）选中相应图层

（2）框选可平铺的区域，也可以是最小的单元如1像素

（3）复制所选区域

（4）新建空白文件并粘帖

 

保存

点击“文件”-点击“存储为Web所用格式”-“选择图片格式（png24或jpg-品质选高）”-“保存”，其中“透明度”选框打勾，交错，嵌入配置文件等不要打勾，转换为RGB也不要打勾

 

精灵图

为了减少网络请求，因此诞生了精灵图，简单的说，精灵图就是一个图片文件里放了多个切图

精灵注意事项

每个切图之间留适当的空隙

平铺图的需要在X轴或者Y轴方向上铺满

 

维护

保留一份切图的PSD，通过PSD维护

尽量不要改变原来的坐标

相关的或者类似的切图应该在一张精灵图中