什么是切片 ?     (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. messageBox以及新窗体的使用

    DialogResult dr = MessageBox.Show("你确定要点击吗", "安全提示", MessageBoxButtons.YesNo);   ...

  2. Shards

    跟我一起云计算(5)——Shards   什么是sharding Sharding的基本思想就要把一个数据库切分成多个部分放到不同的数据库 (server)上,从而缓解单一数据库的性能问题.不太严格的 ...

  3. query 原理

    query原理的简单分析,让你扒开jquery的小外套.   引言 最近LZ还在消化系统原理的第三章,因此这部分内容LZ打算再沉淀一下再写.本次LZ和各位来讨论一点前端的内容,其实有关jquery,在 ...

  4. 企业架构研究总结(39)——TOGAF架构能力框架之架构委员会和架构合规性

    3. 架构委员会 正如前面所说,一个用来对架构治理策略的实现进行监督的跨组织的架构委员会是架构治理策略成功的主要要素之一.架构委员会应该能够代表所有主要干系人的需求,并且通常还需要对整个架构的审查及维 ...

  5. 字符串比较strcmp

    问题: 原型:extern int strcmp(const char *s1,const char * s2); 所在头文件:string.h 功能:比较字符串s1和s2. 一般形式:strcmp( ...

  6. JS二维数据处理逻辑封装探究

    一.目的 定义出一个专门用于处理二维数据的组件,所谓二维数据就是能用二维表格显示出来的数据,所谓处理就是增删改查,很简单. 二.约束 外部程序给该组件传入如下形式的对象,让该组件自行解析. var t ...

  7. 批处理安装nodejs

    @echo offcd nodejsecho 正在安装nodejs-v4.2.2,请稍等...start /wait node-v4.2.2-x64.msi /qnecho 安装nodejs结束 cd ...

  8. 《.NET 编程结构》专题汇总

    <.NET 编程结构>专题汇总 前言     掌握一门技术,首要的是掌握其基础.     笔者从事.NET相关开发多年,也非常喜欢.NET,多年来也积累了很多相关的资料,在此将一些基础性的 ...

  9. 彩蛋 Python之道

    彩蛋 Python之道 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 使用下面的语句可以调出Python中的一个彩蛋, impo ...

  10. boost xpressive 例子

    1.效果图: 我有一个wordpress博客,每次在csdn上写完博客,都需要复制到wordpress中,还需要手动修改<pre>和图片地址,比较麻烦,所以做了这个工具. 功能: 1.把C ...