什么是切片 ?     (Photoshop中的切片)

切片:将图片切成几部分,一片一片往上传,这样上传的速度比较快。每个切片作为一个独立的文件传输,文件中包含切片自己的设置、颜色调板、链接、翻转效果及动画效果。

切片工具:主要是用来将大图片分解为几张小图片,这个功能用在网页中较多,因为现在的网页中图文并茂,也正因如此所须的时间就比较长,为了不让浏览网页的人等待时间太长,所以他们将图片切成几个小的来组成。

切片是网页制作过程中非常重要的一个步骤,往往切片的正确与否会影响着网页的后期制作。一般是用Ps或者Fw对网页的效果图或者大幅度的图片进行切割。重要的正确的切片会给网站带来一非常正面的影响。比如:减少网页加载时间、制作动态效果、优化图像、链接等。

一、网页切片的制作

1、  减少网页加载时间

有时候网页上可能需要大的banner图片,那么浏览器下载这个图片就要花费很长的时间,这是很不利于用户体验的。而网页切片的出现就很好的解决了这个问题。切片的使用使整个大的图片分为不同的很多的小图片,浏览器也会对这些小图片进行下载,这样浏览器下载图片的时间就大大的缩短了,节约了很多时间。

2、  优化图像

一般说一个完整的图像只能是一种格式,jpg、gif、png、psd、dpf或者其他,一种格式那么我们就只能采取一种优化方式。而网页切片可以把这张分割成很多小图片,并且可以保存成其他格式,可以分别对其优化。这样就能保证图片质量高等的情况下还能减少图片的内存,也提高网页的加载速度。

切片前的准备:另存网页PSD文件,整合ps的图片

切片的具体准备:分割切片、切片的类型(用户切片、非用户切片)

切片的基本要点:

1、根据颜色范围来切;

2、切片大小:把网页的切片切的越小越好;

3、切片区域为完整性:保证完整的一部分在一个切片内,例如某区域的标题文字,以后修改时方便;

4、导出类型:颜色单一过渡少,应该导出GIF,颜色过渡比较多,颜色丰富的应该导出JPG,有动画的部分应该导出为GIF动画;

5、保留文件:即使页面好了,也要保留带切片层的源文件,说不上哪天要改某个部分,例如文字什么的,直接修改单独到处所用的切片就可以了。

切片的图层显示和隐藏:背景图片的切片;不规则图片的切片。

切片的编辑:大小、调整、删除、清除切片(可一个个选中右击删除,也可视图所有都删除)、保存切片(存储为web所用格式)

删除切片

编辑切片选项:切片类型、名称:自动生成的,一般采用英文命名,网页代码中运用英文比较友好、URL:是链接地址、目标、ALT标记:通过可以搜索优化图片、                                         尺寸W H X Y、切片背景:一般默认无

划分切片:水平划分、垂直划分         组合划分

保存切片(存储为web所用格式)ctrl+shift+alt+s:一般常用格式为jif、png—24支持背景透明(透明度勾选支持背景透明)、jpeg(图片品质一般80以上)。                                  然后点击保存,保存格式,格式有极限图像,设置为默认设置,切片(所有切片:不管是用户切片还是非用户切片都会导出来、所有用户切片:只会导出                                  切到的切片、选中切片:只会导出在选中的切片),会自动生成一个文件夹(images)

切片的格式:

1、三种切片格式的介绍:颜色范围比较鲜艳的使用jpg格式、png支持网页透明、jif支持颜色范围比较单一。

2、三种切片格式的比较(适用范围):jpg网页中都支持这种格式;png支持透明和背景无关;jif动画可以发表情。

3、三种切片的适用范围及优缺点:png:IE6不支持图片透明;gif动画导出的颜色单一,当颜色鲜艳时会出现锯齿状。

切片的保存及重命名:

1、切片的导出保存

2、切片的重命名,名称最好是英文的,也不要以特殊的符号开头

切片的技巧(渐变、阴影、不规则) :

渐变:可以单独拉一个切片

阴影:网页中如何实现,css3也可以实现阴影但是ie6、ie8不支持,可以单独为阴影做一个切片,让背景关掉保存为png-24格式

不规则:背景隐藏掉,保存png格式

网页切片实战练习

有的颜色可以自己表示、挂件制作(整个切)、视频播放按钮

步骤:整理图层、另存一下(为图片做备份)、尽可能的做精确点、画布多的话可以新建一个然后复制到新的画布

切片如何快速插入:超链接或者添加为背景链接

总结   切片的知识点及要点:切片的概念、作用、格式选择

以上为自己自学中的笔记记录,如有错误请指教,谢谢。

前端之Photoshop切片的更多相关文章

  1. 前端之photoshop的简单使用

    常用图片格式 图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特效,可以方便我们在制作网页时选取适合的图片格式. 图片格式及特性如下: 1.psd psd是photos ...

  2. 关于前端的photoshop初探的学习笔记

    写在前边 这还是高三的时候暑假的时候学习这个软件时记的笔记呢,今天又在电脑上找到了它,总觉得不应该让他尘封在我的硬盘上,于是挂了出来.温馨提示:比较乱,写给自己看的,看不下去,按ctrl+W 笔记内容 ...

  3. photoshop 切片工具进行切图

    1.使用切片工具切图 2.存储为web所用格式 3.选择图片格式 4.只保存切片(选择所有用户切片)  5.查看:

  4. web前端知识总结

    前言: 一直想着整理一下关于前端的知识体系和资料,工作忙了些,挤挤总会有的,资料很多,就看你能不能耐下心坚持去学了,要多学多敲多想,祝你进步~ 学习之前首先要大概了解什么是HTML ,CSS , JS ...

  5. 3D打印机切片与控制软件

    3D模型必须经由两个软件的处理来完成打印程序:切片与传送.切片软件会将模型细分成可以打印的薄度,然后计算其打印路径.3d打印机客户端软件再把这系列动作传送到硬件,并提供控制其他功能的控制介面.了解您的 ...

  6. vue+element+oss实现前端分片上传和断点续传

    纯前端实现: 切片上传 断点续传 .断点续传需要在切上上传的基础上实现 前端之前上传OSS,无需后端提供接口.先上完整代码,直接复制,将new OSS里的参数修改成自己公司OSS相关信息后可用,如遇问 ...

  7. Python基础+Pythonweb+Python扩展+Python选修四大专题 超强麦子学院Python35G视频教程

    [保持在百度网盘中的, 可以在观看,嘿嘿 内容有点多,要想下载, 回复后就可以查看下载地址,资源收集不易,请好好珍惜] 下载地址:http://www.fu83.cc/ 感觉文章好,可以小手一抖 -- ...

  8. 麦子学院python开发全套完整无加密课程

    点击了解更多Python课程>>> 麦子学院python开发全套完整无加密课程 第一阶段:Python基础准备 1.Web前端开发之HTML+CSS基础入门 2.Javascript ...

  9. [译]PrestaShop开发者指南 第一篇 基础

    # 第一篇 基础 PS(PrestaShop简称)一开始就设定了能够在它的基础上很简单的构建第三方模块的机制,让它成为一款具有极高定制性的电子商务软件. PS的可以在三个方面进行定制: * 主题 * ...

随机推荐

  1. 在winform中怎样实现好看的treeview样式

    这是在网上截取的一张图,就是想做成这样的效果,不能用devExperss控件,主要是不知道他的那个“组织机构列表“用的是不是panel,怎样弄的样式

  2. C#对文件的操作

    本文收集了目前最为常用的C#经典操作文件的方法,具体内容如下:C#追加.拷贝.删除.移动文件.创建目录.递归删除文件夹及文件.指定文件夹下 面的所有内容copy到目标文件夹下面.指定文件夹下面的所有内 ...

  3. Struts2的拦截器

    拦截器的作用: 拦截器可以动态地拦截发送到指定Action的请求,通过拦截器机制,可以载Action执行的前后插入某些代码,植入我们的逻辑思维. 拦截器的实现原理: 拦截器通过代理的方式来调用,通过动 ...

  4. [Usaco2008 Nov]Guarding the Farm 保卫牧场[DFS]

    Description The farm has many hills upon which Farmer John would like to place guards to ensure the ...

  5. CODEFORCES ROUND #273 DIV2

    题目大意: A简单的说就是,有五个人,他们刚开始有B元,经过一系列过程后,给你他们现在分别有的钱,让你求出B(> <难得的傻逼题啊...但是要注意B是正整数!特判0) B有n个人,要分成m ...

  6. jquery 分页控件2

    jquery 分页控件(二) 上一章主要是关于分页控件的原理,代码也没有重构.在这一章会附上小插件的下载链接,插件主要就是重构逻辑部分,具体可以下载源文件看下,源代码也有注释.为了测试这个插件是能用的 ...

  7. 大IT公司笔试

    都是一些非常非常基础的题,是我最近参加各大IT公司笔试后靠记忆记下来的,经过整理献给与我一样参加各大IT校园招聘的同学们,纯考Java基础功底,老手们就不用进来了,免得笑话我们这些未出校门的孩纸们,但 ...

  8. jQuery extend函数详解

    一 jQuery的扩展方法原型是 $.extend(dest,src1,src2,src3); 含义是将src1,src2,src3合并到dest中,返回值为合并后的dest,该方法合并后,dest的 ...

  9. 使用entity framework开发oracle

    A.vs2010 SP1 B.ODAC(http://www.oracle.com/technetwork/database/windows/downloads/index-101290.html) ...

  10. ASP.NET Web API下的HttpController激活:程序集的解析

    ASP.NET Web API下的HttpController激活:程序集的解析 HttpController的激活是由处于消息处理管道尾端的HttpRoutingDispatcher来完成的,具体来 ...