手记

网页切片方法知识点总结

网页切片方法:
1、传统切片:用切片工具和切片选择工具配合使用把网页需要的区域切出来,注意导出时要导出用户切片,即主动切片

2、快速自动切图:用文件——导出(或脚本)菜单下的“将图层导出到文件”命令,把所有需要切片的图层直接导出成图片,好处是图层阴影都可以完美导出。注意导出前复制一份源文件,并将不需要导出的文字之类的图层删掉,把能合并的图层合并,这样可以节省很多导出时间。
(但目前有个问题没有解决:我用PS2017做此操作时总是提示我“不能导出图片,因为没有用户切片”而不能完成操作,但其他版本的PS没发现此问题。不知道是PS版本问题还是某个设定问题,有大神知道的望指教)

3、修改文件名生成切片图:首选项—增效工具中勾选“启用生成器”,在“文件—生成”中勾选“图像资源”,则可以在想要切片的图层上,把图层的文件名改成加图片格式后缀的形式(如:tupian.jpg或tupian.png),则会在当前网页的PSD文件保存目录里自动生成一个文件夹,然后把相应的图层会自动保存成相应格式的图片文件保存在内。如需得到高质量的JPG图片则可把图片命名为:200% tupian @2x.jpg。如需得到压缩的jpg图片则可把图片命名为tupian.jpg8,这样图片就是压缩为80%大小的JPG图了。

4、导出SVG格式图片:“文件—抽出资源”命令可以把图层名称加了SVG后缀的图层(如“tupian.svg”)导出成SVG格式的图片/网页文件,这种格式是一种矢量格式,可以自适应网页大小,可以在代码编辑器里打开,直接以代码方式显示。

5、复制图层CSS代码:如果想得到某个图层的CSS代码的话,可以用“图层—复制CSS”命令,然后在代码编辑器中粘贴即可

2人推荐
随时随地看视频
慕课网APP