A-A+

Photoshop切片导出HTML+CSS(转)

2020年09月10日 方法、技巧 暂无评论

利用Photoshop切片功能可以导出HTML,做大尺寸图片背景网页时,将大图片切割成小图片,以免影响加载速度,也可以方便在图片上加锚点之类的。

一,对图片进行切片

首先,按ctrl+R调出标尺,在图片上用参考线划出不同的区域。

Photoshop切片导出HTML+CSS

切片方法一,使用工具栏上的“切片工具”按参考线划出一个一个的切片。

Photoshop切片导出HTML+CSS

切片方法二,手动切片有些麻烦,可以点选项栏里的“基于参考线的切片”。

Photoshop切片导出HTML+CSS

之后原来的参考线划出的区域就自动变成一块一块的切片了。

Photoshop切片导出HTML+CSS

可能有些区域不需要切片,可以调出“切片选择工具”删除切片。

二,将切片导出为HTML+CSS

依次选择菜单栏上的“文件”→“存储为Web所用格式”(Alt+Shift+Ctrl+S)→“存储”。

Photoshop切片导出HTML+CSS

接下来就会弹出一个“将优化结果存储为”窗口,如下图左:

Photoshop切片导出HTML+CSS

文件名:改成英文的,这个名称最后是CSS选择器的名称。

格式:HTML和图象

设置:选择”其它“,之后会弹出”输出设置“对话框,如上右图。

设置:自定

在第2个下拉框处选择“切片”

切片输出,选择“生成CSS”

点击确定,返回“将优化结果存储为”窗口,保存即可。

这样就可以输出一个包含div+css的HTML网页文件和一个images图片文件夹。

有童鞋问,网上所谓PSD设计图生成网页模板之类的,用这个方法是否能自动生成一个高大上的网页模板?答案是:不能,无稽之谈,没有HTML+DIV+CSS基础,生成的网页文件,基本没什么用处...

本文来源:https://zmingcx.com/photoshop-slice-export-html.html

标签:

给我留言

Copyright © 众人搜索网 保留所有权利.   Theme  Ality 鲁ICP备11032800号

用户登录 ⁄ 注册