Photoshop切片导出HTML+CSS

知更鸟
知更鸟
站长
2331
文章
0
粉丝
Photoshop1 1,978阅读模式

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

一,对图片进行切片

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

Photoshop切片导出HTML+CSS-图片1

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

Photoshop切片导出HTML+CSS-图片2

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

Photoshop切片导出HTML+CSS-图片3

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

Photoshop切片导出HTML+CSS-图片4

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

二,将切片导出为HTML+CSS

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

Photoshop切片导出HTML+CSS-图片5

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

Photoshop切片导出HTML+CSS-图片6

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

格式:HTML和图象

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

设置:自定

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

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

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

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

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

本站文章大部分为原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
    • 李飞seo
      李飞seo 1

      这个方法给力

    匿名

    发表评论

    匿名网友
    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

    拖动滑块以完成验证