前端开发人员必备技能--切图

xw2327
253 阅读2分钟

常见的一些图片格式

  • JPEG（Joint Photographic Experts Group）是JPEG标准的产物，该标准由国际标准化组织（ISO）制订，是面向连续色调静止图像的一种压缩标准。JPEG格式是最常用的图像文件格式，后缀名为.jpg或.jpeg。但是背景不是透明的

  • PNG是一种采用无损压缩算法的位图格式，支持背景透明，压缩比高，生成文件体积小。一般切图出来，保存的图片都伟PNG格式

  • GIF的全称是Graphics Interchange Format，可译为图形交换格式，用于以超文本标志语言（Hypertext Markup Language）方式显示索引彩色图像，在因特网和其他在线服务系统上得到广泛应用。

  • PSD/PDD是Adobe公司的图形设计软件Photoshop的专用格式。

    PSD文件可以存储成RGB或CMYK模式，还能够自定义颜色数并加以存储，还可以保存Photoshop的图层、通道、路径等信息，是唯一能够支持全部图像色彩模式的格式。

工具

Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。主要运用于进行美化、修改图片。

image-20220525150328234.png

PS切图

PS中很多种方式可以切图，其中有 图层切图，切片工具切图，插件切图等。

今天我们要讲到的是 图层切图和切片切图就可以满足大多数人的使用了。

图层切图

  1. 首先打开PS，并把今天要用到的图片素材放进去

image-20220525152834002.png

  1. 选中其中任意一个图层

image-20220525153008121.png

  1. 鼠标反键,会弹出很多选项，找到快速导出为PNG

image-20220525153113593.png

  1. 选择图片保存的路径->更改保存图片的文件名->保存图片

image-20220525153343185.png

  1. 图片就保存下来了

image-20220525153614344.png

这就做好啦😀

切片工具

  1. 打开PS ，导入今天的素材

image-20220525153717024.png

  1. Char + R 调出标尺

image-20220525153842742.png

  1. 长按标尺部分拖拉到你想要切出的图片区域 Char + h 可以切换标尺的显示隐藏状态

image-20220525154121028.png

  1. 在右边工具栏找到裁剪工具->鼠标反键出来选项卡->选择切片工具

image-20220525154414295.png

  1. 在有标尺的辅助下框选出想切出图片的部分

image-20220525154638455.png

  1. Char + Shift + Alt + S 调出保存为Web所用格式选项框

image-20220525154808347.png

  1. 更改格式为PNG格式

image-20220525155029012.png

  1. 通过放大缩小功能或者左上角的抓手工具把窗口调整到合适大小并用Shift键长按去点选要切的图片并点击右小角的存储

image-20220525155443653.png

  1. 调出选项狂，更改存储位置->更改文件姓名->切片模式改为选中的切片->最后点击保存

image-20220525155703159.png

  1. 找到刚保存好的文件夹

image-20220525160301379.png

这就做好啦😀

avatar
文章
阅读
粉丝