Photoshop切片导出HTML+CSS

知更鸟
知更鸟
知更鸟
1633
文章
6930
评论
2020年8月10日10:19:441 475

利用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基础,生成的网页文件,基本没什么用处...

weinxin
版权声明
本站原创文章转载请注明文章出处
关于Photoshop CC 2017 临时文件夹 实用技巧

关于Photoshop CC 2017 临时文件夹

升级到Photoshop CC 2017后,每次打开Photoshop会在程序安装盘的下一个盘符中生成名称类似XXXzxpsign8251fd8558a05d80的两个文件夹,关闭程序后也不会自动删除...
像素画基本技法 Photoshop

像素画基本技法

随着高清移动显示设备的逐渐普及,网页设计者又多了一项繁琐的工作,需要为高清设备单独制作背景图片,去适应Retina(视网膜)显示。虽然对这项技术本人还未完全掌握,但为了追赶潮流,目前正在制作的新主题也...
photoshop制作科幻电影游戏酷炫艺术文字教程 Photoshop

photoshop制作科幻电影游戏酷炫艺术文字教程

  第一步:   我们先从最简单的形状入手,一开始就添加细节是毫无意义的。首先,创建最基本的形状。如果在没有添加任何效果时,你创建的形状都很漂亮,那么这是一个非常好的开始。就像建筑一样,需要有一个好的...
匿名

发表评论

匿名网友

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

评论:1   其中:访客  1   博主  0
    • 李飞seo 李飞seo 1

      这个方法给力