1.1.3.1切图

切图之前

哪些是需要切出来的?

修饰性的(一般用在background属性)

·图标、logo

·有特殊效果的按钮、文字等

·非纯色的背景

内容性的(一般用在img标签)

·Banner广告图片

·文章中的配图

切出来的图片存为哪种类型?

修饰性的

PNG24(IE6不支持半透明)

PNG8

内容性的

一般存为JPG

切图

隐藏文字只留背景

若文字为独立图层,隐藏文字图层

·找到文字图层

·去掉眼睛图标

若文字和背景合并,平铺背景覆盖文字

·矩形选框工具

·自由变换(Ctrl+T)

·使用移动工具+Alt+Shift

png24

·移动工具选中所需图层(按住Ctrl多选)

·右键合并图层(Ctrl+E)

·再右键复制图层到新文件

 或直接拖至已有文件(新建:Ctrl+N)

png8

带背景切

·合并(可见)图层(Shift+Ctrl+E)

·矩形选框工具选择内容

·魔棒工具去除多余部分

-从选区中减去:按住Alt

可平铺背景的切图

·用矩形选框工具选取一块区域

·复制粘贴到新文件中

平铺内容充满文件的宽(x轴)或高(y轴)

切片工具

适用于可以一刀切的活动页

·拉参考线

·选择切片工具

·点击“基于参考线的切片”按钮

·保存(全选切片,同一设置存储格式)

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

推荐阅读更多精彩内容

  • 1.三问切图 什么是切图?从设计稿(如.psd文件)中切出图片素材(如.png、.jpg文件)DIV+CSS切图1...
    LuckyPandaLee阅读 2,260评论 0 14
  • 开始之前…… 这篇文章并不是教你如何美化图片的,它针对前端开发的图片操作。 这篇文章注重细节,像是工具类文章。所以...
    黑白度阅读 7,636评论 4 39
  • 1.1.0 什么是切图: 从设计稿中切除网页的素材并在代码中引入图片资源。设计稿 (*.psd) >>(素材切出)...
    amadocode阅读 622评论 0 0
  • 切图工具 要点:- 使用PS工具- 使用背景图- 图片合并方案- 浏览器兼容 使用PS工具 PS首选项设置,将单位...
    MrMagicWang阅读 937评论 0 0
  • 准备工作 1、设置:首选项-》单位与标尺-》像素窗口-》面板-》选项、工具、信息(F8)、图层(F7)、历史记录 ...
    Ryann阅读 339评论 0 1