二十一、PS切图

一、切图

1.1、常见的图片格式

1.jpg图像格式：JPEG(JPG)对色彩的信息保留较好，高清，颜色较多，我们\color{red}{产品类的图片经常用jpg格式的}
2.gif图像格式：GIF格式最多只能存储256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，\color{red}{实际经常用于一些图片小动画效果}
3.png图像格式是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景，\color{red}{如果想要切成背景透明的图片，请选择png格式}
4.PSD图像格式PSD格式是Photoshop的专员格式，里面可以存放图层、通道、遮罩等多种设计稿，\color{red}{对我们前端人员来说，最大的优点，我们可以直接从上面复制文字，获取图片，还可以测量大小和距离}。
PS有很多的切图方式：图层切图、切片切图、\color{red}{PS插件切图}等

1.2、图层切图

最简单的切图方式，右击图层--->快速导出为PNG
但是很多情况下，我们需要合并图层再导出:
1.选中需要的图层：图层菜单--->合并图层（ctrl+e）

2.右击--->快速导出为PNG
image.png

1.3、切片切图

1.3.1、利用切片选择图片

  • 利用切片工具手动划出

1.3.2、导出选中的图片

文件菜单--->导出--->存储为web设备所用格式--->选择我们要的图片格式--->存储

1.4、PS插件切图

\color{red}{Cutterman}是一款运行再\color{red}{Photoshop}中的插件，能够自动将你需要的图层进行输出，以替代传统的手工"导出web所用格式"以及使用切片工具进行挨个切图的繁琐流程。

image.png

官网：https://www.cutterman.cn/zh/cutterman
\color{red}{注意：Cutterman插件要求你的PS必须是完整版，不能是绿色版，所以大家需要按照完整版本。}

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • PS切图
    ​ 因为网页美工大部分效果图都是利用 PS（Photoshop）来做的，所以以后我们大部分切图工作都是...
    Anwfly阅读 3,196评论 0赞 0
  • 小白前端08-浮动/PS切图/学成案例
    1.浮动 1.1传统网页布局的三种方式 普通流（标准流）概念：标签按照规定的默认方式排列块级元素会独占一行，从上到...
    OohMuYi阅读 3,273评论 1赞 0
  • CSS浮动+PS切图
    1. 浮动(float) 目标 记忆能够说出 CSS 的布局的三种机制 理解能够说出普通流在布局中的特点能够说出我...
    _刘彦辉阅读 2,833评论 0赞 1
  • 14 PS中的切图基本操作
    技术交流QQ群:1027579432，欢迎你的加入！ 欢迎关注我的微信公众号：CurryCoder的程序人生 1....
    CurryCoder阅读 1,828评论 0赞 1
  • ps切图神器Cutterman Mac中文版
    Cutterman中文免费版是专为photoshop用户打造的一款实用切图插件，能够自动将你需要的图层进行输出， ...
    希希的莫斯呱阅读 8,310评论 1赞 0

友情链接更多精彩内容