怎么对psd文件进行div+css切图

来源：互联网 2023-03-16 19:17:36 版权归原作者所有，如有侵权，请联系我们

制作网页时有种方法叫div css，这是目前较为合理而已较为高效的制作网页的方法。我们通常会拿到一份psd格式的文件，需要对其进行div css切图，下面就为大家介绍这种方法的具体步骤：

怎么对psd文件进行div css切图？

方法/步骤

打开photoshop，再打开我们要进行div css操作的psd文件；

也可以在本地找到该psd文件，右键“打开方式”用photoshop打开。

怎么对psd文件进行div css切图？

选择工具栏中的“切片”工具（如图）。

怎么对psd文件进行div css切图？

2此文章未经许可获取自百度经验

找到要进行切割的地方，这里我们以一个“设置按钮”为例子。

选定按钮，界面被分成几个区域，其中被框住的是我们刚选定的区域（如图）。

怎么对psd文件进行div css切图？

右键，选择“编辑切片选项”（如图）。

怎么对psd文件进行div css切图？

在弹出窗口中，设置名称为“shezhi”（如图），点击“确定”。

名字可以自定义，只要不太复杂即可，容易记忆的最好，因为我们之后做网页插入图片或背景图片，要输入图片的名称。

怎么对psd文件进行div css切图？

按如图操作，打开菜单栏的“文件”，选择“存储为Web所用格式”。

怎么对psd文件进行div css切图？

在弹出窗口中，修改“预设”为PNG-24，小图标最好用PNG-24（如图）。

这几种格式都有讲究的，稍大的照片类最好用JPG，剪贴画、小文本最好选择PNG，PNG和GIF最适合单色图像和线条构成的图像。

GIF支持动画（虽然在这里我们用不上）。

选好就点击“存储”。

怎么对psd文件进行div css切图？

最后，我们在对应文件夹中可以看到我们切割完的图案“设置按钮”。

接下来就是制作网页时，用html或者css插入这张图片了。

怎么对psd文件进行div css切图？

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： CSS

上一篇：DW制作简约的用户评分代码模板下一篇：html5如何引用css文件