PS中用来前端切图的知识点有哪些

本篇内容介绍了“PS中用来前端切图的知识点有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

成都创新互联-专业网站定制、快速模板网站建设、高性价比南部网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式南部网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖南部地区。费用合理售后完善，十载实体公司更值得信赖。

PS是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):

  优点：拷贝所有可见层的内容到新文件，能够快速的切除图片。

  缺点：不容易找到相应的图层。

“PS中用来前端切图的知识点有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

分享名称：PS中用来前端切图的知识点有哪些
网页链接：http://scjbc.cn/article/pipoos.html