web切图的几个快捷键及总结

Posted 2020-10-03

 

自由的控制视图系列

• 自由的浏览图片：按住空格后，鼠标拖动
• 自由的缩放图片：按住alt+滚轮
• 切换到实际像素（100%）：Ctrl + 1
• 工作区类型切换：Tab

控制内容系列

• 通过画面上点选一个图层：Alt + 鼠标右键
• 在画面上拖动一个图层：V 切换到移动模式 鼠标拖动
• 复制拖动一个图层：移动模式下 Alt+拖动
• 删除一个图层：选中要删除的图层 按下 Delete
• 合并多个图层：选中要合并的图层 按下 Ctrl+E
• 选区内填充颜色：Alt+Delete (前景色) Ctrl+Delete(背景色)
• 缩放当前选择图层：Ctrl+T(自由变换模式)

实用工具系列

• 画一个选区：点击M进入选区模式 ， 鼠标拖画
• 放弃选区：Ctrl+D
吸管工具：点击I进入吸管模式，点选画面颜色
• 文字工具：点击T进入文字模式，点选画面的文字或者创建新文本
• 切片工具：点击C进入切片模式（旧版本会有不同）

• 快速隐藏其他图层：alt+小眼睛

• ctr+r标尺

 

切图之前的思路分析

拿PSD效果图后，首先应该对这张效果图进行分析，在切图层面上，主要分析三点哪些图片是单独的，比如Logo和banner部分

 

哪些图片是需要平铺的，比如导航部分的背景*

哪些图片是需要CSS sprite
比如一些列表前面的icon小图标

图片的格式
logo统一切成png透明度的（颜色较少的都用png）

看透明度情况使用png8或png24

一般情况下临时图
、ad
、banner
图用jpg格式，色彩丰富的、大图切成jpg

颜色较少的都用png，用png8还是png24需看图片具体透明底情况，半透明的切成png24

在保证图片的画质情况下，图片的大小越小越好

尺寸小的，色彩不丰富的和背景透明的切成gif或者png8的

（注：IE6不支持PNG24透明度图片，需做兼容处理或切成PNG8）
*【PNG-8和PNG-24的区别】png8有1位的布尔透明通道（要么完全透明，要么完全不透明），png24则有8位（256阶）的布尔透明通道（所谓半透明）**

png-8 和gif有一些相似之处，模式都是索引颜色，只支持像素级的纯透明，不支持 alpha 透明。

（注：我们通常说的“IE6不支持 PNG 透明”，是指不支持 PNG-24 的透明。但是 IE6 支持 PNG-8 的透明，就像支持gif的透明一样）
切图的一些小技巧
Ctrl+N
新建一个透明背景图层（大小识图层比例而定，比裁剪的图层大就行）

shift
+鼠标左键点击图层可选中多个图层进行操作

Ctrl
+鼠标左键选中需要裁剪的图层移至第1步中新建好的透明背景图层当中，再按ctrl+shift+E
进行合并可视图层。

Ctrl
+鼠标左键点击右边图层栏的选区视图，选中需要裁剪的图层选区，再按快捷键[Alt+I+R
（裁切）或Alt+I+P
（裁剪）]进行裁剪

裁剪完成后ctrl+shift+alt+s
进行保存为web可用格式。