真正的ps切图方法(前端必看)

切图的目的

切图的目的是跟前端工程师进行团队协同工作,切图输出时应尽可能的降低工作量,避免因切图输出而导致的重复工作,下面是一些需要注意的事项。

PS切图:原则和注意事项

1、切图尺寸为偶数

移动端手机的屏幕尺寸大小都是偶数,比如iphone 7的屏幕分辨率是2532×1170像素。工程师在实际开发过程中以1266×585pt(pt是iOS开发单位,像素倍率为@2x时,1pt=2px)进行开发,切图资源尺寸为偶数,可以被2整除。偶数是为了保证切图资源在前端工程师开发时能清晰显示。如果是奇数的话会导致边缘模糊,下图所示为偶数和奇数对比。

PS切图:原则和注意事项

偶数和奇数对比

2、图标切图

根据设计尺寸输出设计基准图是以iOS系统屏幕分辨率750×1334像素情况下设计的,在切图时要明确设计以@2x进行的,输出@2x和@3x的切图即可满足iPhone手机主流机型,下图为@2x和@3x图标切图。如果是改版Android系统分辨率720×1280像素情况下,在切图的时候就需要明确设计是以xhdpi进行的,然后再输出切图。

PS切图:原则和注意事项

@2x和@3x图标切图

3、降低文件大小

有些图片也需要切图,如引导页、启动页、默认图等。但是图片切图一般文件大小都较大,不利于用户在使用App过程中加载页面。而且前端工程师会希望图片不影响识别的情况下压缩到最小。降低文件大小可使用Photoshop软件自带的功能压缩文件,也可通过一些图片压缩网站进行压缩。压缩过的文件用肉眼基本上分辨不出压缩的损失,图7-15所示为使用TinyPng网站压缩前后对比。

PS切图:原则和注意事项

缩前后对比

4、可点击区域不低于44像素

切图时添加一些空白面积,增加触碰面积,保证用户可以点击到。设计基准图中图标大小可以和切图大小不一致,记得要保证切图面积,可点击区域不低于44像素。图7-16所示为图标实际大小和增加空白面积大小。但是伴随着手机分辨率的提升,可点击区域也有所提升如66像素和88像素的可点击区域也比较常见。

PS切图:原则和注意事项

图标实际大小和增加空白面积大小

切图输出类型

切图输出类型主要分为应用型图标切图、功能型图标切图、图片类切图和可拉伸元素切图四类,下面将进行详细讲解。

1、应用型图标切图

App的应用型图标会被运用在很多不同的地方展示,如手机界面、AppStore以及手机的设置列表,所以App应用型图标需要多个不同尺寸的切图输出。以及两个平台中参数不同,在输出时要把双平台的尺寸全部输出切图。需要注意的是iOS系统应用型图标切图需要提供直角的图标切图,如图7-17所示,因为iOS系统会自动生成圆角效果。

PS切图:原则和注意事项

iOS系统应用型图标切图

2、功能型图标切图

对于iOS系统界面中的功能型图标,由于Plus版本的切图是设计基准图的1.5倍,输出切图为@3x即可,图7-18所示为站酷功能型图标@2x和@3x的对比。默认情况下,@3x是@2x的1.5倍。到时前端工程师会将切好的@2x和@3x图放到库中,iOS系统会根据设备型号自动挑选合适的尺寸使用。

PS切图:原则和注意事项

站酷功能型图标@2x和@3x对比

3、图片类切图

图片类切图如启动页、引导页、提示页面等需要切图的图片。有些需要全屏切图、有些则需要局部切图,如图7-19红框标识所示。如果是全屏切图最好以手机分辨率大尺寸进行切图适配。如果页面是背景图和底色结合,只需要切背景图,而背景色只需告诉前端工程师色值即可。如果背景图是单个元素重复平铺只需切单个元素即可,告诉前端工程师页面尺寸,将单个元素进行平铺。

4、可拉伸元素切图

可拉伸元素是指按钮在切图过程中可对切图进行瘦身压缩的元素,原理是不可拉伸区域不变。可以提升App中的加载速度和节省手机空间,这种切图方式在iOS中叫平铺切图,Android中叫做点九图。它是为了提升图片在客户端内的加载速度,保证安装包的轻量化,图7-20所示为在iOS中的平铺切图和Android中点九图的形式。

PS切图:原则和注意事项

注意:平铺切图只需要表明什么区域可拉伸即可。而点九图则需要再绘制1像素的黑线表示内容展示区域,1像素的黑点表示的是一条完整的可拉伸区域,以及切出的图片后要人为的添加后缀

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com

(0)
上一篇 2022年 11月 13日 下午1:25
下一篇 2022年 11月 13日 下午1:38

相关推荐

  • 黄页是什么,企业黄页是什么意思?企业黄页有什么用处?

      企业黄页是什么意思?在互联网尚未普及的情况下,销售人员通常通过购买企业黄页来获取潜在客户的联系信息。企业黄页将根据企业的性质或产品类别总结企业联系电话,因此企业黄页可以称为企业…

    2024年 1月 1日
  • 乾隆心中真正的白月光(乾隆与朱砂痣复原图)

    在中国历史上,最长寿、也是最幸运的皇帝非乾隆莫属。 在工作中,作为富n代的乾隆,有爷爷为他稳固大清江山,有爸爸为他积攒下大笔财富,乾隆一登基就有稳固王朝。 在感情中,与心中的白月光…

    2023年 10月 8日
  • 张学友张家辉真的是亲兄弟

    看看标题:异父异母亲兄弟?矛盾不矛盾?不过,两人长得确实像哦? 长得那么像,关系那么好,还都姓张 虽然长得那么像,关系那么好,还都姓张,但是两人真不是有血缘关系的亲兄弟,两人的关系…

    2022年 11月 15日
  • 唐诗三百首:(望天门山)天门中断楚江开,碧水东流至此回

    《望天门山》 唐·李白天门中断楚江开,碧水东流至此回。两岸青山相对出,孤帆一片日边来。 诗词译文 高高的天门被长江之水拦腰切断,从中间豁然断开,汹涌的江水从断口奔腾而出。浩浩荡荡的…

    2023年 2月 3日
  • 美国西游寄

    西游ABC是美国那边的华人拍的,以后,全球华人文化的中心可能会迁移到北美。 北美那边,有言论自由,有创作自由。只要能赚钱,又不去怼黑命贵犹太人,不触碰美国的逆鳞,华人就能拍片。 华…

    2023年 6月 7日
  • 兔子摸兔子,摸兔子哪里才会更加亲近

    兔子是一种非常可爱的小动物,它们的温顺和友善让人们喜欢与它们互动。当您摸兔子时,以下是一些会让它们感到最舒服的地方: 头部:兔子的头部是它们最敏感的部位之一。当您轻轻抚摸它们的头部…

    2024年 2月 1日
  • 神仙道霸者宝石,神仙道星月宝石有什么用

    新浪游戏 2015-03-24 16:16显示图片 想要在49You《霸者之刃》的世界里成为一个绝对的新人王,那么这些日常就绝对不能错过!日常手册白金版在手,立刻变身“日常小王子”…

    综合百科 2022年 11月 17日
  • 四城同创,「四城同创」涨姿势,一起来学习“四城同创”相关知识吧

    “四城同创”是弥渡县委政府为适应社会发展、满足人民高质量生活需求、建成美丽幸福新弥渡而开展的工作,主要包括创建国家卫生县城、国家园林县城、省级文明城市、“美丽县城”四个内容。“四城…

    综合百科 2022年 11月 13日
  • 火星异种人物及能力介绍

    在说这个问题之前,我先简单解释一下,火星异种里面的两种手术:BUGS手术和MO手术 无论是BUGS手术还是MO手术,都是掺入一部分其他生物的DNA,不同的是,BUGS手术基础只能是…

    2023年 7月 18日
  • 会员店代购

    近年来,会员店业态风起云涌,正在成为零售行业新风口。这让往日专注于海外奢侈品和化妆品的代购们一股脑儿扎进超市,变身会员制商超代购。 在社交平台上搜索山姆、盒马等会员商超代购时,几乎…

    2022年 12月 15日