页面制作---Photoshop切图

知识体系#

Photoshop切图-知识体系.png

问题#

photoshop 中的“合并图层”与“合并可见图层”和“拼合图层”有什么区别?

  • 合并图层是将所有的图层合成一层
  • 合并可见图层是把没有隐藏的图层合并成一层
  • 拼合图层是把隐藏图层删除把所有图层合成一层并且成为背景图层
  • 图层合并之后就没有办法在分开了,但是可以撤销操作

实践#

使用mark man取色,测量.png
切图-top.png
切图-图标.png

补充---Sprite

推荐阅读:《谈谈CSS Sprites(css精灵)》

CSS Sprites原理##

把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background-repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

CSS Sprites优点##

1.利用CSS Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因

2.CSS Sprites能减少图片的字节

1.在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好只够的空间,防止板块内不会出现不必要的背景;这些还好,做痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂

2.CSS Sprites在开发的时候比较麻烦,你要通过photoshop或其他工具测量计算每一个背景单元的精确位置

3.CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无序改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,有只能(最好)往下加图片,这样图片的字节就增加了,还要改的css

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.工具、面板、视图 什么是切图? 第一步:从设计稿里切出网页素材(按钮、图标、LOGO、背景图、内容性图片) 第...
    hyt222阅读 411评论 0 3
  • 1.三问切图 什么是切图?从设计稿(如.psd文件)中切出图片素材(如.png、.jpg文件)DIV+CSS切图1...
    LuckyPandaLee阅读 2,317评论 0 14
  • 开始之前…… 这篇文章并不是教你如何美化图片的,它针对前端开发的图片操作。 这篇文章注重细节,像是工具类文章。所以...
    黑白度阅读 7,670评论 4 39
  • 如歌唱、绘画一样,我们天生就有写作的基因。在孩提时代我们无所束缚地展露着这些天赋,却在成长的条条框框中将部分甚至全...
    冯小风阅读 1,273评论 5 40
  • 很励志的一个故事,送给大家! 通往山顶的山路难行,一位健壮的男人,背个小包已是气喘吁吁。当他看到一个小女孩,背着一...
    刘娟妹阅读 210评论 0 0