索鸟网

  1. 首页
  2. 网页切片方法知识点总结

网页切片方法知识点总结


网页切片方法:
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”命令,然后在代码编辑器中粘贴即可

相关标签: Html/CSS Photoshop 前端工具

来源地址:http://www.imooc.com/article/19586 版权归作者所有!

相关教程

  • 前端知识点总结

    HTML HTML&XHTML&HTML5 HTML4,HTML5,XHTML 之间有什么区别? - 知乎 属性 javascript - defer和async的区别 - SegmentFault script的defer和async CSS float W3文档 Does “clear:right” affect
  • java知识点总结

    最近回顾java基础,总结一些容易忘记的知识点,慢慢补充: 1:java基本数据类型分为boolean类型与数值类型(整数类型(byte、short、int、long)、字符类型(char:2字节)、浮点类型(float、double)),数值类型间可以相互转化,boolean与数值类型不能强制转化。 2:long类型的直接量需要在数值后
  • 前端知识点总结

    知识点一:DOCTYPE和浏览器渲染模式 文档类型,一个文档类型标记是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档。Doctype还会对浏览器的渲染模式产生影响,不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析,所以Doctype是非常关
  • axios知识点总结

    概要 最近的一个项目中使用了axios来代替XMLHttpRequest来发送请求。也是遇到了一些问题。这里做下简单的记录。 GET请求不同方式结果不同 官方文档我们可以看到的示例demo如下: // 直接在请求理解里面拼接参数get参数 axios.get("/user?ID=12345") .then(function (response) {
  • Java知识点总结

    索引的实现方式 1、B+树 我们经常听到B+树就是这个概念,用这个树的目的和红黑树差不多,也是为了尽量保持树的平衡,当然红黑树是二叉树,但B+树就不是二叉树了,节点下面可以有多个子节点,数据库开发商会设置子节点数的一个最大值,这个值不会太小,所以B+树一般来说比较矮胖,而红黑树就比较瘦高了。 关于B+树的插入,删除,会涉及到一些算法以保持树的平衡,这里就
  • 初学webpack知识点总结

    1、webpack的安装: 初始化npm :npm init 安装webpack :npm install webpack --save-dev 2、webpack基本配置: 配置文件: var path = require("path"); module.exports = {// commonJS的模块化输出 entry : "./src/s
  • 多线程知识点总结(一)

    1.传统的创建线程的两种方式: public class TraditionalThread { public static void main(String[] args) { //1. 继承Thread类,重写run方法,覆盖父类中的run方法 Thread thread=new Thread(){ @Override
  • JSON-----小知识点总结

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。 JSON 语法规则 JSON 语法是 JavaScript 对象表示语法的子集