欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS PS切图教程 >

PS中用来前端切图的知识点总结

 

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

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

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

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-ps/ps50425.shtml

我要分享到:
上一篇:PS切图
下一篇:PS一键切图神器

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-06-16 16:05 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。