前端用到的PS切图

需要掌握的几个要点

  • 使用PS工具
  • 测量与取色
  • 切图
  • 保存
  • 图片优化也合并

  • ps工具
    1.修改像素(编辑-首选项-单位与标尺)
    2.面板(窗口-工具/选项/信息F8/图层F7/历史记录)/*这些开启之后,就要保存下来。窗口 > 工作区 > 新建工作区 > 保存 */
    3.常用工具
    1)切图工具:移动工具(最上面)、矩形选框工具、魔棒工具、裁剪工具+切片工具、缩放工具 、取色器
    2)辅助工具:视图里面勾选,对齐标尺,显示参考线,就可以拉参考线了

  • 测量和取色
    1)测量:矩形选框工具&信息面板
    2)取色:拾色器&吸管工具

  • 切图
    1.修饰性图片:图标、网站的Logo,还有一些特殊效果的按钮、文字等以及非纯色的背景/PNG24/PNG8/
    2.内容型图片:内容性的图片一般我们应用在HTML标签 img 上,比如网站上的广告图片以及一些网站文章中的配图/存为JPG格式/

    - 适用于一刀切的图片:
        1)根据需要的区域,分别拉参考线;
        2)选择切片工具
        3)点击“基于参考线的切片”按钮
        4)保存(全选切片,选择存储为Web所用格式)
    
  • 保存
    1)当图片色彩丰富无透明要求时,建议保存为JPG格式并选择合适的品质
    2)当图片色彩不太丰富时无论有无透明要求,建议保存为PNG8格式
    3)当图片有半透明要求,建议保存为PNG24格式

  • 图片优化与合并
    降切下来的图片进行合并,使用在线合成雪碧图,网上搜索,可以自动生成CSS,PS上也可以操作,但是不好定位。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 开始之前…… 这篇文章并不是教你如何美化图片的,它针对前端开发的图片操作。 这篇文章注重细节,像是工具类文章。所以...
    黑白度阅读 12,218评论 4 39
  • 1.三问切图 什么是切图?从设计稿(如.psd文件)中切出图片素材(如.png、.jpg文件)DIV+CSS切图1...
    LuckyPandaLee阅读 6,774评论 0 14
  • 切图工具 要点:- 使用PS工具- 使用背景图- 图片合并方案- 浏览器兼容 使用PS工具 PS首选项设置,将单位...
    MrMagicWang阅读 4,436评论 0 0
  • 准备工作 1、设置:首选项-》单位与标尺-》像素窗口-》面板-》选项、工具、信息(F8)、图层(F7)、历史记录 ...
    Ryann阅读 2,675评论 0 1
  • 界面快捷键 放大、缩小:alt+滚轮 or ctrl+"+/-"100%视图:ctrl+1标尺:ctrl+R参考线...
    小豸阅读 4,258评论 0 48