分享WP资源
是件美好的事情

Photoshop切片导出HTML+CSS

腾讯云限时秒杀活动

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

一,对图片进行切片

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

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

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

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

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

二,将切片导出为HTML+CSS

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

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

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

格式:HTML和图象

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

设置:自定

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

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

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

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

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:莲花不妖 » Photoshop切片导出HTML+CSS
分享到: 生成海报

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录