网页前端切图制作基础方法

2023-03-19 分类：网站建设

根据设计师提供的psd设计稿，实现HTML页面，需要将设计稿切分成为最终在页面中呈现的一张张图片，首页要打开Photoshop切图，切图中用到的快捷键总结及常用方法：
1.复制图层：CTRL+J。
2.撤销（只能撤销一次，在按一次就还原）： CTRL+Z。
3.撤销（能撤销多次，一直到无法撤销为止）： CTRL+ ALT+Z。
4.合并图层：CTRL+E。
5. 显示/隐藏标尺：CTRL+R。
点击photoshop“视图”菜单中的“标尺”，或者按键盘的“Ctrl+R”键，显示出标尺。
在标尺上点击鼠标右键，就可以选择标尺单位。

前端制作1

6.快速切到选框工具：M ，选框工具选择可以看到选中区域的像素，更精确地还原设计图。
7.图层上移：CTRL+}。
8.图层下移：CTRL+{。
9.自由变换：CTRL+T。
10.快速切到裁剪切片工具：C。
切片时，选中的切片CTRL+ALT鼠标移动到其他地方，可以切同样高宽的图。

11.存储为web所用格式：CTRL+SHIFT+ALT+S。下拉选择框选择格式。
PNG格式图片：为透明图片，适用于小图标或颜色简单对比强烈的小的背景图，不适合保存大图，是因为PNG图片占用空间相对JPEG格式较大，PNG图多了容易影响页面加载效率。
JPG格式图片：为不透明图片，适用于页面中的商品图片、Banner等图像，适合保存大图，常用来当背景图。
12. 快速切到移动工具：V。
前端制作3