一、常见的图片格式 - jpeg、gif、png、psd

常见的图片格式 :

jpeg : 支持丰富的颜色 , 一般不透明的产品图片就是用该颜色 ;
gif : 颜色只有 256 色 , 只能存储简单图片 , 可设置透明背景和动画 ;
png : 结合了 gif 和 jpeg , 颜色丰富 , 可以设置透明背景 ;
psd : Photoshop 软件的专用格式 , 其中包含了图层 , 通道等信息 , 可以进行切图 ;

各种格式的图片使用场景 :

不需要透明背景的高质量图片就是用 jpeg 格式图片 ;
需要透明背景的图片就使用 png 格式 ;
如果需要动画效果使用 gif 格式图片 ;
美工使用 PhotoShop 设计的切图搞 , 就是 psd 格式 , 可以用于测量布局以及切图 ;

二、PhotoShop 切片工具

1、导入素材

将素材拖动到 PhotoShop 中打开 ,

2、选择切片工具

在 Photoshop 左侧的工具栏中 , 选择切片工具 ,

3、选择切片工具样式

切片工具选择后 , 在工具栏中 , 有三种样式 :

正常 : 使用鼠标任意拖动可随意改变矩形框大小 ;
固定长宽比 : 使用鼠标拖动 , 只能切出固定长宽比的图片 ;
固定大小 : 鼠标左键点击 , 即可生成一个固定大小的切片区域 ;

4、改变切片大小

使用切片工具框选一个矩形框后 ,

可以拖动矩形框上下左右中间位置的小方块 ,

改变矩形框的尺寸 ;

5、改变切片位置

如果切片大小合适 , 但是切片位置不对 ,

可以使用上下左右箭头按键 , 移动整体切片位置 ,

移动效果如下 ;

选择完切片后 , 选择 " 菜单栏 / 文件 / 导出 / 存储为 Web 所用格式 " 选项 ;

在弹出的对话框中 , 在右上角选择导出格式 JPEG 格式 , 然后点击右下角的存储按钮 ;

在弹出的对话框中的切片选项中 , 选择 " 选中的切片 " ,默认为所有切片 ;

设置完成后 , 点击 " 保存 " 按钮 ;

弹出下面的对话框 , 确定即可 ;

查看切图图片 , 在选择的目录中 , 生成了 images 目录 ,

进入 images 目录 , 可以看到根据切片工具矩形选区导出的图片 ;

【CSS】PhotoShop 切图 ① ( 常见的图片格式 - jpeg、gif、png、psd | PhotoShop 切片工具 )相关推荐

实用形ps切图技巧，图片格式及其相关
写在前面之前写了两篇前端图片相关的内容(前端ps切图方法,图文详细,css sprite雪碧图制作,使用以及相关,图文gif),本文是面向前端小白的,搜集整理的一些切图技巧,及其相关内容. 关于版本 ...
如何用photoshop切图并去掉图片上面的文字
公司没有美工,最近一个页面要做样式,只有自己上了,从来没做过,这下可就头大了.去网上查了一下,再加上问了一些人,现在总结一下. 一.如何用photoshop切图. ps里面有一个切片工具(slice ...
day07项目切图规范、常见的图片格式和特点、CSS精灵、 CSS小箭头、BFC、阿里矢量图标
文章目录 day07 项目切图规范 PS常用工具常见的图片格式和特点 CSS精灵 CSS小箭头 BFC (Block Formatting Context) 块级格式化上下文阿里矢量图标 day0 ...
【CSS】PhotoShop 切图 ② ( PhotoShop 切片选择工具 | 清除切片 | 新建基于图层的切片 | 透明背景图片切图 | 根据参考线选择切片 )
文章目录一. PhotoShop 切片选择工具二.清除切片三.新建基于图层的切片四.透明背景图片切图五.根据参考线选择切片一. PhotoShop 切片选择工具如果之前使用切片工具设 ...
PS常用工具、常见的图片格式和特点、 IE 浏览器常见兼容问题、CSS Hack
PS常用工具常见的图片格式和特点. IE 浏览器常见兼容问题.CSS Hack PS常用工具移动工具移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具快捷键:h 空格 + 鼠 ...
【CSS】PhotoShop 切图 ③ ( PhotoShop 切图插件 - Cutterman | 下载、安装、启动、注册、登录 Cutterman - 切图神奇插件 | 使用插件进行切图 )
文章目录一. PhotoShop 切图插件 - Cutterman 1.下载 Cutterman 插件 2.安装 Cutterman 插件 3.启动 Cutterman 插件 4.注册 Cutter ...
html css ps切图教程,Photoshop（PS）CSS切图必用工具
Adobe PHOTOSHOP日常咱们又被称为PS. div CSS必备切图工具PS截图多数人对于PHOTOSHOP的了解仅限于"一个很好的图象编辑软件",并不晓得它的诸多使用方 ...
七、vertical-align属性、透明度属性及兼容、ps常用工具、常见的图片格式、项目规范、命名参考、iconfont的使用
一.css其他属性 1.vertical-align属性设置元素的垂直对齐方式,适用于行级元素.行块级元素. (1)语法 vertical-align: top | bottom | middle ...
七、vertical-align属性、透明度属性及兼容、ps常用工具、常见的图片格式、项目规范、命名参考、iconfont的使用...
此文转载自:https://blog.csdn.net/qq_52426181/article/details/110228561 一.css其他属性 1.vertical-align属性设置元素的 ...

【CSS】PhotoShop 切图 ① ( 常见的图片格式 - jpeg、gif、png、psd | PhotoShop 切片工具 )

文章目录