前端工程师和美工配合的一些知识

  1.图片理论基础

    常见的图片格式包含以下几种:

图片格式对比
图片格式   优点 缺点
PNG(1996) 透明,无损压缩,渐进显示和流式读写,保留图像名称作者版权等 色彩支持少 PNG8 PNG24 PNG32,ie6不支持
JPEG(1992) 色彩多 有损压缩
GIF(1987) 动态图,可透明,体积小(后台统计) 处理256种颜色,不能半透,处理锯齿效果不好
SVG 矢量图形,无损压缩,绘制路径xml语言 浏览器支持不是很好,主要用于移动端font-face

    关于png8,png24,png32的区别在网页上有详细介绍http://www.ittribalwo.com/article/2599.html

 
PNG8 8位的png最多支持256(2的8次方)种颜色,8位的png其实支持不透明、索引透明、alpha透明。
PNG24 支持2的24次方种颜色,表现为不透明。
PNG32 支持2的32次方种颜色,32位是我们最常使用的格式,它是在png在24位的png基础上增加了8位的透明信息,支持不同程度的半透效果。
    说到png8和png24的区别,『png 不透明』只能为不透明,代表格式有:『png8 不透明』和『png24』,导出软件有:Photoshop、Fireworks。不推荐使用『png 不透明』格式,建议用jpg图片来代替它。
    在使用photoshop导出png图片的时候,注意设置透明度和杂边。
 
  2.adobe fireworks和svg的处理
    svg使用推荐网址:https://icomoon.io/app/#/select
    fireworks的使用下次再补充。主要是自己刚安装了fireworks,还不知道怎么用,就被逼着把网页的psd制作成html。完成后,再写一个帖子。
 
  3.adebe photoshop切图
    复制图层--图像--裁切--透明像素--存储
    ps插件:css3Ps下载地址http://css3ps.com/Download/  安装教程:http://jingyan.baidu.com/article/f71d603796d11a1ab641d190.html
        
  4.adobe Dreamweaver处理基本网页
     只是辅助工具,可快速搭建标签,学习一些经典的js。
    
    
原文地址:https://www.cnblogs.com/fanfan-nancy/p/4928694.html