成都创新互联网站制作重庆分公司

ios开发切图,ios切割图片

在ios手机开发时需要的icon切图有哪几种规格

这两个一般用在大中尺寸足够了,应该都是给android的,现在又苹果的就当然给苹果的了,而480宽度对应的是HDPI,一般480*800的。

网站建设哪家好,找成都创新互联!专注于网页设计、网站建设、微信开发、微信小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了荆门免费建站欢迎大家使用!

每个DPI等级切一套图,可以保证这个像素密度下的图像显示清晰,有一些图片压缩后会看着变形,所以还是多干点活吧。

安卓和ios开发,切图主要是开发做还是设计做

一般情况下是由美工和开发人员协商的,两个不能完全独立的,有的开发者是会自己兼做美工的。

UI设计规范一iOS字体和切图及规范

我个人设计时按照iOS设计尺寸 iPhone6(750px*1334px)来进行页面的设计。在iOS开发中iPhone4、5、6、7是共用一套字体规范。在设计中按iPhone6设计版尺寸(750px*1334px)中适合的字体大小来定义。(开发过程中具体的问题需再具体分析)

在iOS中默认字体分为三类:

第一类: STHeiti-Light.ttc和STHeiti-Medium.ttc代表的是中文字体,常用的方正黑体简体(不能商用)和微软雅黑(不能商用),也可以是冬青黑体简体(暂不详版权)和思源雅黑(免费)。

第二类: _H_Helvetica.ttc和_H_HelveticaNeue.ttc代表的是英文以及数字字体,常用的字体Helvetica

第三类: LockClock.ttf代表的是锁屏时间字体

中文字体: Mac下黑体、微软雅黑、华文黑体、方正黑体简体、思源雅黑、冬青黑体简体等(,看个人习惯,具体设计需求也可以是不常见字体)

英文字体: HelveticaNeue , Arial Bold(Regular)(具体设计需求也可以是不常见字体),在选用不常见字体要在后面切图中:相关的字体要有图片形式导出.png图片,以及如有需要要有文字的字体包,当然还有使用版权的许可。

文件包命名规则是:项目名字+切图+作者名字+日期

例如:蚂蚁金服基金3.5.8.5版本迭代-H5页面设计_切图_李笑_20170321

文件包压缩一直采用.zip格式

文件包要包括:image,效果图+标注图,切图简单说明(word等文件)。

打开如下图:

在image中切图文件和切图命名中:

···不要出现大写,

···不要有中文、特殊符号以及空格,

···字母必须是小写字母,

···同类切图大小一致(后续文章单独整理切图方法和常见问题)

···iOS切图文件要有二倍像素适配(750px*1334px)iphone6,iphone7和三倍像素适配(1242px*2208px)iphone6 plus,iphone7 plus。需要在名字后面分别加 @2x 和 @3x。具体命名方法是:

模块_类别_功能_状态_@2x/@3x.png  (状态会有:点击状态,点击压下状态,禁用状态,选中状态等)

如:me_bg_nologin@3x.png和me_bg_nologin @2x.png

···iphone4:640X960

···iphone5:640X1136

···iphone6/7:750X1334

···iphone6/7:1242X2208

iPhone图标尺寸及整理如下:

后续会不断的整理和添加修正,欢迎批评指正

如果有用请分享给需要的朋友们

谢谢~

APP切图详细规范终极指南2020

我们都知道一套完整的 App 通常会有很多张切图,不管是 iPhone 需要 1x、2x、3x 图档,Android 需要至少 3 种 hdpi、xhdpi、xxhdpi。在庞大的切图数量下如何让负责套图的 RD 快速找到所需图档,档名的命令方式就需要双方统一格式方便大家作业。所以,制定一套非常有效而方便的APP切图命名规范非常有用的。

目前iPhone有10种型号,5种屏幕尺寸,再加上6plus的“降采样”(Downsampling)(1080-1920),还有iPhone6和6+上的放大模式(1125-2001)和默认模式(1242-2208),是不是感觉好恐怖?但是不用怕,我分享一套超简单的适配方法,看完你都不信有这么简单~

UI交付给开发的资料有

开发看到这份标注图,可以自己用上面的数字,乘以1.5得出3X的数字。

iOS图标尺寸:

iPhone Portrait iOS 8,9-Retina HD 5.5 (1242×2208) @3x

iPhone Portrait iOS 8,9-Retina HD 4.7 (750×1334) @2x

iPhone Portrait iOS 7,9-2x (640×960) @2x

iPhone Portrait iOS 7,9-Retina 4 (640×1136) @2x

iPhone Portrait iOS 5,6-1x (320×480) @1x

iPhone Portrait iOS 5,6-2x (640×960) @2x

iPhone Portrait iOS 5,6-Retina4 (640×1136) @2x

LaunchImage:

android: 720 1280

iOS:( 2020年6月30日后强制全部使用LaunchScreen.storyboard显示启动闪屏*)

750x1334 iPhone 8

基本上 App 的切图可分为下面几大类:

背景、按钮、图示、图片、照片、TabBar icon 等。

为了让切图便于管理,通常会依图片性质命名。例如 bg-xxx.png、btn-xxx.png、img-xxx.png、tab-xxx.png。当图档要做给 Retina 屏幕使用时,只要在文档名前加上「@2x」就可以了。如bg-xxx@2x.png、btn-xxx@2x.png 、icon-xxx@2x.png。在命名时 bg-xxx.png 中间的 – 可以改为 _ 。

iOS 上写 Desktop icon 档案命名使用 -,如果切图只给 iOS 使用,可以和 iOS 采用相同的命名方式。请注意 Android 不支援 - 的命名方式,如果图档要运用在 Android 上,请把所有的 - 改成 _ 底线。最好不要把数字或符号当成档名的开头,如 3-icon.png 、+abc.png之类。

前缀是一种简单记忆、节约成本的纯文本标记语言,使用前缀能快速知道切图是用作那一组件类别,好的前缀也无非就以下几种:

后缀一般是来表示切图的颜色、透明度、状态等信息:

通过上述介绍,一般遇到的情况也就这么一些,只需要按照前缀+位置用途+后缀就差不多了,这里列举一些比较好的命名:

1、画布大小定位 720 x 1280 或 1080 x 1920,72 dpi等;

2、只使用偶数单位的尺寸,比如 96 px 的列表项高度,16 px 的边距,64 px 的图标边长;

3、只使用偶数单位 24 pt,28 pt,36 pt等字体大小;

4、设计完成以后,所有尺寸的 px 值除以 2(需要约定的倍数) 作为 dp 数值交给工程师;

5、所有字体的 pt 值除以 2 (需要约定的倍数)作为 sp 数值交给工程师;

6、所有切图变成三份,分别是原始大小、缩小 1.5 倍,缩小 2 倍,分别作为 xhdpi,hdpi,mdpi 的资源交给工程师;

只需要全局标出共用字体即可,特殊字体特殊标注。

颜色值一般使用十六进制表示,如 #FFFFFF, #90FFFFFF 其中90两位代表透明度。透明度计算:

225∗透明度百分比转16进制

FF 代表不透明,7F代表半透明,00代表不透明

iOS、Android 开发单位换算及 UI 切图要求

在移动端 UI 设计中,经常会用到的单位有 4 种:px、pt、dp 和 sp,很多人分辨不清这几种单位及其换算关系,以及 iOS 和 Android 的切图要求,我在这里做下简单的介绍,希望大家读完后能有所收获(如有错误,欢迎纠正)。

px 即 pixel,像素点,电子屏幕上组成图像的最基本单位,在描述屏幕分辨率时也会使用该单位。1px 表示一个像素,例如 iPhone 8 的尺寸为 750px × 1334px,表示在该手机屏幕上,水平方向每行有 750 个像素点,垂直方向每列有 1334 个像素点。

pt 即 point,有两个含义:一是印刷行业常用单位,是一个标准长度单位,绝对大小,1pt = 1/72 英寸 = 0.35mm;二是 iOS 开发用的基本单位,当设计师以 1 倍尺寸进行设计 (375pt × 667pt) 并给出标注稿时,开发人员无需除以 2 便可直接使用。

dp 是安卓开发用的基准单位,在 dpi (屏幕像素密度,即每英寸包含的像素点) 为 160 的屏幕为上,1dp = 1px。为了简单起见,Android 把屏幕密度分为了 5 种:mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi,下文会详细介绍其换算关系。

在安卓系统里,sp 与 dp 类似,不同的是 sp 可以根据用户的字体大小首选项进行缩放,而 dp 则不会。 尽量使用 dp 作为空间大小单位,sp 作为文字相关大小单位,例如:新闻类和短信类等大篇幅文本,推荐使用 sp 为单位。

在 iOS 开发中,不同机型的 iPhone 设备需要用到不同倍率的切图,下表格为各 iPhone 机型显示屏参数对比:

这里再简单了解下两个概念,ppi 和 dpi。

ppi (iOS):即 pixel per inch,屏幕像素密度,表示每英寸所包含的像素点,该值越高,屏幕越细腻。

dpi (iOS) :开发像素密度,表示每英寸所包含的开发像素点。

在 iOS 开发中,规定以 ppi = 163,dpi = 163 作为开发基准,

当 ppi = 163,dpi = 163 时,则 1pt = 1px;

当 ppi = 326,dpi = 163 时,则 1pt = 2px;

当 ppi = 401,dpi = 154 时,则 1pt = 2.6px ≈ 3px。

(为什么 iPhone 8+/7+/6+ 的开发基准是154?可能要问问苹果了...)

依此类推,得出换算公式一:

若有小数,四舍五入即可。

在 iOS 开发中,目前只需要 @2x 和 @3x 两种切图,所以导出 2 倍和 3 倍的 png 图片即可。导出前注意检查切图是否存在半像素、毛边等情况,保证对齐像素,这样才能有效避免上线后页面上的 icon 出现虚边的问题,提高细节质量。

另外补充一点:从整体开发尺寸看,iPhone 8 是 375 × 667 pt (@2x),而 iPhone X 是 375 × 812 pt (@3x),同样的宽度,一个用 @2x 图,一个用 @3x 图,iPhone X 表现出了更高的清晰度,如图 2-1 所示。

在 Android 开发中,因为机型参差不齐,需要用屏幕密度来区分设计。

注意,这里的 dpi (Android) 和上文的 dpi (iOS) 是不同的概念,dpi (iOS) 是开发像素密度,而 dpi (Android) 即 dot per inch,表示屏幕像素密度 ,类似 iOS 开发里的 ppi。

Android 中,规定以 dpi = 160 为开发基准,

当 dpi = 160,基准dpi = 160,1dp = 1px;

当 dpi = 240,基准dpi = 160,1dp = 1.5px;

当 dpi = 320,基准dpi = 160,1dp = 2px。

依此类推,得出换算公式二:

在设计图标时,对于 5 种主流的屏幕像素密度 (mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi) 应按照 2:3:4:6:8 的比例进行缩放,如图 3-1 所示。

例如,一个启动图标的尺寸为 48 × 48 dp,这表示在 mdpi 的屏幕上其实际尺寸应为 48 × 48 px;在 hdpi 的屏幕上其实际大小是 mdpi 的 1.5 倍 (72 × 72 px);在 xhdpi 的屏幕上其实际大小是 mdpi 的 2 倍 (96 × 96 px),依此类推。

在某些况行下,还需要提供一种特殊的切图: 点九图 (上图所示)。点九图是 Android 开发中用到的一种特殊格式的图片,文件名以 “.9.png” 结尾。

这种图片能告诉程序,图像哪一部分可以被拉升,哪一部分不能被拉升需要保持原有比列。运用点九图可以保证图片在不模糊变形的前提下做到自适应,比如对话框背景图片就会用到点九图。

--

以上是全部内容,感谢你的阅读!

End

【iOS】iOS开发之使用Mac自动操作制作@1x@2x@3x图片(切图)

iOS开发中,会要求导入@1x、@2x和@3x:

使用@1x格式: iPhone3GS

使用@2x格式: iPhone 4,4S,5,5S,5C,SE,6,6S,7,8,XR

使用@3x格式: iPhone 6Plus、6sPlus、7Plus、8Plus、X、XS、XS Max

这样在开发过程中,将三种图片(比如分别为1.png、1@2x.png和1@3x.png)导入到工程图库中的时候可以自动被识别为1x、2x和3x大小的图片

可以利用Mac系统中自带的服务自己 制作一个快速生成@1x、@2x和@3x图片的功能

首先spotlight搜索Automator,然后按Enter打开

**新建文稿 **

选取文稿类型为 快速操作

在工作流程收到当前的后面选择图像文件

在左边窗口的“操作”下,选择“资源库”中的“文件和文件夹”,将右侧中的“给访达项目重新命名”拖入最右侧的大窗口中,(如果警告提示是否要增加一个“拷贝访达项目”操作,选择“不添加”),选择“添加文本”,在输入框中输入【@3x】

拖入“复制访达项目”

选择左侧“资源库”中的照片,将“缩放图像”拖入右侧窗口(如果警告提示是否要增加一个“拷贝访达项目”操作,选择“不添加”),并选择“按百分比”,输入【66】

再拖入“文件和文件夹”下的“给访达项目重新命名”,并选择【替换文本】,查找【“】,以【仅基本名称】;****再拖入“文件和文件夹”下的“给访达项目重新命名”,并选择【替换文本】,查找【@3x”的副本】,以【仅基本名称】,替换成【@2x】

拖入“复制访达项目”,选择左侧“资源库”中的照片,将“缩放图像”拖入右侧窗口(如果警告提示是否要增加一个“拷贝访达项目”操作,选择“不添加”),并选择“按百分比”,输入【50】

再拖入“文件和文件夹”下的“给访达项目重新命名”,并选择【替换文本】,查找【“】,以【仅基本名称】,再拖入“文件和文件夹”下的“给访达项目重新命名”,并选择【替换文本】,查找【@2x”的副本】,以【仅基本名称】

然后保存,将“快速操作”存储为“制作@2x@3x图片”

每次使用的时候,只需选中图片,选择访达 - 服务 - 制作@2x@3x图片,****就会自动生成三个图片:1.png、1@2x.png和1@3x.png

最终效果~


分享标题:ios开发切图,ios切割图片
文章起源:http://cxhlcq.com/article/dscpghp.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部