web中切图快速切图与web雪碧图制作的方法

Posted 2020-10-10 暗恋桃埖源

声明： web小白的笔记，欢迎大神指点，联系QQ：1522025433。

工具：Photoshop

1.复制文字：点击文章工具后选择文字。

2.矩形选框工具 看信息 f8， 取消矩形选框 Ctrl+D。

3. 传统切图：用工具栏的 矩形选框工具 选中你想要的图片部分，然后选择编辑栏（最顶上的一栏）选择 图像-->裁剪 然后你想要的图片就出来了，
然后再 储存为web所用格式（点击编辑栏的 文件-->储存为web所用格式 ） 即可。

4.快速切图（快速切图的代替方法吧，可以和切图达到一样的效果，传统意义上的切图，图像边缘有渐变色，可能会切掉，建议使用这种方法，
这种方法做不到再进行传统切图）：选择工具栏中的 移动工具，在上面选择 自动选择 前打上√，在 自动选
择后 选择 图层（此时你可以拖动你要选择或要切的图，观看是否移动，看看有没有选中），
选中此 图层 后，右键此 图层 把此图层 转换为智能对象 ，然后选择 矩形选框工具 ，框选住你要切的图 Ctrl+c 复制，然后
Ctrl+n 新建 ，此时就会记住你选择图层的画布大小，然后 Ctrl+v 粘贴 刚刚复制的图，就OK了，
最后，储存为web所用格式即可。

5.f12 初始化图片，即重新打开 文件。

6.ctrl+alt+z 撤销

7.看文字的宽度：用3的方法选取文本框（图层内只有文字的图层）后，按住ctrl键点击文字图层（就是利用魔棒工具选中文字，然后看其宽度），
同时也在信息窗口就可以看见文字的宽度了。当然也可以用3 方法看大小，即 ctrl+n新建 看画布的大小。

8.雪碧图的制作： 先按照3的步骤做出一个 图标，让后根据 下一个图像的大小增大画布（编辑栏 图像-->画布大小），然后直接选中psd稿里的第二个
图标图层，直接拖拽到，画布增大的位置，利用键盘上的上下左右进行微调。

9. 如果想给图片加背景，就新建一个图层（新建方法：编辑栏 图层-->新建-->图层）。可以利用工具栏里的油漆桶工具（和渐变工具，3D材质拖放工具在一块），
为图层填充颜色。填充的时候一定要先选中要填充颜色的图层，别弄错了。这里要注意一点，在图层窗口里，要看图层的排列顺序，在上面的图层会
显示在 在下面的图层 的上面。也就是说上面的图层会覆盖下面的图层。

10. 图层的打开方法： 在编辑栏中 选择 窗口-->勾选 图层。 就会出来。