前端学习 photoshop相关及切图(css)

关于阴影拾取色的时候,如果阴影的颜色包含透明度,那么阴影就不应该写成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维护

尽量不要改变原来的坐标

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

猜你喜欢

转载自blog.csdn.net/zy21131437/article/details/80826769