首页 > 其他 > 详细

前端工程师技能之photoshop巧用(从效果图到雪碧图)4——优化篇

时间:2015-09-09 13:01:09      阅读:199      评论:0      收藏:0      [点我收藏+]

【新建】把需要的内容拖到新的文件里,或者复制粘贴到新的文件里。背景内容要选择透明
技术分享

【补充】图片各种格式及特点
  jpg:不支持透明半透明,所有空白区域填充白色(高清图)
  gif:支持透明,不支持半透明(小图标,支持动画)
  png8:支持透明,不支持半透明(小图标,不支持动画)
  png24:支持透明,也支持半透明(半透明的图片)

【保存】:为保证图片质量,保留一份psd,在psd文件上进行修改。保存其他类型的图片时会对图片进行一定的压缩,如果不在psd上,而是在其他类型的图片上进行修改并保存,会导致图片像素点的丢失。所以每一份需要保存的图片要都保存一份psd源文件
  [1]当图片色彩丰富且无透明要求时,建议保存为jpg格式并选择合适的品质,一般为60-80
  [2]当图片色彩不太丰富时无论有无透明要求,保存为PNG8格式(特点是只有256种颜色,文件本身比较小),保存时选择无仿色,无杂边
  [3]当图片有半透明要求时,保存PNG24格式(对图片下进行压缩,所有相对比较大)

技术分享 技术分享 技术分享

【修改维护】

  【1】放大画布 :图像 -> 画布大小【alt+ctrl+c】 -> 选择定位位置(一般为左上角) 

技术分享 技术分享 技术分享

  【2】减小画布

    [注意]PNG8的颜色模式默认为索引颜色模式,在修改png8图片时需要更改其颜色模式为RGB模式,步骤为图像 -> 模式 -> RGB颜色

技术分享 技术分享

    [1]选择 图像 -> 裁切 选择基于左上角像素颜色,可以实现自动裁切的效果

技术分享 技术分享
技术分享 技术分享

     [2]先选定要保留的区域,然后选择 图像 -> 裁剪或者选择工具栏中的裁剪工具按钮进行裁剪

技术分享 技术分享 技术分享

  【3】移动图标
    [1]若图标为独立图层,则用移动工具拖动即可

技术分享 技术分享

    [2]若图标为非独立图层
      [a]先用选区工具选中图标区域,再用移动工具拖动图标,这样可以移动该图层
      [b]先用选区工具选中图标区域,再剪切【ctrl+x】,粘贴【ctrl+v】,可以将原来的图层分成两个图层,更有利于操作

技术分享 技术分享 技术分享

【合并】

  [1]图片在合并之前必须保留空隙
    [a]如果是小图标,留的空隙可适当小一些,一般20像素左右
    [b]如果是大图标,要留的空隙就要大一点,因为大图标在调整的时候,影响到的空间也会比较大

技术分享
  [2]图片的排列方式有横向和纵向

技术分享
  [3]合并-分类的原则
    [a]把同属于一个模块的图片进行合并

技术分享
    [b]把大小相近的图片进行合并

技术分享
    [c]把色彩相近的图片进行合并

技术分享
    [d]综合以上方式合并


  [4]合并推荐
    [a]只本页用到的图片合并
    [b]有状态的图标合并

技术分享

前端工程师技能之photoshop巧用(从效果图到雪碧图)4——优化篇

原文:http://www.cnblogs.com/xiaohuochai/p/4793735.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!