Photoshop计算图形面积

之前一篇文章《解构谷歌地图和苹果地地图》开篇就谷歌地图和苹果地图首页地图面积做了对比,现在我们来还原一下计算过程。今天以iPhone 6上的谷歌地图和苹果地图举例。
google apple原图对比
首先进行简化处理,先看看每个图像基本信息,从谷歌的开始。直接用photoshop将谷歌地图首页截图打开,或者将图片直接拖入ps也行,选择“图像——图像大小”就能看到截图的基本信息,整个首页面积为750×1334=1,000,500平方像素:
google basic info
谷歌地图的首页主要由状态栏、搜索栏以及两个FAB(Floating Action Button)。顶部状态栏面积容易算出来:40×750=30,000平方像素,高度标准的40px,宽度刚才看到了是750px。
好,看搜索框,用“魔棒”工具(快捷键w),容差设定小一点:
容差10
同时打开“信息”窗口(快捷键f8),选中搜索框,蚂蚁线包围了搜索框。右侧的信息面板的W是宽度,H是高度,所以搜索框面积是720×98=70,560平方像素:
info1
接下来是定位按钮和路线按钮,方法一样。可以看到W是114,H也是114,也就是直径114px的圆。圆的面积计算公式s = πr² ,计算一下结果为10,201.86平方像素。
FAB 1
同样的方式对路线按钮采集数据,发现它和定位按钮大小一样,所以路线按钮面积为10,201.86平方像素。
地图面积 = 总面积 – 顶部状态栏面积 – 搜索框面积 – 定位按钮面积 – 路线按钮面积 = 1,000,500 – 30,000 – 70,560 – 10,201.86 – 10,201.86 = 879,536.28平方像素
有没有更简单直观的方式呢?有的,先将图片抽象化。

阴影
然后,再逐个选择蓝色色块,这次我们用“窗口—直方图”功能,就可以看到像素面积,此处距离为顶部状态栏,面积为29,250平方像素。以此类推,搜索框面积为69,759平方像素,两个FAB面积为10,084×2=20,168平方像素,所以地图面积为1,000,500 – 29,250 – 69,759 – 20,168 = 881,323平方像素,之前的计算结果为 879,536.28平方像素,误差在0.2%。
状态栏1

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注