WWDC 2014 的海报是怎么做出来的？ 第1页
1
aton 网友的相关建议:
哈哈哈哈这题实在是太有意思了，下面的答案八仙过海各显神通，用什么方法实现的都有。
不过这种图片处理+渐变色的场合怎能少得了我大HTML5？而且别人的答案都是要你亲手去一步步处理，咱们这里有个天然的优势，就是做出来之后能在网页上所见即所得。
效果如下：
比如苹果的logo（为了效果明显，我做了一点高斯模糊）
出来的结果就是这样的：
再比如咱们扁平之前的Windows：
当然也不在话下：
这个小DEMO里预置了几个演示，除了上面的，还有喵星人、刘看山、以及我自己的头像……
另外最激动人心的是，它可以加载你本地的图片，把任意一张图转换成这个彩虹马赛克特效。
（最好使用jpg或非透明背景的png，浅底色深图案能达到最佳效果）
其实原理简单得很，会前端编程的一看即知：就是为canvas设置个横向渐变背景色，然后读取原图，获取每个点的灰度值，然后在对应位置绘制圆角矩形，颜色越亮，圆角矩形尺寸越大。
网页是一个内嵌的iframe，右键直接查看源码或者下载到本地慢慢研究都可以。
1
相关话题
人机交互中的一个热门研究领域 Tangible Interaction 在业内有常用的翻译吗？我热爱中国文化，但是感觉汉字印在衣服上很土，英文还可以，为什么呢？
cpu是怎么制造的?
如果我能够解决鸟撞飞机发动机的问题，可以赚钱吗？该怎么做才能盈利呢？
有哪些神一般的实验设计？
如何判断一张概念艺术作品画得好不好？
我的角色设计的问题出在哪里？
怎么自己制作出苹果广告风格的视频？
有哪些造型好看的公交车？
如何系统的学习汽车设计？
前一个讨论
有哪些建议给初到长沙的知友？
相关的话题
有哪些兼具艺术性和商业性的产品？你认为目前国内市面上缺少什么样的一款产品、服务？
总是有一些反人类的设计，可是它们是怎么被设计出来的？
有哪些标志或动画形象可以供宿舍七个人每人一个的图案印在 T 恤上？
你认为哪个大学的校徽颜值最高？
大公司标志转向扁平化设计，有哪些值得借鉴的案例？
为什么少有设计院能够实现真正的BIM设计，还是死守着CAD这样的二维生产工具？
专为设计师设计的笔记本电脑有吗？（我需要用的软件有PS, CDR,C4D,MAYA）?
著名或者优秀的文艺游戏有哪些？
生活中还有哪些类似于「人民币上招财猫」这样的图案巧合？
有哪些值得推荐的PS（Adobe Photoshop）插件？
如何看待 90 后设计师陈建放弃 4-5 万月薪，改行做外卖骑手？
如何评价邵氏兄弟影业公司的LOGO设计？
有哪些家用电器附加功能奇特诡异？
火车硬座设计成座位对着座位是否是一个败笔？
有哪些代价深刻的改良设计？
你见过的真正的Photoshop高手是什么样的？
这两个球颜色实际一样吗？
为什么很多透明胶带最里面一圈都会印有狮子的图案？
厨力是怎么产生的?
请问卫生巾的设计者有使用过所设计的产品吗？
2016春晚吉祥物康康被扒是韩美林旧作抠下来的，这件事应该怎么看？
在女卫生间里贴什么标语可以和「向前一小步，文明一大步」相抗衡？
有没有类似金属表带每节之间用针连接的固定连接方式或结构？
你认为哪个大学的校徽颜值最高？
如何评价 Craig Federighi 主题演讲的水平和台风？
知乎上的设计师们是如何成为成功设计师的？
如何评价原研哉设计的小米新logo？
我热爱中国文化，但是感觉汉字印在衣服上很土，英文还可以，为什么呢？
人类制造的最不可思议的机器有哪些？