標籤:

WWDC 2014 的海報是怎麼做出來的?

Ps里有個彩色半調,但是是圓的,這個圓角矩形的是怎麼弄滴?

新手補問一句:漸變效果又是怎麼做出來的···


用Processing大約50行代碼搞定。
========================
不知不覺居然破了三百贊,再多寫點。
評論里好多人覺得Processing不明覺厲,但實際情況是Processing非常簡單,音清體柔易推倒,號稱是最適合零基礎學編程的語言,也是個以畫圖為導向的編程語言,個人認為學習曲線比Photoshop還要平緩。搞設計的騷年,除了阿豆比,你還需要來一把稱手的武器防身~~後面加了兩段Processing的簡介,為Processing打打廣告。
========================
已貼到Processing吧里:Processing製作WWDC2014風格的宣傳畫_processing吧
========================
下面是用這段代碼生成的其它logo圖案:
嗯,代碼的好處就是寫完這50行之後,你只要替換不同的logo圖片進去就能得到相同的效果。
另一個好處是所有參數都可調,比如間距,圓角矩形大小,漸變的速度和程度等等~~~
耐克的:

彪馬的:

彪馬的:

印象筆記的:

印象筆記的:

鎚子的:

鎚子的:

網上找了張靜物圖也能生成類似效果:

網上找了張靜物圖也能生成類似效果:


================================================
代碼大體的思路是這樣的:
Logo圖片導入後,先用濾鏡里的THRESHOLD分成黑白兩色,視情況看是否需要用INVERT進行反色;然後運用濾鏡里的BLUR使得logo的邊緣變成漸變的灰色。
在得到的這張圖上按照圓角矩形的間距均勻取點,得到各點的顏色,由顏色的亮度值brightness()決定繪製在該點上的圓角矩形的大小,所有圓角矩形的顏色都由所在點的水平位置決定,就是通過map()把橫坐標投射到hue()色相帶上得到相應的值。
再單獨寫個圓角矩形的函數供調用,一切OK~

===============================================
下面是代碼,帶注釋的版本可以點到我上面那個鏈接里去看。

PImage selected;
float hueLv;
int spacing=12;
int sideLen;

void setup() {
selected=loadImage("guita.png");
selected.resize(400, 0);

selected.filter(THRESHOLD, 0.9);
//selected.filter(INVERT);
selected.filter(BLUR, int(spacing*2/3));

size(selected.width, selected.height);
background(255);
noLoop();
}

void draw() {
for (int i=spacing/2;i& if (map(i, 0, selected.width-1, 0, 255)-156&<0) {
hueLv=map(i, 0, selected.width-1, 0, 255)+100;
}
else {
hueLv=map(i, 0, selected.width-1, 0, 255)-156;
}
println(hueLv);
colorMode(HSB);
fill(hueLv, 150, 220);
for (int j=spacing/2;j& sideLen=int(map(brightness(selected.get(i, j)), 0, 255, 0, spacing*7/8));
Rrect(i, j, sideLen);
}
}
}

void Rrect(int x, int y, int side) {
noStroke();
beginShape();
vertex(x-side*3/8, y-side/2);
vertex(x+side*3/8, y-side/2);
arc(x+side*3/8, y-side*3/8, side/4, side/4, -HALF_PI, 0);
vertex(x+side/2, y-side*3/8);
vertex(x+side/2, y+side*3/8);
arc(x+side*3/8, y+side*3/8, side/4, side/4, 0, HALF_PI);
vertex(x+side*3/8, y+side/2);
vertex(x-side*3/8, y+side/2);
arc(x-side*3/8, y+side*3/8, side/4, side/4, HALF_PI, PI);
vertex(x-side/2, y+side*3/8);
vertex(x-side/2, y-side*3/8);
arc(x-side*3/8, y-side*3/8, side/4, side/4, PI, PI+HALF_PI);
endShape();
}

======================
之前覺得自己用Photoshop還湊合,但也沒想出如何用PS做,直到看了其它幾個答案~~
PS確實是神一般的存在,但是,有些情況用用代碼確實很方便~~~~
======================
喂喂,評論里那些拿膝蓋說事的,什麼時候膝蓋變成七毛錢一斤還包郵的廉價貨了?這幾張簡單圖片絕對換不來你金貴的膝蓋好嘛!!
======================
6月9日更:

乾貨從嘚瑟開始,下面幾幅是我最近用Processing畫的圖。
本來以為Photoshop很難做出這種海報效果,沒想到樓上的牛人舉重若輕~~
只好祭出殺招——動圖!Photoshop你好啊,你能製作視頻和動圖嗎?哈哈~~(好吧,其實PS可以的,只不過那功能很弱而已)

不過,故事要從靜態圖講起,用文字和圖標拼成圖案貌似是個強需求(嗯,Prezi的好多模板都是這種風格),但解決這個問題的在線App不多,而且要麼對中文支持不好,要麼可定製性較差。自己動手,豐衣足食,用Processing寫這個大約80行:


既然能用文字拼,那當然改一改就能用形狀拼啦:


動起來(知乎居然不支持gif,坑爹啊,我動圖都做好了的說):


當然也可以找一些圖標來拼,這個加上動畫效果也才130行左右:

下面這個動畫效果是讓圖片沙粒狀自然塌落,約140行:



不瞞各位看官說,寫完這段後,我替換不同圖片進去玩了一晚上,太好玩了,根本停不下來!!

另外,Processing跟建築結合也挺緊密的,據我道聽途說所知,國外很多牛叉的建築學校講參數化設計之前都會先教Processing,讓學生對編程上手。
看,我用60行畫了個水立方..................................................................的表皮~~


======================

嘚瑟完畢,介紹下Processing。
Processing是一門畫畫的編程語言。簡單來說,有三個優點:音清體柔易推倒。

1. 先說體柔:
Processing安裝文件體積很小,只有一百兆多點,而且它是完全開源免費的。相比較而言,阿豆比和自動桌都太貴了。

2. 再說音清:
Processing語法都非常直白,都是大白話,比如:
line(0,0,100,100);
就是畫一條線,線的起點坐標是(0,0),終點坐標是(100,100)。

再比如:
rect(10,20,100,80);
就是以點(10,20)為左上端點畫一個寬100高80的長方形。
如果在這句前面加一行 fill(0); 就畫出個黑色的長方形。

當然,上面舉的這兩個例子在Photoshop里也就是點兩下滑鼠的事,可是如果你要畫一千條線,一萬個長方形呢?Processing加一個for循環,一共三行搞定;一個個的拿滑鼠畫的話估計要畫到共產主義實現的那天吧-_-|||

3. 易推倒。
Processing學起來很快,上手也非常容易。
在官網介紹里,就有這麼一句:創造Processing的初衷就是讓編程新手能在視覺環境下學習編程,因為人腦對圖形的理解力比文字高几個量級。
Processing項目啟動是2001年,正式版發布大約是08,09年。Processing創造者也坦承,發展速度和應用場景比他們想像的快多了廣多了。

就我個人而言,我自學Processing之前是沒有任何編程經驗的。想當初大學裡的VB必修課也是無聊至極,考試全靠連蒙帶猜外帶沐浴了閱卷老師的慈悲光環才60分低空掠過雷區。我是去年知道有Processing這麼個東西,今年春節假期歸來後才開始斷斷續續的學習。由於學習曲線很平緩,又帶圖形界面,學習過程中很容易形成正反饋,進而~~~停~不~下~來。
這是我學習了十小時左右的時候自己做的東西:


現在看起來當然很簡單了,就是個模擬重力讓小球跳一跳然後貼到四個邊上,但當時足足寫了三個小時,點擊運行後程序跑起來那一刻心情倍兒爽啊。

再重複一遍,Processing雖然簡單,但沒簡單到電線杆小廣告那種」不打針不吃藥,三分鐘根除祖傳老中醫「的程度,不過配合上一兩個小時內就進入的正反饋周期會讓你學起來很爽。

本傑明.富蘭克林說:這個時代,人人都該學點編程。
有時候寫兩行代碼解決手邊小問題確實非常方便(比方說上面那個2*3的多圖片拼圖就是我在得知知乎不能傳gif後隨手寫的),不看廣告看療效,誰用誰知道!況且,Processing上手真的so easy~
嗯,看到」易推倒「三個字就激動,第3點不知不覺寫了這麼多,打住。

上面是一些個人體會,下面這幾點Processing的優點都是我道聽途說的,不是很懂,個人也沒有實際操作經驗。
1. Processing是建立在Java基礎上的,可以看成是簡化版的Java語言,所以跟Java關係很好。Java應用的廣泛性和Processing代碼的簡潔加在一起有很大想像空間。
2. 很多硬體套裝都有Processing介面,比如微軟的Kinect,你可以寫體感遊戲神馬的;再比如arduino,就是一堆感測器,馬達什麼的,你可以自己製作遙控飛機神馬的。
想像這樣一個場景:
你以後有了兒子,天天抱著你大腿撒嬌,
——芭比芭比,給我買個帶攝像頭的遙控飛機嘛,我想看樓上漂亮姐姐洗澡。
——熊孩子!就知道買買買!你懂個屁!不知道買來的飛機又貴功能又有閹割嗎?看爹地親自給你造一個遙控飛機,超靜音,帶1080P實時圖像無損傳輸系統和光學防抖鏡頭~~o(╯□╰)o~~~兒啊,我真羨慕你攤著一個好爹~~


好吧,上面說的都是Processing易做而PS難做的事情,其實在處理圖片的時候,Photoshop和Processing更是一種互補的關係,比方說PS里最簡單的摳像換臉在Processing里非常難實現。騷年啊,你只有雙劍合璧,內外兼修,才能笑傲江湖,東方不敗~~~

無論Photoshop還是Processing都是工具,而非目的,而不管你承不承認,我們平常做事時的思維其實都潛移默化地受到了工具的影響的局限.........這句翻譯成人話就是:有了趁手的工具,你創作的野心就更大了。

舉個我自己的例子:
在這個TED演講里,數據可視化系統學習
女科學家收集了颶風的數據,然後讓不同類型數據代表音樂的各個屬性,「譜」出了一個樂譜,然後「演奏」出了颶風的數據,其實還真的挺好聽的。
去年我看了這個演講後覺得,哇,好酷,然後沒了。
前幾天又碰巧看了這個視頻後頓時覺得,誒,我也可以試試。正好Processing里也有專門的聲音庫,我想如果把一張圖片「演奏」出來的話,肯定很有意思。實現思路很簡單,但這個想法還未實現,主要原因是我至今還無法充分理解傅里葉變換是什麼東西,而這好像是聲音處理的基本概念 &>_&<|||~~~好吧,總之呢,舉這個例子想說明的是,學會新工具,就有更多的新玩法~

結語:音清體柔易推倒,你確定不想來爽一下?O(∩_∩)O~~
===================
6月20日更:
為了方便大家爽一下,我做了兩個「細胞級」的手把手體驗教程,點到這兩個微博里看一下:http://weibo.com/3263150875/B984a173j?mod=weibotime
和http://weibo.com/3263150875/B9SbH6Haj?mod=weibotime#_rnd1403244502544

=================
8月7日更:
暈,剛發現Processing里有內置的圓角矩形函數,我居然還費勁地寫了一個。
帶來的結果是我上面寫的那五十多行里從void Rrect開始就都可以刪掉,這樣整體代碼長度就縮短到三十行了。

=================
11月29日更:
製作了一個非常精彩的全面介紹Processing的視頻,來這裡看看:
迄今最精彩的Processing中文教程 Processing初探


多圖預警,無wifi慎開。

看到前面都說PS做不出來,我真是坐不住啊,自己學的不紮實不要來誤導小盆友啊!
我想說這完全可以純粹用PS來做!!!而且很簡單。

你們要的純PS解決方案來了~

=================這是修改的分界線===================
感謝大家的贊,有些同學說過程不清楚,於是我重新改了一下

首先隨便找了個蘋果logo,我找的這張

0. 先要放大,調亮,高斯模糊,類似這樣

0. 先要放大,調亮,高斯模糊,類似這樣


1. 接下來,使用彩色半調,如下圖

然後不就是把圓點變成方的嗎!??跟我來
2. 首先複製兩層,水平垂直各自動感模糊注意動感模糊的大小略小於彩色半調的大小,如下

3. 接著分別使用亮度/對比度將亮度拉到底,對比度拉到頂,如下圖

聰明的朋友這時已經猜到了!!!
4. 如下圖設置圖層,置為變亮

神奇的來了:

神奇的來了:

什麼?不是圓角?再高斯模糊+曲線

曲線大概是如圖設置


最後的處理,加漸變,加文字,沒有那個字體,換了我比較喜歡的Myriad Pro Light


嗯,小方塊顯得有點不整齊,是做的時候選的解析度比較小,懶得改了,就醬
----
Photoshop是一個博大精深的軟體,限制它的能力的只有你自身的經驗和創意!
完畢

PS. 不過我自己做這個也不會選PS的,只是覺得以上各位做的太麻煩了,吐槽一下

========================
更新 FAQ:


Q:為什麼我的彩色半調有很大一部分是純黑的?
A:本文的方法里,需要使用灰底白蘋果進行製作。

Q:為什麼我的彩色半調結果的圓點全部都一樣大?
A:本文的方法里,請在完全不透明的圖層上使用彩色半調,因為彩色半調不考慮透明度通道。

Q:漸變如何添加?
A:使用漸變填充圖層或漸變疊加,設置混合模式為濾色


多圖預警!!!
__________________________________________________________
不要再贊我了,後面一群用代碼的大牛虎視眈眈的,怎麼不去贊他們?
————————————————————————————————
看了@餘光鑫的方法,覺得對我來說太難,····所以 今天我還是找到了辦法,並沒有想像的那麼難,更不需要代碼。

下面給出我的教程:

所需軟體:Ai Cs6 + Ps Cs6 ;

主要用了Ai的插件
Phantasm CS 中的彩色半調(Halftone)的效果(Ai cc版本不行哦,cs6可以,如果崩潰了,把插件刪掉就可以了)

6.03 update: 插件地址:為了尊重知識產權,大家還是自行搜索吧。謝謝 @顧軼靈提醒

好了正式開始

0. 先隨便找個Apple 的 Logo到Ps;


1.
然後選中它的選區。在按ctrl+shift+i反選,再shift+f6羽化差不多16px;

2.
新建一個圖層alt+delete 填充隨便什麼色;


3.
導出png到Ai,選中圖層,找到效果—Phantasm—半色調;


4.
調整後參數差不多就可以。我們要的是圓角矩形,所以在輸出形狀里選selected symbol。不過得先選中一個符號,先點確定關掉。畫一個圓角矩形拖到符號面板;


5.
然後選中這個符號,再在外觀面板中點Phantasm把輸出形狀改成selected symbol;


6.
接下來
導到Ps里加一個漸變疊加就可以了;

6.04更新:圖層樣式里加一個漸變疊加效果就可以。


————————————————————end————————————————————

————————————————————end————————————————————
最後再上一張剛做完的圖^_^

————————————————6.03 update————————————————

————————————————6.03 update————————————————

看到有好多人問我字體,其實我也就百度了一下「纖細的中文字體」就找到了。
還有沒有購買版權,不能用作商業用途哦,謝謝一些網友的提醒。

地址:說了不能用作商業用途的哦,大家還是自行想辦法吧。
XX部的是 悅黑纖細字體
6.06 update: WWDC的用的應該是Apple 御用字體Myriad Set Pro.謝 @Linkzero Tsang


這個圖案用Mathemaitca非常容易畫出來,我的思路是將一副黑白圖片高斯濾波一下然後根據圖片上每個像素點的灰度值繪製不同大小的圓角矩形,然後根據橫坐標塗上顏色。

首先我們解決圓角矩形的問題,寫一個函數rect[color_, size_],這個函數能返回一個圓角矩形,參數color控制顏色,size控制圓角矩形的大小。

rect[color_, size_] :=
Graphics[{color,
Rectangle[{-size, -size}, {size, size},
RoundingRadius -&> .4 size]}, PlotRange -&> 1, ImageSize -&> 10];

試試效果:

然後我們找一張黑白圖片,並對其高斯濾波(最後的GaussianFilter函數),我懶得找所以自己做了一個:

然後我們找一張黑白圖片,並對其高斯濾波(最後的GaussianFilter函數),我懶得找所以自己做了一個:

img = Style["知", 40, Bold] // Rasterize // Binarize //
GaussianFilter[#, 2.3]


最後一步是這樣的(這裡的MapIndexed用來對圖片上的「每個像素點及其坐標」使用上面定義的rect函數,Hue函數用來根據橫坐標上色,GraphicsGrid將產生的眾多小圓角矩形拼成一個大圖):

MapIndexed[rect[Hue[#2[[2]]/(2 ImageDimensions[img][[1]])], #1] ,
ImageData@img, {2}] // GraphicsGrid[#, ImageSize -&> 600]

噠噠~三句話搞定:


個可以通過rhino+grasshopper實現。主要思路是線干擾。

1.
建立一個矩形的域,把它拆分成一個個正方形。

2.
尋找正方形的中心點,測量中心點到曲線的最短距離。

3.
設中心點距離曲線最長距離為D,中心點距離曲線的距離為一個數值X[n]。通過1-X[n]/D再乘一個影響係數,得到靠近曲線的中心點對應的數更大,越遠越小。

4.
然後每個正方形向內偏移相應的數值。

5.
最後每個正方形導一個圓角

6.
然後導出到ai繼續編輯。

7.
後面的操作大家應該都會的了。

@陳振宇 評論提到grasshopper也可以做顏色漸變,然後我也做了一個。

大致思路是通過尋找線到線的距離定義顏色的rgb值,然後單個附給上面的圖像。

大致思路是通過尋找線到線的距離定義顏色的rgb值,然後單個附給上面的圖像。


哈哈哈哈這題實在是太有意思了,下面的答案八仙過海各顯神通,用什麼方法實現的都有。

不過這種圖片處理+漸變色的場合怎能少得了我大HTML5?而且別人的答案都是要你親手去一步步處理,咱們這裡有個天然的優勢,就是做出來之後能在網頁上所見即所得。

效果如下:

比如蘋果的logo(為了效果明顯,我做了一點高斯模糊)

出來的結果就是這樣的:

再比如咱們扁平之前的Windows:

當然也不在話下:

這個小DEMO里預置了幾個演示,除了上面的,還有喵星人、劉看山、以及我自己的頭像……

另外最激動人心的是,它可以載入你本地的圖片,把任意一張圖轉換成這個彩虹馬賽克特效。
(最好使用jpg或非透明背景的png,淺底色深圖案能達到最佳效果)

點這裡進入DEMO親自體驗

其實原理簡單得很,會前端編程的一看即知:就是為canvas設置個橫向漸變背景色,然後讀取原圖,獲取每個點的灰度值,然後在對應位置繪製圓角矩形,顏色越亮,圓角矩形尺寸越大。

網頁是一個內嵌的iframe,右鍵直接查看源碼或者下載到本地慢慢研究都可以。


首先感謝 @陸思充,我這篇答案是在研究完他的答案後的補充,馬後炮了請見諒
——————————————————————————
在研究了 @陸思充的答案後,我發現如果做這個效果其實可以完全在ai里單獨完成,免去了來回導入ps的麻煩

進入正題

1.首先打開ai新建一個文檔,隨便做一個圖形上去,我就隨便打了字母


2.選中後「對象」——「擴展」


3.添加一個模糊效果。如圖


4.調節一個適合的模糊


5.繼續用Phantasm再添加一個效果(如圖)


6.調節數值,使用圓角方形的方法請看 @陸思充的答案。


7.完成後,選中圖形,使用「對象」——「擴展外觀」


8.完成後繼續選中圖形,使用「對象」——「擴展」


9.完成後可以放大看看效果


10.選中這個圖形(已經編好組的),我直接使用了色板里一個漸變色,然後用漸變工具調整


11,完成


——————————————————————
本人的第一個有圖的,這麼長的答案,如有問題請大家海涵,我也會好好改正!!

再次感謝 @陸思充,!!!


2014年6月8日更新:
沒想到包括排名領先的回答者 @陸思充在內,一下子好多贊了,萬年點贊黨也有被贊的時候,想想還有點小激動呢!。那就再補充一下吧,昨天有人說我最後那張圖顏色太淡了。很簡單,使用美圖秀秀強大的一鍵美化功能吧,請看最終效果:

是不是鮮艷很多了呢?

是不是鮮艷很多了呢?

——————————————————以下是原答案———————————————————

我是用PS+美圖秀秀做的(其實國產神器還是很強大的)

多圖慎開!!!

—————————————————我是快樂的分割線——————————————————

我按照劉然(不好意思,@裡面找不到您)的方法做的,但是做到倒數第二步,也就是再次高斯模糊+曲線讓方塊變成圓角的時候,怎麼調都不行。
效果如下:

這是高斯模糊+曲線之前,放大的效果,怎麼說還算是正方形呢!

可是加了高斯模糊和曲線之後,變成下面這樣了

可是加了高斯模糊和曲線之後,變成下面這樣了

遠看沒變化,讓我們放大看看

遠看沒變化,讓我們放大看看

上圖中,這尼瑪已經不是正方形了,更不是圓角矩形好不好?這是什麼奇怪的東西?

上圖中,這尼瑪已經不是正方形了,更不是圓角矩形好不好?這是什麼奇怪的東西?


就在我屢試屢爽的時候,一道靈光閃過。如果說PS≈美圖秀秀的話,那麼高斯模糊≈背景虛化,曲線≈對比度(差得有點大,不要介意)

於是我撤銷了PS中的高斯模糊和曲線,將圖片保存出來

在美圖秀秀中打開(還是直角矩形)

在美圖秀秀中打開(還是直角矩形)

然後我給它加上背景虛化(虛化力度15%左右,太高的話,正方形會變成圓形的)

然後我給它加上背景虛化(虛化力度15%左右,太高的話,正方形會變成圓形的)

然後再將對比度調到最高,效果如下

然後再將對比度調到最高,效果如下

哈哈,有感覺了吧?

哈哈,有感覺了吧?
最後,將圖片從美圖導出,再次用PS加上漸變效果

大功告成啦!(效果可能稍微差了一點,但也算是圓角矩形了)

大功告成啦!(效果可能稍微差了一點,但也算是圓角矩形了)

圖片是我的頭像,大家不要介意,看看就好。。。

圖片是我的頭像,大家不要介意,看看就好。。。

補充說一句,美圖秀秀+畫圖≈PS呢!(不要噴我!!!)


比較傾向於ai加插件製作,但作者說只有cs6能用。所以給大家來個cc的 Phantasm CS

下面的大家懂得

magnet:?xt=urn:btih:D0021741A3734A547FCBCBC569D5A8E56D9E34B3dn=Astute%20Phantasm%20v3-0-2%20-%20XFORCE%20-%20WIN


靜圖製作的答案已經很全面了,那我就來講講動圖的另一個方法~

這裡用到的軟體是After Effects,又是Adobe大家族的一員~

主要思路是利用Trapcode系列插件中的Form粒子引擎,通過映射漸變層來改變粒子大小

PS:映射,就是通過識別亮度(Brightness)來調整某一參數(顏色,大小,位移,透明度等)

=========================================

Step 1. 場景搭建

新建一個合成組,命名為stage,Ctrl+Y添加一個白色固態層作為背景,命名為BG。


Step 2. 添加漸變引導層

使用形狀曾工具畫一個黑色的圓,命名為gradual,給它添加一個快速模糊特效,然後將背景和這個形狀層預合成,命名為gradual。


Step 3. 粒子創建和form參數設置

創建一個100*100的合成組,命名為Basic,用形狀層工具畫一個小圓(不是馬猴燒酒&>.&<)作為基礎粒子形狀

回到stage合成組,ctrl+Y創建固態層,添加form粒子特效,再小小的更改一下參數:粒子類型選擇自定義填充,定位到basic合成組,層映射屬性展開大小一欄,定位到gradual層,選擇映射到XY


Step 4. 顏色和Alpha的映射

網上隨便找一張圖放進stage,在form的映射屬性中選擇顏色和Alpha,定位到圖片層,映射到XY

神馬?你問我是什麼圖?

因為form的顏色映射功能可以指向視頻,所以動態視頻製作簡直是小菜一碟~

自定義圖形在gradual合成組編輯,粒子的形態在basic合成組內修改

A-do-be ~ A-do-be ~ A-do-be ~ A-do-be ~ A-do-be ~ 大家族

AE君:


簡單來說這是圖像處理裡面最基本的artistic screening,也就是看起來像當年報紙用大小不同的圓點來列印文字。
程序思路是先讀取圖像rgb值,轉成hsv,利用v值大小來判斷打在每塊像素區域上的圓點的大小。至於漸變,大概有幾萬種方法可以做漸變吧,這不重要。。 最簡單一種可以直接loop hsv的h值來達到這個彩虹效果

著名的論文在此:
http://www.iro.umontreal.ca/~ostrom/publications/pdf/SIGGRAPH95_ArtisticScreening.pdf
非常厲害,用藝術家的思維來編程。

放一個自己做的簡易版:
http://youtu.be/sehIg-AKMQ0
身在時差國,只能放youtube了。

--------
圖像什麼的超級有趣啊大家都來學啊


(′-ι_-`)其實我覺得直接寫個代碼還比PS里做要方便一些……
PS里的話等面積的圓角矩形可以直接通過自定義圖案搞定,但是這裡不是等面積的情況

要自動生成大小不等的矩形的話私以為這是PS做不到的,仔細看你會發現邊緣的圓角矩形的面積與色帶邊緣的距離成正比,類似於高斯模糊的效果,只不過這裡減少的是矩形面積而不是顏色的濃度……

我只能說原生的PS是做不到的,或許有插件可以實現,但是總之或許換個軟體會方便一些


怒答。
這種類似效果在幾十年前就被某日本設計大師實現了。大家感受一下我國的設計水平是多麼。。。1971我們的設計師在幹什麼,現在我們設計師在幹什麼。
來自:『品牌-103』杉浦康平 Kohei Sugiura

如何實現效果不重要,重要的是設計理念與思維,一個平面作品想要傳達的感受。
這個學也學不來喲~


PS的彩色半調似乎有個BUG,不知道是不是版本問題,我用的CS6x32,每隔5行左右圓點間隔會多出一像素,如下圖,橫行上面一行圓點間隔3像素,下面一行是4像素。
所以還是AI的版本比較完美。



推薦閱讀:

你認為 2015 年有哪些行業會爆發潛力或值得關注?
2014 年全球經濟金融方面都有哪些大事件?
2014 年全球市場上都有哪些值得注意的併購交易?
2014 年有哪些迅速崛起的公司?
如何理解 Google 的 Material Design 設計語言?

TAG:設計 | WWDC 2014 |