Photoshop切片导出HTML+CSS

知更鸟 2020年8月10日10:19:44Photoshop1 1.1K

利用Photoshop切片功能可以导出HTML,做大尺寸图片背景网页时,将大图片切割成小图片,以免影响加载速度,也可以方便在图片上加锚点之类的。文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

一,对图片进行切片

首先,按ctrl+R调出标尺,在图片上用参考线划出不同的区域。文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

Photoshop切片导出HTML+CSS文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

切片方法一,使用工具栏上的“切片工具”按参考线划出一个一个的切片。文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

Photoshop切片导出HTML+CSS文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

切片方法二,手动切片有些麻烦,可以点选项栏里的“基于参考线的切片”。文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

Photoshop切片导出HTML+CSS文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

之后原来的参考线划出的区域就自动变成一块一块的切片了。文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

Photoshop切片导出HTML+CSS文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

可能有些区域不需要切片,可以调出“切片选择工具”删除切片。文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

二,将切片导出为HTML+CSS

依次选择菜单栏上的“文件”→“存储为Web所用格式”(Alt+Shift+Ctrl+S)→“存储”。文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

Photoshop切片导出HTML+CSS文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

接下来就会弹出一个“将优化结果存储为”窗口,如下图左:文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

Photoshop切片导出HTML+CSS文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

文件名:改成英文的,这个名称最后是CSS选择器的名称。文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

格式:HTML和图象文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

设置:选择”其它“,之后会弹出”输出设置“对话框,如上右图。文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

设置:自定文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

在第2个下拉框处选择“切片”文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

切片输出,选择“生成CSS”文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

点击确定,返回“将优化结果存储为”窗口,保存即可。文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

这样就可以输出一个包含div+css的HTML网页文件和一个images图片文件夹。文章源自知更鸟-https://zmingcx.com/photoshop-slice-export-html.html

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

文章源自知更鸟 | 崇尚专注 追求极致 分享交流WordPress经验与技巧,关注前端设计与网站制作,打造自己专属的WordPress主题,让你的博客与众不同!
weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
磨皮教程:双曲线、中性灰、高低频 Photoshop

磨皮教程:双曲线、中性灰、高低频

修图三大酷炫神技:双曲线、中性灰、高低频是从先进的外国传入我国的,这类技巧通常适用于时尚片修图,今天就跟大家分享一篇关于这三大酷炫修图神技巧的讲解教程。 一、Photoshop双曲线手工磨皮修图大法 ...
利用Photoshop应用图像只调整人物脸部亮度 Photoshop

利用Photoshop应用图像只调整人物脸部亮度

打开一张图片,新建调整层→亮度/对比度 发现在调整人物脸部亮度时,会将头发等其它细节也同时调整了 可以利用Photoshop应用图像只调整人物脸部亮度 在调整层上执行图像→应用图像 之后会发现头发等其...
利用Photoshop图层蒙板调整花的颜色 Photoshop

利用Photoshop图层蒙板调整花的颜色

打开一张花束图片,新建调整图层→色相/饱和度,调整颜色 原图花是黄色的,调整为红色 会发现除花束颜色变了,背景颜色也同时变了 解决办法: 在调整图层新建图层蒙板并填充黑色 之后会发图片恢复原状了 选择...
Photoshop 快速磨皮教程 Photoshop

Photoshop 快速磨皮教程

最简单最快速的Photoshop 快速磨皮方法,即可以起到美化磨皮效果,还可以保留原皮肤的纹理。 首先找一张没磨皮的图片,明星的就算了,都磨过了。 复制两个背景图层(ctrl+j) 将上面的图层隐藏 ...
匿名

发表评论

匿名网友

:?: :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

      这个方法给力