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

2025-11-23 06:18:44

1、打开photoshop,再打开我们要进行div+css操作的psd文件;

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

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

2、选择工具栏中的“切片”工具(如图)。

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

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

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

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

4、右键,选择“编辑切片选项”(如图)。

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

5、在弹出窗口中,设置名称为“shezhi”(如图),点击“确定”。

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

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

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

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

7、在弹出窗口中,修改“预设”为PNG-24,小图标最好用PNG-24(如图)。

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

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

选好就点击“存储”。

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

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

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

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

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢