web前端人员自行切图教程

Web前端切图总结：

前期资料准备阶段：
1. 获取最终版 PSD格式文件。
2. 安装PS软件，并打开该PSD文件。

1. 获取页面设计需求文档或工单文件，了解需求后，开始准备进行切图。
用到的快捷键总结及常识知识：

2.1.复制图层：CTRL+J。

2.2.取消选择：CTRL+P。

2.3.新建PSD图层：CTRL+N。

2.4.合并图层：CTRL+E。

2.5.显示/隐藏蒙版：CTRL+ALT+G。

2.6.图层上移：CTRL+}。

2.7.图层下移：CTRL+{。

2.8.自由变换：CTRL+T。

2.9.存储为web所用格式：CTRL+SHIFT+ALT+S。

2.10.快速切到移动工具：V。

2.11.快速切到选框工具：M。

2.12.快速切到裁剪切片工具：C。

2.13.矢量图：无论图片放到多大，精度都不会变。

2.14.智能对象：在一定范围内，精度不会变化。

2.15.位图：图片放大，图片模糊，精度变化。

2.16.PNG格式图片：为透明图片，不会影响下方图片或背景的颜色。不适合保存大图。因为PNG图片占用空间相对JPEG格式较大。太多会影响页面加载效率。

2.17.JPG格式图片：为不透明图片，会遮挡下方图片或背景图。适合保存大图，常用来当背景图。其它图片如果不怕被遮挡下方图片，也可以用JPG格式图片。

切背景图片：

3.1.在移动工具下，勾选状态栏中自动选择按钮；根据个人需要选择图层或组。

3.2.点击要隐藏的目标(此时会自动跳到右侧图层位置，并显示在图层中所在位置，被选中状态),此时看看是否需要隐藏整个组，如果不许要，隐藏自身即可。隐藏图层，点击前面的小眼睛。小眼睛消失图层关闭。

图层显示

仅隐藏目标对象

隐藏目标对象所在的群组。

3.3.当页面内所有需要隐藏的内容全部隐藏后，就可以切背景图。选择切片工具。按照需求尺寸去划切片范围。当然如果需要精细切图，可以启动标尺，作为辅助工具(视图/标尺，选中)。将标尺横向或纵向拖动到目标位置。然后按照标尺的位置去裁剪。

3.4.当该页面所有背景图都切完后，就可以进行保存了。保存为web所用格式。CTRL+SHIFT+ALT+S。保存为JPEG格式。图片品质自己选择。根据需要将元数据选择无(可忽略此步)。然后选择保存路径即可。

3.4.保存完成后，去目录下查看。到此，切背景图完成。提示：有交互的，有动态的，一定不要保留在背景图上。背景图上只留UI要展示的纯静态的图片或文字等等。

大图切小图：

4.1.确定要裁切的大图一定是智能对象或矢量图。位图会令图片变形。

4.2.明确要切小图的宽高。并在PS里新建PSD图层(CTRL+N)。然后根据小图新建画布模板。

4.3.进入画布后，将所有要切的图片拖动到这里(如果电脑性能不佳，可分批拖动，否则会很卡)。然后按回车键，拖动几张图片就按几次回车，确保图片都被加载进来。

4.4.有些时候，图片大小是不一样，容易造成视觉混淆，所以，要关闭非目标图片。

4.5.操作图片，CTRL+T，令图片产生形变。建议，缩放图片时，按住shift，这样图片中心点不会变，缩放的图片不会变形，此过程中一定不要移动图片(移动图片会令图片中心点位置发生变化，同样会令图片变形)。提示，放大后的图片一定要和先关人员确定，得到认可方能保存。同样保存为web所用格式。

4.6.保存为web所用格式即可。到此为止，大图切小图完成。提示：大图切小图时，一定要考虑到目标元素的保护，千万不要将要展示的主要内容坏了。

切模块图片：

5.1.捞记移动工具状态栏的自动选择的勾选和图层/组的选择。

5.2.选中要切到目标图片，跳到对应的图层位置后，先隐藏一下试试，看看是否影响其它图片元素。看看是否有智能对象，如果有需要一起选中。看看知否需要整组切下来。

5.3.选中该组，在该组上右键，选择复制组。然后在弹出框里的目标区域下的文档处选择新建。然后确定，该组内容就会进入到新的PSD里。这样做的好处是：目标图片会在原PSD位置，大小也不会发生变化。

5.4.进入新的psd后，你会看到背景是透明的。此时，你需要用裁剪工具进行裁剪(不是切片工具)。进行精细裁剪。

5.5.裁剪后会进入裁剪预览，此时你可以微调。然后回车确认或在裁剪区域内部双击鼠标确认。

5.6.到此为止，在原PSD中切某个图片元素就完成了。同样存储为web所用格式即可。提示：在裁剪时，可以按住ALT不断放大，来控制精度。

更换背景图：

6.1.找到原背景图，确定其宽高。

6.2.打开新的PSD文件，然后CTRL+E合并图层。按照原背景图的宽高进行裁剪。如果高度不同，需要到CSS文件中进行调整。

提示：本教程仅为初级前端人员提供参考，文中的问题可能有更好更多的更快速的实现方法。如果更好的方法十分感谢指点一二。谢谢。

web前端人员自行切图教程相关推荐

web切图怎么做_web前端人员自行切图教程
web前端人员自行切图教程发布时间:2018-10-18 09:01, 浏览次数:360 , 标签: web Web前端切图总结: * 前期资料准备阶段: * 获取最终版 PSD格式文件. * 安装 ...
PS-前端切图教程（切jpg图和切png图）
ps:多日后的补充说明部分看了文章的设计师,来找我说怎么切图.sorry?在我的理解,这就是切图啊,但是他们所指的"切图"是,怎么把设计图制作成html页面. 在我看来,现在人们 ...
h5页面如何切图_PS-前端切图教程（切jpg图和切png图）
ps:多日后的补充说明部分看了文章的设计师,来找我说怎么切图.sorry?在我的理解,这就是切图啊,但是他们所指的"切图"是,怎么把设计图制作成html页面. 在我看来,现在人们 ...
photoshop 切图教程
转自:https://www.cnblogs.com/padding1015/p/7085539.html PS-前端切图教程(切jpg图和切png图) 一.切JPG图 1．打开ps导入图片的步骤是铁 ...
Web前端开发工程师实战培训教程
Web前端开发工程师实战培训教程现在Web前端开发的工作需求量很大,很多企业都专门去招聘Web前端的开发人员,待遇都是轻松过万的我推荐给你们一套系统性学习Web前端开发的课程,可以完整的学习Web ...
ps切图教程 android,Cutterman切图简单教程，小白最爱的切图攻略
目前很多手机app设计师都在使用Cutterman工具进行切图,因为这个软件是国内的软件,切图也必将方便.也提供了3个平台的切图方式.最新的Cutterman切图插件如下图: IOS: 如果你是为Ip ...
Web前端人员如何面试？常见vue面试题有哪些？
Web前端人员如何面试?常见vue面试题有哪些?vue是一套用于构建用户界面的渐进式JavaScript框架,也是初创项目的首选前端框架.很多企业在招聘前端工程师时都会考察其对vue的了解,接下来小编 ...
搭建直播平台前端界面初步切图
搭建直播平台前端界面初步切图我们先来看下初步的成果图首页直播房间页搭建直播平台前端界面初步切图帅气的小伙伴们,有发现什么共同的特点了吗? 没错,就是它们的头部导航栏都是一样的,而vue中一个很 ...
切图教程，app切图命名总结
再根据自己的习惯对APP切图命名进行整理总结. 结语: 作为一个有强迫症的设计师,希望产出是有缜密的思维逻辑,当然包括细节. 文字有的部分参考其它文章,整理后根据自己的工作经验作出的总结. 自己也还在 ...

web前端人员自行切图教程

前期资料准备阶段：

用到的快捷键总结及常识知识：

切背景图片：

大图切小图：

切模块图片：

更换背景图：

web前端人员自行切图教程相关推荐

最新文章

热门文章