载入中...

Photoshop图象切片保存为网页HTML的方法

Partner 站长学院 2020-08-23 热度 624℃ 收藏 本文共590个字,预计阅读时间需要2分钟。

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

一,对图片进行切片

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

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

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

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

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

二,将切片导出为HTML+CSS

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

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

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

格式:HTML和图象

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

设置:自定

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

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

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

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

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

版权声明:本文内容来源于互联网资源,由 蓝魅网络 整理汇总,如有侵权请您与我们联系删除!
其他声明:如未标明出处,所有文章均为蓝魅网络原创,转载请务必保留本文链接,感谢您支持。
蓝魅网络 » Photoshop图象切片保存为网页HTML的方法
  • 售后服务范围 1、商业模板使用范围内问题免费咨询
    2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限会员用户
    3、单价超过200元的模板即可以免费一次安装,需提供服务器信息
    付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
    2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
    3、服务器环境配置安装(一般 ¥50-300)
    4、网站中毒处理(需额外付费,500元/次/质保三个月)
    售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
    免责声明提示 本站所提供的资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: [email protected]),我们会及时删除,给您带来的不便,我们深表歉意!

低至 ¥99 元/年 爆款产品限时抢

阿里云*云小站 | 上云优惠聚集地 | 领取限量云产品优惠

立即抢购

快捷登陆, 即可下载,建议使用QQ登录