如何在ps中切图(前端切图还是设计切图)

PS是网页设计的首选软件。它侧重于图形的二次加工，主要是在色彩方面，通过层叠叠加效果来实现各种不同的梦幻需求。叠加层是不是很熟悉，就是可以叠加在css里面。只有ps是片面的，css是逻辑的，从上到下。PS的神奇之处在于各个参数的不一致，导致结果不一致。这也让很多非专业人士认为自己有设计艺术的细胞或者错觉，认为自己是设计奇才，从而选错了行业。所以设计这条线是有风险的，入行要谨慎。像AI AI，CorelDraw，他们专注于形状的创建或者编辑，像CAD，是点线面的关系，3DMax，空间和时间的关系等等。而且在这些设计软件中，只有PS能够完整真实的模拟网页上的真实场景，虽然字体有时会出现些许偏差。FireWorks也因市场份额过多或PS重叠功能而停止开发或更新新版本。这是公司战略或市场竞争的必然结果，个人用户无法控制。
1).基本信息：
以图层为主要编辑对象，通过编辑不同图层的细节，使整体效果更加华丽或多变。
以工具为主要编辑手段，通过多种工具的组合，满足大部分编辑需求。
通过滤镜的组合，有很多好的效果，让平民也能参与到互联网的炒作中来，自己也拨不过来。目前PS已经从名词变成了动词。
对于前端，注意：优化裁剪流程，提高裁剪效率，增加岗位竞争优势。
具体经验分享：修改PS的快捷键，使其符合前端操作的习惯，在侧面提高工作效率。从而可以修改其他软件的快捷键，提高整体工作效率，增加就业资本或信心。
图片格式之类的东西。
一般新手不太关注页面的表现，表现容易出现在图片上。如何处理大页面中的图片，是前端必备技能之一。
常用的格式有：gif、png-8、png-24、jpg。新手经常混淆PNG-8和PNG-24的区别。
根据我的经验，4k以下的gif和PNG-8差别不大，但是4K和100k3360PNG-8之间，gif占优势，100k以上的是决定性的jpg。
Png-8不支持alpha透明，在IE6下需要JS或者透明滤镜来处理。
图片格式和设计的事情。
网页性能优化：图片优化
2)拓展思路，提高切图效率：
要修改上一点提到的快捷键，分享几个我修改过的快捷键(修改这个快捷键有个缺点，换电脑的时候可能不行，除非你能记住两套快捷键，也就是修改过的或者原来的):
新图层： F1
使用频率强，放在容易的地方。
新文件：F2
仅次于新创建的文件，它也是一个经常使用的键。因为剪切图片会多次将图层与原图层分开，所以这个快捷键由按两个键改为一个键。并有效分离左右手操作的特点，尽量让高频的键从左侧开始。下面这些快捷方式都是按照这个思路优化或者设置的。
按屏幕大小：F3
按画布大小：F4
这两个关键的操作思路主要借鉴于CorelDraw，CorelDraw是一款优秀的平面广告设计软件，多用于名片和包装设计。这是加拿大Corel的产品。他们公司另一个著名的绘画软件是Painter。
以web格式保存：F5
从原来的5键优化到一键，还有一个通过Ctrl Shift S存储图片的过程，显然这个过程步骤太多，浪费时间。有兴趣的可以做个对比。
剪辑命令：F6
原来的三个键优化为一个键，另一个是刀具(C)。切割工具对整个画面的破坏力很大，不容易控制，尤其是在PS版本升级的时候。这个命令相对来说更轻或者更方便。
F7，F8，F9保持不变。
转换为RGB模式：ctrl=
因为Gif是索引模式，所以颜色信息比较少。如果要编辑，必须先将其转换为RGB模式。
从层创建组：ctrl，
因为新设计师经验不足，所以一个设计稿没有分层次。其实合理的图层组是可以有效引导前端的，所以这个快捷键主要是解决这个问题。
自由转型：F10
改变内容
前端主要是编辑已有的PSD文件，所以这两个键可以分开拿出来。
选择：F11
转换边框
画笔：F12
因为前端不像设计师，PSD只是一个切割，而设计师专注的是创作的过程。所以对画笔工具的依赖性不大，把原来的F5移到F12。
菜单栏中的复制层Ctrl/原始位置：层-复制层
此快捷键可以快速将原始PSD中的一个或多个层复制到新文件中。
演示：
3).剪图的几种方法：
第：节
优点：可以一次切出多张图片。
缺点：需要退一步，降低效率，容易产生多余无用的图片。
选区(先用选区工具画一个范围，然后裁剪):
优点：精确区域和单一目标
缺点：需要后退一步，容易误操作。
复制(Ctrl C):
优点：将单层内容复制到新文件中，可以快速剪切出图片。
缺点：不容易找到对应的图层。
合并(Ctrl Shift C):
优点：将可见图层的内容全部复制到新文件中，可以快速裁剪出图片。
缺点：不容易找到对应的图层。
车途网(qietu.com)是一家专注于web前端开发的公司，专注于we前端开发和用户体验。欢迎订阅微信微信官方账号：qietuwang。