WWDC 2014 的海报是怎么做出来的？ 第1页
1
aton 网友的相关建议:
哈哈哈哈这题实在是太有意思了，下面的答案八仙过海各显神通，用什么方法实现的都有。
不过这种图片处理+渐变色的场合怎能少得了我大HTML5？而且别人的答案都是要你亲手去一步步处理，咱们这里有个天然的优势，就是做出来之后能在网页上所见即所得。
效果如下：
比如苹果的logo（为了效果明显，我做了一点高斯模糊）
出来的结果就是这样的：
再比如咱们扁平之前的Windows：
当然也不在话下：
这个小DEMO里预置了几个演示，除了上面的，还有喵星人、刘看山、以及我自己的头像……
另外最激动人心的是，它可以加载你本地的图片，把任意一张图转换成这个彩虹马赛克特效。
（最好使用jpg或非透明背景的png，浅底色深图案能达到最佳效果）
其实原理简单得很，会前端编程的一看即知：就是为canvas设置个横向渐变背景色，然后读取原图，获取每个点的灰度值，然后在对应位置绘制圆角矩形，颜色越亮，圆角矩形尺寸越大。
网页是一个内嵌的iframe，右键直接查看源码或者下载到本地慢慢研究都可以。
1
相关话题
你为什么讨厌顾爷和《小顾聊绘画》？厨力是怎么产生的?
有哪些好的PPT素材网站，推荐下?
公众号文章配图去哪找？
有哪些很完美的不对称设计？
如何用2个月时间从0开始做出一个交互设计作品集？
知乎十周年有奖挑战赛：如果你来创作知乎开屏图，会是怎样的？
商业标志「扁平化」的设计风格为何会在近几年流行起来？
设计与制造之间有怎样的联系？
作为设计师都遇到过什么样的奇葩客户？
前一个讨论
有哪些建议给初到长沙的知友？
相关的话题
化学史上有哪些美妙的图片？常规PC键盘上Q行到A行纵向错开¼键宽，但A行到Z行却错开达½键宽，为什么？
生活用品中有哪些让你拍案叫绝的巧妙设计？为什么要这样设计?
你见过哪些有趣的图标？
为什么武侠小说中的武功都不共享？
纯机械时代的巅峰是什么？
有哪些看上去很酷炫很屌、但内行人认为一点都不屌的技术或产品？
哪些轿车是非承载式车身？为什么福特停产了维多利亚皇冠？
为什么现代高层建筑没有东方建筑风格的要素？
你家的装修是怎样的，共花费多少？
请问卫生巾的设计者有使用过所设计的产品吗？
为什么扎哈哈迪德会有这么大的影响力？为什么中国现在对于扎哈哈迪德的评价这么高？
iPhone 6 和 6 Plus 新增的屏幕尺寸会如何影响 iOS 应用的界面设计？
如何看待西安地铁站的英文命名方式？
工作上碰到画画或设计好几天没有灵感，又急赶项目，你们都会怎么做？
作为设计师都遇到过什么样的奇葩客户？
单看颜值，二十多万的车你怎么选？例如新君越、金牛座、新迈腾、帕萨特、皇冠？
易拉罐檐口边缘的一圈凹槽的作用以及利弊？
普通人和大师的差距在哪?
为什么 iPad Air 的 A 是大写而 iPad mini 的 m 是小写？
瑞典有哪些令人印象深刻的设计与技术？
美国学设计的学生有多刻苦？平时的作业量大到什么程度？
有哪些成功的旧工厂改建案例？
如何用Ps/Ai制作出路径混合的文字效果？
如何评价扎哈·哈迪德以及她的设计？
机械工程师玩 Besiege 是怎样一种体验？
有哪些看似精妙实则很蠢的设计？
为什么扎哈哈迪德会有这么大的影响力？为什么中国现在对于扎哈哈迪德的评价这么高？
用一张纸能做出什么 ?
买了欧洲设计师设计的衣服，收到衣服后对质量和设计都非常满意。你注意到标签上说：中国制造。 你会怎么想？