网页前端切图制作基础方法(如何制作前端网页)

根据设计师提供的psd设计稿，实现HTML页面，需要将设计稿切分成为最终在页面中呈现的一张张图片，首页要打开Photoshop切图，切图中用到的快捷键总结及常用方法：

1.复制图层：CTRL+J。

2.撤销（只能撤销一次，在按一次就还原）： CTRL+Z。

3.撤销（能撤销多次，一直到无法撤销为止）： CTRL+ ALT+Z。

4.合并图层：CTRL+E。

5. 显示/隐藏标尺：CTRL+R。
点击photoshop“视图”菜单中的“标尺”，或者按键盘的“Ctrl+R”键，显示出标尺。
在标尺上点击鼠标右键，就可以选择标尺单位。

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。

一般多个小图标，个人比较常在图层面板选中全部图标，复制图层，点击新建文档，

点击垂直居中对齐和水平居中对齐

选择图像，裁切，基于透明像素
在图层面板中，把其他图层对应的小眼睛关闭，隐藏图层，保存当前图层，保存的图标高宽是一样的。
单个小图标，可以点击图层右键转化成智能对象，右键选择编辑内容，弹出框按确定，就会新建一个小图标的页面，保存。
 

以上就是关于网页前端切图制作基础方法(如何制作前端网页)，希望对你有帮助，更多内容关注创新互联。

本文名称：网页前端切图制作基础方法(如何制作前端网页)
URL网址：/news25/321125.html

成都网站建设公司_创新互联，为您提供虚拟主机、微信小程序、全网营销推广、手机网站建设、响应式网站、网站制作

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联