整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
图1.我们想把这个图片按照不同颜色切成不同的切片
1
步骤1：ctrl+r,调出标尺工具，如图2.
2
步骤2：鼠标左键拖动标尺往下拉，在色块分界线出拉两根，如图3.
3
步骤3：在工具栏中选择“切片工具”，如图4.
4
步骤4：点击“基于参考线的切片”按钮，如图5.
5
出现切片，如图6.
6
步骤5：选择“切片选择工具”，如图7.
7
步骤6：鼠标左键单击中间这块切片，右键，选择“划分切片”，如图8.
8
步骤7：鼠标左键拖动中间的切片黄线，移到色块分界线位置
步骤8：选择“HTML和图像”、“所有切片”，点击保存
效果如图
生成文件
打开html页面效果
定义：简单理解将网页图片切分为一些小碎片的过程，目的是为了提升网页浏览的流畅性。
切片创建非常简单，在裁剪工具箱中。
鼠标绘制矩形选框范围会成为“用户切片”，而范围外的会自动切分，成为“自动切片”
自动切片可以隐藏，也可以通过提升成为“用户切片”
其他内容与裁剪及选框工具差不多。
如果图像包含参考线，可以基于参考线创建切片
如果切片处于隐藏状态：视图-显示-切片，可以显示切片。
复制：按住Alt键拖到切片；
组合：用切片选择工具选择多个切片（按住Shift），右键执行，组合切片。
删除：用切片选择工具选择切片后，鼠标右键删除切片，也可以用Delete或Backspace键来删除切片。删除切片后会重新自动生成切片以填充文档区域。
清除全部切片：视图>清除切片。
锁定切片：锁定后无法对切片移动、缩放或其他更改。执行：视图>锁定切片。
自动切片无法进行优化设置，所以我们有时候需要提升为用户切片。
切片的导出：执行“文件>导出>存储为Web所用格式（旧版）”，在弹出的窗口中设置“优化格式”为GIF，单击存储完成导出。
网页上不同状态下，呈现出不同的颜色或者样式的按钮，方便用户了解当前操作状态，这就是翻转按钮。
要创建翻转按钮至少需要两个图像，一个是用于表示正常状态的图像，另一个则用于表示处于更改状态的图像。
举例：
素材1
实例33.1-右上角创建播放器翻转按钮效果
应用矩形工具+椭圆工具+钢笔工具，绘制模式为形状，创建视频播放器翻转按钮效果
网页中可播放的视频文件，如果不被明确标注出来很可能被用户忽略，所以我们增加翻转按钮，当用户将光标移动到可播放的视频上时，视频缩略图呈现为播放器效果。
重要内容：再重复一次
切片的导出：执行“文件>导出>存储为Web所用格式（旧版）”，在弹出的窗口中设置“优化格式”为GIF，单击存储完成导出。
不同的格式的图像文件其质量与大小也不同。
可供选择的Web图像的优化格式包括：GIF、JPEG、PNG-8、PNG-24、WBMP
GIF：网页最常用的格式。可显示256种颜色，参数设置较多，重要的进行解释
颜色深度算法、颜色：可选择、数值越大，颜色越接近原图像
交错：正在下载文件时，在浏览器中显示图像的低分辨率版本。
损耗：通常设置5~10，可减少文件大小5~40%，大于10，图像的质量也会降低。
JPEG：是一种比较成熟的有压缩格式的图像格式之一，虽然会丢失部分数据，但人眼几乎无法分别差异。
压缩品质：越大，图像细节越丰富，但文件也越大。
模糊：数值越大，模糊效果越明显，但会减少图像的大小，最好不要超过0.5
杂边：为原始图像的透明像素设置一个填充颜色。
PNG-8:专门为Web开放的，支持244位图像并产生无锯齿状的透明背景。
PNG-24：可以保留多达256个透明度级别，适合于压缩连续色调图像（？），但生成的文件比JPEG格式大得多。
WBMP：用于优化移动设备的标注格式，只支持1位颜色，只包含黑白像素。
执行“文件>导出>Zoomify”，用于导出高分辨的JPEG文件和HTML文件，然后可以将这些文件上载到Web服务器上，以便查看着平移和缩放该图像的更多细节。适用于在需要商品细节进行展示时使用。
可能是要上传吧。未上传测试预览效果失败，可能是我的操作问题，有懂得的大神请指点下。
这章节内容都是干货，现在不是我的重点，后续从事时再单独研究。
感谢大家的关注及阅读。
下节学习3D立体效果，应该很有趣。
S是Web设计的首选软件，他着重侧重于对图形的二次处理，主要在颜色方面，通过分图层处理叠加效果来达到各种其异的梦幻需求，叠加是不是很熟悉，就是css里边层叠也可以。只是ps是面性的，css是逻辑性的，从上到下。而PS的神奇在于，每个参数的不一致，导致的结果不一致，这样也让很多非专业人士自认为有设计艺术的细胞或假象，以为自己是一个设计奇才，从而选错行业，所以设计这行有风险，入行要谨慎。像AI, CorelDraw着重于对造型的创造或编辑，像CAD则是点线面关系，3DMax则是空间物理关系，Flash是空间与时间的关系等等。而且这些设计软件中也只有PS能够完整真实的模拟Web页面上的真实场景，虽然字体有时候也会在表现上出现稍为的偏差。FireWorks也由于市场份额或PS重合功能太多，已经停止新版本开发或更新了。这是一个公司战略或市场竞争下必然导致的结果，个体用户不能左右。
1).基本信息：
以图层为主要的编辑对象，通过不同层细节的编辑，使整体效果更为绚丽或多变。
以工具为主要的编辑手段，通过多个工具的结合，满足大部分编辑要求。
通过滤镜的组合，呈现很多不错的效果，达到平民人士也能参与互联网炒作的大军中不能自拨，在当下PS已经由有一个名词转为一个动词了。
对前端来说切图时注意：优化切图流程，提升切图效率，增加岗位竞争优势
具体经验分享：修改PS的快捷键，使其符合前端操作的习惯，侧面提升工作效率。从而扩展，可以修改其它软件的快捷键，整体提升工作效率，增加就业资本或信心。
图片格式那些事儿
一般新手不太注意页面的性能问题，而性能容易出现在图片上面，如何在一个大页面中处理好图片是一个前端必备的技能之一。
一般应用比较多的格式有：gif,png-8,png-24,jpg。而新手经常混淆png-8,png-24的区别。
按我经验4k以下gif,png-8差别不大，4k-100k: png-8,gif占优势，大于100k果断是jpg。
png-8不支持alpha透明，在IE6下需要一个JS或透明滤镜来处理。
图片格式与设计那点事儿
Web性能优化：图片优化
2). 提高切图效率思路之扩展：
在上一点提到的修改快捷键，分享一下我修改的几个快捷键（修改这个快捷键，有个缺点，换台电脑可能就不能使用，除非能够熟悉的记得两套快捷键，即修改过的，或原始的）：
新建图层: F1
使用频率比较强，所以放在一个容易的地方。
新建文件：F2
仅次于新建文件，也是使用使用频率比较高的一个键。由于切图是会从原始图层上多次的分离图层，所以这个快捷捷由原来的按两键，变为一键。并且有效的分离左右手操作的特点，尽量让使用频率高的键从左侧起步。以下的几个快捷键，都是按照这个思路来进行优化或设置的。
按屏幕大小：F3
按画布大小：F4
这两个键操作思路主要借鉴于CorelDraw，CorelDraw是一款优秀的平面广告设计软件，多用于名片，包装设计。这是由加拿大Corel产品，他们公司另外一个比较著名的绘画类软件是Painter。
存储为web格式：F5
由原来的5键优化为一键，还有一个流程是通过Ctrl+Shift+S来存储图片，很明显这个流程步骤过于繁多，很浪费时间。有兴趣的可以做一个对比。
裁剪命令：F6
由原来的3键优化为一键，另外一个是裁剪工具(C)，裁剪工具对整个画面的破坏力比较大，且不易控制，尤其在PS的版本升级中对这个工具进行了优化。而这个命令相对更为轻量或方便。
F7,F8,F9保持不变
转换为RGB模式：ctrl+=
因为Gif是索引模式，颜色信息较少，如果要进行编辑，首先得转换成RGB模式。
从图层建立组：ctrl+,
由于刚入行的设计师没有经验，一个设计稿是没有分图层组。其实合理的图层组可以有效的引导前端，所以这个快捷键主要是解决这个问题。
自由变换：F10
变换内容
前端主要还是对现有的PSD文件进行编辑，所以这两个键是可以单独拿出来的。
变换选区：F11
变换边框
画笔：F12
因为前端不像设计师，对PSD只是一个切割，而设计师注重于创造的过程。所以对画笔工具的依赖不是很大，由原来的F5移动到F12。
复制图层 Ctrl+ / 原有位置在菜单栏：图层->复制图层
这个快捷键，可以快速的把原始PSD中的一个或多个图层复制到一个新文件当中。
演示：
3). 切图的几个办法：
切片(k):
优点：能够一次切除多个图片。
缺点：需要后退一步，降低效率，容易产生多余无用图片
选区(先用选区工具来画一个范围，然后裁剪):
优点：区域精确目标单一
缺点：需要后退一步，容易误操作
拷贝(Ctrl+C):
优点：拷贝单层的内容到新文件，能够快速的切除图片。
缺点：不容易找到相应的图层。
合并拷贝(Ctrl+Shift+C):
优点：拷贝所有可见层的内容到新文件，能够快速的切除图片。
缺点：不容易找到相应的图层。
切图网（qietu.com）是一家专门从事web前端开发的公司，专注we前端开发，关注用户体验，欢迎订阅微信公众号：qietuwang
*请认真填写需求信息，我们会在24小时内与您取得联系。
