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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web切图的几个快捷键及总结相关的知识,希望对你有一定的参考价值。

 

自由的控制视图系列

  • 自由的浏览图片:按住空格后,鼠标拖动
  • 自由的缩放图片:按住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)

看透明度情况使用png8png24

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

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

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

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

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

png-8gif有一些相似之处,模式都是索引颜色,只支持像素级的纯透明,不支持 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可用格式



















以上是关于web切图的几个快捷键及总结的主要内容,如果未能解决你的问题,请参考以下文章

web前端开发必备的几款 vscode 插件及常用快捷键

PS切图小技巧

前端切图PS必备快捷键

PS切图的几种方式

前端web切图技能

Visual Studio Code快速删除空行及几个常用快捷键总结