网页设计切图的基本原则:
1. 能用十六进制代替的,绝对不要切图。
2. 图切的大小越小越好。
3. 图切的越少越好。
网页设计切图—如何切出高质量的网页图片
步骤:
1. 准备PSD源文件,必须是分层图。
2:选择PS工具的切片工具
3:顶部无需切图,从logo开始,关闭背景图。切图中,内容越少,保存的文件大小越小。
文件命名:
4:存储为web所用格式。
5:
认识格式:
GIF格式只能输出256色。适用于保存颜色单一的图片,支持透明背景,但会有1px左右白色边缘,适合浅色背景的图片。
Jpg格式:图片压缩格式。文件较png格式小。品质决定文件大小,一般在60-80之间就可以。
Png-8:透明背景,以前兼容IE6浏览器用。(现已不考虑)
PNG-24:高清透明背景格式。APP和网页常用。但如果图像有较大颜色变化时,文件较大。
格式对比:
GIF:
JPG:
PNG-24
6:效果对比之后,根据图像本身的颜色变化程度和文件大小可以选择GIF格式。
7:
扁平化banner可以直接切为gif图片。因为扁平banner的颜色变化较小256色可以满足变化需求。
比较结果如下:
GIF:
Jpg:
png: