ios图标和启动界面设置 apple分辨率，Photoshop快速切出UI设计中@1.5X、@2X、@3X

最新推荐文章于 2024-11-05 23:55:07 发布

signlesun

最新推荐文章于 2024-11-05 23:55:07 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42262889/article/details/92800435

本文介绍了iOS开发中关于点和像素的理解，强调了点作为虚拟单位在屏蔽不同屏幕设备差异中的作用。在Retina显示屏下，美工需要提供@2x和@3x的切图。教程详细说明了如何使用Photoshop 2017版快速切出不同倍率的图标，为UI设计过程提供了便利。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考链接:https://www.jianshu.com/p/073eae3bfd1a

开发iOS的时候，使用点作为基本单位会更加方便。列表对比
在这里插入图片描述
这里的点和像素可以初步理解成，一个点等于多少个像素。2x，就是1个点等于2个像素。

手机屏幕的物理长度，使用英寸作为单位。比如iPhone 4屏幕是3.5英寸，iPhone 5 是4英寸，iphone 6是4.7英寸，这里的数字是指手机屏幕对角线的物理长度。

屏幕像素，比如iPhone 3GS屏幕是320 x 480像素，iPhone 4是640 x 960像素，这里的像素可以想象成屏幕上真正用来显示颜色的发光小点。

点，开发App时候使用的单位，是一个虚拟的单位，并非实际存在的，因此点有时也叫虚拟点。点这个单位，用于屏蔽各个屏幕设备的不同，兼容以前的程序。

每英寸有多少个像素，称为ppi(pixel per inch)。iPhone 4是640 x 960像素，对角线就是1154像素，除以3.5英寸，应该是330ppi。而官方给出的数字是326ppi。当像素太密，超过300ppi的时候，人眼也就不能区分出每个像素。因此iPhone 4的屏幕叫作Retina显示屏。Retina在英文中，是视网膜的意思。

开发中美工切图要@2x和@3x的各一张，( @1x的（iPhone 3GS）已经淘汰了，所以不用切图 )。
例如：
example@2x.png // 60 x 80像素
example@3x.png // 90 x 120像素

example.png      // 30 x 40像素		名字可以用icon.png
example@2x.png   // 60 x 80像素		名字可以用icon@2x.png
example@3x.png   // 90 x 120像素		名字可以定义
当工程中使用名字为"example"的图片时候，会根据 屏幕模式 自动选择对应的图片。
1x模式，就会选择example.png, 2x模式就会优先选择example@2x.png
，假如example@2x.png不存在，就选择example.png，同时放大2倍

Photoshop快速切出UI设计中@1.5X、@2X、@3X图标.UI设计过程中，切图是避免不了的大部分借助第三方软件切图，其实PS直接可以切。

有一个前提：PS必须是2017版！！！

Photoshop快速切出UI设计中@1.5X、@2X、@3X图标.UI设计过程中，切图是避免不了的大部分借助第三方软件切图，其实PS直接可以切出几倍的都可以。这几天偶然发现PS2017有这个功能简直太好了。

第一步：在PS中做好你的图标或者图形，编组也可以，或者直接图形层也可以。

第二步：右键点击这个编组或者图层
在这里插入图片描述
第四步：选择你需要导出的倍数关系。点击下箭头选择，点击加号添加。

the end