ps切图

我会带着你远行 2022-07-12 06:54 303阅读 0赞

**1.切图**

切图是指将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面。  
通俗来讲，把一张设计图 利用到切片工具 把自己所需的切成一张张小图，然后用DIV+CSS完成静态页面书写，完成CSS布局。

切图大家都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，把图片切出来这个过程是叫切片。

**切图的目的：**  
第一个是让网页稿有了交互性，实现你平时看到的各种各样的功能。  
第二个是体积，所以切图时候一定注意少用图片工具：主流是dreamweaver，也有公司自己开发平台进行制作的。  
采用div+css布局更能减小网页体积是表现与内容分离。

**2.将一张图分成相同大小几部分的切图**

（1）ps打开要切的图，在左侧的工具栏中选择切片工具  
![这里写图片描述][SouthEast]

（2）在图上右击，选择划分切片，这时候可以选择水平和垂直方向划分切片，将图均匀的划分。

![这里写图片描述][SouthEast 1]

划分为水平和垂直各2个切片  
![这里写图片描述][SouthEast 2]

（3）在图中任意位置单击，就可以完成切图。完成后，辅助线变成了蓝色  
![这里写图片描述][SouthEast 3]

（4）保存图片。选择存储为web所用格式，保存。  
![这里写图片描述][SouthEast 4]

**3.将一张图切成任意大小的小图**

（1）打开需要切图的图片，手动选择参考线的位置。**视图—新建参考线**，然后可以选择参考线的方向和位置  
参考线的作用：参考线在鼠标靠近时有吸附功能，所以切图不容易切错位置。

![这里写图片描述][SouthEast 5]

![这里写图片描述][SouthEast 6]

（2）切换到切片工具，沿参考线划出切片，右击可以看到有可以编辑切片的选项，可以设置切片像素大小。  
注意：选中切片成功，切片边框线**变成实线**，并且对应编号**颜色变蓝**；未选中或选中切片失败，编号颜色是灰色，并且边框为虚线。

![这里写图片描述][SouthEast 7]

（4）选择要存储的切片，然后右上角可以设置图片的格式、质量大小。  
文件—存储为web所用格式—存储  
图片格式，可以选择JPEG、PNG或GIF等；  
如果选择预设为“JPEG 高”，这时图片品质为60，保存后的图片背景为白色；  
如果选择预设为“PNG24”，保存后的图片背景透明。  
以一般情况下如果是网上使用的图片，品质可以设置60，既保证图片较小也不会模糊。

![这里写图片描述][SouthEast 8]

注意：也可以选择“切片选择工具”，然后右击划分切片，均匀划分成几个小图后直接保存

**4.从psd中切图**  
（1）打开psd，ctrl+alt+滚轮可以实现图片的放大和缩小，将需要切的图标调整到合适的大小和位置。  
假设本次需要切的是这个二维码  
![这里写图片描述][SouthEast 9]

（2）选择—自动选择—图层—然后点击需要切得图标  
![这里写图片描述][SouthEast 10]

这里的二维码包含多个图层，所以选择这个组，然后右击选择复制组  
![这里写图片描述][SouthEast 11]

目标文档选择新建并输入名称，确定  
![这里写图片描述][SouthEast 12]

（3）此时有一个新建的二维码文件，放大到一定比例开始切图

![这里写图片描述][SouthEast 13]

（4）左侧工具栏选择切片工具，然后沿着图标开始划线

![这里写图片描述][SouthEast 14]

（5）调整虚线，使得虚线紧挨图标的边缘，最后存储为web所用格式，保存选中的切片，将图片保存。

![这里写图片描述][SouthEast 15]

存储的图片

![这里写图片描述][SouthEast 16]

[SouthEast]: /images/20220711/8bdd954d920846e98a34eb1c0942a5d4.png
[SouthEast 1]: /images/20220711/5d94af3e90c84f40a5bc1eeee918c90a.png
[SouthEast 2]: /images/20220711/f01755987d644a8d9100a7553857c478.png
[SouthEast 3]: /images/20220711/ef7a9979040c459381d0a8f19fcf777d.png
[SouthEast 4]: /images/20220711/3aa7ac0e81dc49b0bab5aebbc4701d99.png
[SouthEast 5]: /images/20220711/a17bfc87f9f7409593ef8fbadcaa0c77.png
[SouthEast 6]: /images/20220711/555ab857f4864af29f561221bf3531a2.png
[SouthEast 7]: /images/20220711/ad526e3c81e445d9aa7b75b15207d5df.png
[SouthEast 8]: /images/20220711/098c166ca7c844d98bb6e43b44a3cbe5.png
[SouthEast 9]: /images/20220711/981ec80087f445debc7c875db2f55cf7.png
[SouthEast 10]: /images/20220711/4a4431560e984867ad81311c8bb79d55.png
[SouthEast 11]: /images/20220711/2cb9da54bbd0435c9971f07a2d1e0d95.png
[SouthEast 12]: /images/20220711/86e19c366fa3418a93ff0c7d8dd73f01.png
[SouthEast 13]: /images/20220711/df598de1208444b78fdde8c641fe1480.png
[SouthEast 14]: /images/20220711/cf8fc6054da2432e86a00b0d6b667e0b.png
[SouthEast 15]: /images/20220711/bfb1b3d60c3e46aeb0e20c628c43df4a.png
[SouthEast 16]: /images/20220711/0a663dbfd6a94ba49dfccb6b85f7b9de.png