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

把一张图片分成9张的步骤如下:

工具:手机。

1、在

应用市场

下载

美图秀秀

旗下app“9格切图”app。

2、打开下载好的“9格切图”app,点击首页的“打开一张图片”按钮。

3、点击打开一张图片之后页面自动跳转到相册页面,选择你需要切割为9张照片的照片。

4、打开图片之后可以再编辑页面选择切割的形状和滤镜,选择好之后点击右上角的保存/分享按钮。

5、然后跳转到保存/分享页面,页面有图片的分享教程,然后点击保存到相册。

6、然后再打开相册就可以看到刚刚切割的9张照片按照从前到后的顺序排列在相册里。

九宫格切图app介绍

九宫格切图app,一般又称九宫格切图制作。九宫格切图,专业的图片编辑图片处理工具,轻松进行网格切图、截取长图、拼接电影台词。

功能亮点:九宫格切图:网格切图,经典九宫格样式,快速凑齐9张图片;还有2x2、4x4、2x3等多种模板,帮你花式晒图。智能滚动截屏:自动拼接算法,一键点击即可操作;自动识别顶部和底栏,保存网页/微博内容等高清长图。免费小说、新闻文章等内容都可以保存长图哦!

我们都知道一套完整的 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日后强制全部使用显示启动闪屏*)

750x1334 iPhone 8

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

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

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

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

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

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

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

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代表不透明

#/devd274dd925

因为:

☞为了让日常切图尺寸的沟通更加和谐,我整理了安卓切图的相关信息。

举例:banner的切图尺寸:iOS和Android的换算举例:

@Ldpi(安卓手机)240x320px 120ppi

@mdpi(安卓手机)320x480px 160ppi

@hdpi(安卓手机)480x800px 240ppi

@xhdpi(安卓手机)720x1280px 320ppi

@xxhdpi(安卓手机)1080x1920px 480ppi

640x160@2x(苹果手机)

960x240@3x(苹果手机)

320x80@mdpi(安卓手机)

480x120@hdpi(安卓手机)

720x180@xhdpi(安卓手机)

1080x270@xxhdpi(安卓手机)

320x1=320,对应屏幕@mdpi(安卓手机)320x480px 160ppi

320x1.5=480,对应屏幕@hdpi(安卓手机)480x800px 240ppi

320x2.25=720,对应屏幕@xhdpi(安卓手机)720x1280px 320ppi

320x3.375=1080,对应屏幕@xxhdpi(安卓手机)1080x1920px 480ppi

160x1=160,对应屏幕@mdpi(安卓手机)320x480px 160ppi

160x1.5=240,对应屏幕@hdpi(安卓手机)480x800px 240ppi

160x2=320,对应屏幕@xhdpi(安卓手机)720x1280px 320ppi

160x3=480,对应屏幕@xxhdpi(安卓手机)1080x1920px 480ppi

因此,安卓的2倍图,实际上是2.25倍。安卓的3倍图,实际上是3.375倍。

比如:

在320x480分辨率,像素密度为160,1dp=1px

在480x800分辨率,像素密度为240,1dp=1.5px

计算公式:1dp*像素密度/160 = 实际像素数

dp和px的换算公式 :

dp*ppi/160 = px。比如1dp x160ppi/160 = 1px。

1dp        160ppi

一一一=一一一

1 px          160

英文名称:Scale-independent pixels,以160PPI屏幕为标准,当字体大小为 100%时, 1sp=1px。

sp 与 px 的换算公式:1sp*ppi/160 = 1px

1sp            160ppi

一一一 = 一一一一

1pt               160

切图切6套,文件夹显示如下: