44 各种图片格式们

咳咳,这是被拖更了一周的一期节目,这也是我们使用全新录音设备完整录制的一期节目,姗姗来迟,骚瑞。

  ---------文风一转的分割线---------
(其实就是换了主播来写)

PNG、GIF、JPG、这些格式和名词大家几乎每天都要接触,但是里面的细节并不一定每个人都了解,有时候也会给工作带来不少麻烦,进入新时代之后,icon font、SVG、PDF 等等更多的新面孔也增加了我们的学习成本,这里面的坑,也是值得聊上一期的……


内容提要

00:17 又来了,道歉🙇

02:04 感谢大家的姿慈,我们已经找到了合适的志愿者

03:21 JJ 说这么快就进入主题很不习惯...

06:55 「ACDSee」、「Picasa」、「Photos.app」

14:27 BMP

24:44 GIF

34:20 APNG

35:10 论打脸,我还是专业的。这里更正一下,Android 至今未支持 APNG 以及 Animated WebP

38:26 PNG、JPG

49:48 JJ 说的精华部分竟然是这个!

59:31 SVG

75:58 唠叨完了,这里是几乎每期都有的 OneMoreThing



参考链接

  1. ASMR 是什么?
  2. 一套典型的「当年的」图标包
  3. 经典的看图软件 ACDSee
  4. 已经停止服务的 Google Picasa
  5. BMP 图片格式
  6. 当年的 Winamp 皮肤,最早还没有异形的形式,只能是矩形的
  7. GIF 格式
  8. GIF 集合网站 Giphy
  9. Windows 下的 GIF 编辑神器 GIF Movie Gear
  10. macOS 下的 傻瓜式 GIF 生成工具 Gifrocket
  11. 倒吊男的微博
  12. 倒吊男的部分作品
  13. macOS 下的另外一款 GIF 工具 GIF Brewery
  14. 动态格式 APNG 的介绍
  15. 技术上更先进的来自 Google 图片格式 WebP
  16. PNG 格式
  17. 安卓上的 JPG 图片多次保存会变绿的梗
  18. JPG 格式
  19. Alpha 通道
  20. Icon font 格式
  21. 名字跟 JJ 个人网站只差一个字母的在线 icon font 服务:icomoon
  22. 阿里巴巴的 Icon Font 平台
  23. SVG 格式
  24. 淘宝 UED 的旧文:图片格式与设计那点事儿
  25. 经常被叫做「海龟」的绘图编程语言:logo 语言
共有 29 条评论
苦瓜海绵
2017 年 7 月 20 日

好多以前用的软件

JJ Ying
2017 年 7 月 20 日

嘿嘿,也都是「以前」了,现在大家都更新换代,鸟枪换炮了。话说你的「深圳网友」名字还就被系统记住了啊?😲

俊杰
2017 年 7 月 20 日

主播深夜发节目,支持一个~

JJ Ying
2017 年 7 月 20 日

主播十个夜猫子,一直深夜发的,哈哈哈哈

双梓
2017 年 7 月 20 日

原来志愿者是要妹子!~

JJ Ying
2017 年 7 月 20 日

👀 请用热辣的双眼盯着 Leon,他定的标准

不想留名的听众
2017 年 7 月 20 日

啥时候来北京

双梓
2017 年 7 月 20 日

哈哈,小海龟画图,我上小学三年级用过,好像是UCDOS里的。画圆画方的,那时候两个人一台电脑!~哈哈暴露年龄了

JJ Ying
2017 年 7 月 20 日

三年级……这么早……

wayne
2017 年 7 月 20 日

hi刚好这期提到了颜色的问题,我有个小问题,自己网络搜索并没有搞懂。HSV 可以描述 256x101x101 = 2611456 种颜色,RGB 可以描述 256x256x256 = 16777216 种颜色。意思是我平时用的 HSV 模式并不能完整描述 RGB 的所有颜色?

JJ Ying
2017 年 7 月 20 日

我觉得这是个很好的问题~首先,一个系统能表达多少颜色并不是取决于 RGB 三个值的数字分别是多少(因为其实没有规定说这个数字不能是小数),实际上的决定因素是一个文件或者说一个设备所采用的颜色空间,粗暴地说就是最红能多红、最蓝能多蓝、最绿能多绿。有了这些极端值之后就有了一个确定的色域,然后根据 RGB 的值来指定某个颜色。HSV、HSL 其实还是基于 RGB 的模型的,只是转换成了更方便活人理解的形式。实际使用的时候,色值为了使用方便都是直接取整的,就像你做的换算,HSV 可以表达的颜色确实比 RGB 少,但这不是因为这个模式不行,而只是因为软件的限制(只能取整数)

Wayne Lu
2017 年 7 月 20 日

谢谢 JJ,刚才在一个编程软件里面捣鼓了下,发现里面 HSL(那个软件没有 HSV )的描述是小数的,而且 H S L 三个值规定范围都是 0-1 的实数,这样我就比较明白了。(原来是 PS 在骗我)

Nobit
2017 年 7 月 20 日

我记得我上幼儿园的时候学过LOGO语言,小海龟记忆很深……

JJ Ying
2017 年 7 月 20 日

幼儿园…… 😂

Sabrina
2017 年 7 月 23 日

Leon说的sketch没有ps的投影衰减,有实际的参考例子比较么,没有理解 >< !!

JJ Ying
2017 年 7 月 24 日

请参考方迟的这篇回答~ https://www.zhihu.com/question/28865209/answer/42385558

Val
2017 年 7 月 23 日

关于PS里大圆套小圆的合并,先布尔合集然后合并组件按钮,变成一个图层,sketch里两个套圆union布尔运算后,然后用flatten操作,不是也可以合并成一个图层么?只有两个圆没有交集(路径没有交集),PS里可以合并在一个图层里,sketch里不能合并成一个图层

JJ Ying
2017 年 7 月 24 日

嗯,是我的表述错误,我指的就是 PS 可以放到一个图层里,Sketch 不行

不想留名的听众
2017 年 7 月 25 日

佛麦塔是什么啊,好迷

leongao
2017 年 7 月 25 日

Format...

JJ Ying
2017 年 7 月 25 日

哈哈哈哈,你这个问题问得 Leon 好伤心,他是抓了半天脑袋才想出来的标题,哈哈哈哈哈

艾痴痴痴
2017 年 7 月 25 日

最近做的一个车机的项目就遇到了一个老生常谈的图片相关的问题:渐变的色阶断层。对方么是用QT进行编译的,然后发现电脑预览和编译出的结果不一致,编译出的结果和在车机上预览都会有严重的色阶断层。然后陆陆续续尝试了匹配颜色配置文件啊、添加仿色选项啊、调整伽马值啊、添加杂色啊、改变图片位深度啊等等方法,最后也算是圆满解决了吧。作为计算机出身,真是后悔当初上课不好好听图像处理压缩算法这些课。今天听这期节目再一次把前几天的东西过了一遍加深了印象还收获了很多新的东西。万分感谢JJ和Leon。其实项目做到最后,也和做程序的同学讨论了下这个问题,发现可能QT自带的图像解析方法有问题导致显示器预览显示和编译结果不一致。如果有机会,不知道anyway可不可以讲一讲ps的颜色设置相关以及不同环境下图片颜色差异的这些问题。虽然觉得QT这样的东西在移动互联网应该是不常用可能是个例。哈哈哈哈。再次感谢,收获颇丰!

leongao
2017 年 7 月 26 日

QT 我也不熟,查了一下看到说采用 (FastTransformation) 做 Scaled 的话图像质量会大幅下降,造成色阶等一系列出现,不知道你遇到的原因是这个么?不过也有很多时候其实也和显示媒介本身有很大的关系,你们的车机屏幕素质是如何呢

艾痴痴痴
2017 年 7 月 26 日

屏幕像素确实一般。1024*600的7寸屏。但是ppi也有170。应该还可以。最后问题是同样的图jpg和png效果差很多。png较差。没有scale的情况。最后反正就定性为qt对不同图片格式的支持问题了。昨天看了分享的那个讲jpg和png差异的文章。觉得可能是不是径向渐变在png中支持不是很好也会有一点原因。

双梓
2017 年 7 月 27 日

为什么是19号,有没有现场直播或者录播之类的!········

illusate
2017 年 8 月 1 日

老板,为啥你们网页上的英文字体叫 Anyway type 而不叫 Calluna Sans,,,

JJ Ying
2017 年 8 月 1 日

为了营造神秘感……

朱小新
2017 年 8 月 1 日

这期声音简直质量高到不敢相信,都有点催眠效果了。(有好多期没听了……)关于Sketch又学到新姿势了!

朱小新
2017 年 8 月 1 日

Sketch同心圆合并时给出的警告是说整个形状不是一个continuous path。虽然不懂XML但是感觉应该是一个形状对象应该只能用一条path闭合出一个fill填充来描述吧(同心圆是有两条独立的path)。不过我觉得不合并的话也没有造成什么困扰……另外我觉得Sketch的钢笔比Ai其实要好用哎,无论是有四种手柄类型的选项,还是像素对其,总感觉在做UI时要比Ai人性化一点……

支持的 Markdown 格式
**加粗**加粗
[链接](https://anyway.fm)链接
* 无序列表无序列表
1. 有序列表有序列表
__下划线__下划线
~~删除线~~删除线
`CODE`CODE

订阅我台