如何從一張效果圖看出效果用 Photoshop 臨摹製作?

我做服務端開發3年,最近打算學習UI設計,有一定的手繪功底。目前在學習PS上遇到的困惑,例如上面的這張圖片,在陰影,內外發光等細節上都做了處理。PS的操作我可以自學,但是如何能判斷一種效果,應該通過哪種屬性來表達,這個就一頭霧水了。求指點一條學習路線,我知道這並非讀幾本書,看幾個視頻就能做到的,但是我願意學習,謝謝


姑且臨摹了一下。

@野合菌 回答了總體的思路,我就補充一點具體的細節吧。

類似這樣的圖標/界面既然選擇了「擬物」的取向,其質感的營造自然來源於現實世界。質感的來源,無非是高光、陰影和漸變的運用。

高光即物件上邊緣那半圈帶有透明度的白色描邊,之所以加入高光,是為了表現物體邊緣對光源的反射;而陰影的加入,則是為了區分在空間上的前後層次;漸變,則可變現物體的凹凸程度。這三個要素,對於立體感的表現都具有重要的作用。若題主有明暗素描的基礎,應當很容易理解。

但是,要使畫出來的物體顯得自然,並非將上述三個元素簡單堆疊就能做到。每個高光的顏色、透明度,陰影的偏移量、模糊度、透明度,漸變中每個顏色的明度差異等等,都需要拿捏得當,出來的效果才不會「假」。而其中的度量,恐怕只有多次練習才能把握得好。臨摹時,初期若無把握,不放直接用吸管取色;然後,多試不同色值,比較效果,便能逐漸熟練。

如上面提到,既然這種風格取向「擬物」,便要多觀察現實,才能理解某處為何要使用某種手法來表現。畫一下明暗素描對這點應該也有幫助吧。

最後,對 UI 設計而言,視覺的表現不過是最為表層的一環。能畫好看的圖標/界面,也只能說明繪圖技能較好,而並非成為優秀設計師的保障。過於注重表現而忽視更為重要的易用性等環節,則得不償失了。況且,目前的設計風格亦趨於擯除不必要的繁飾。在這樣的語境下,多了解文字設計 (Typography), 在設計中尊重內容和易用性,或許比畫得一手漂亮「擬物」圖標的能力更為可貴吧。

------

下面是主體部分各個物件「拆開」的樣子。雖然不能反映具體參數,但應該也會對理解如何繪製這個物體有所幫助吧。


這和PS一點關係都沒有,全看對細節的理解和感覺,全看設計師對顏色和細節的悟性。如果悟性不好,則需要多多實際操作積累經驗。而且用對工具可以事半功倍,比如你發這種設計用ppt做更方便。

ppt帶有各種預設幾何3D模塊,只要改改數值就能達到需要的效果。

沒有人規定PS是最牛逼的圖片繪製處理,創造考的是靈感,紙筆只是工具。

當然,軟體的互相配合使用也相當重要,數據時共享的,有時候也許要取長補短。

有時候不需要完全,理解設計的意思,再創作細節可以按自己喜歡來做。判斷效果主要靠的是經驗,其次是參考,而不是學數學那樣死記硬背。

要學會對工具的活學活用,沒有尺子畫線的時候,筆也可以拿來當尺子。

大概就是這樣。

誰都可以成為設計師或者藝術家,只要你有心

什麼工具都能成為你的畫筆


花了十幾分分鐘做了一個,細節差距還是很大的,也懶得再去慢慢修了。

判斷效果這事其實很簡單的,照著模仿其實有點耐心就可以了。

對於效果,判斷什麼樣的做法,只要你足夠了解你手頭的工具,就可以很輕鬆的做出來。

比如說金屬旋鈕上的金屬光澤,如果你知道圖層樣式裡面有個叫漸變疊加的東西,還知道漸變疊加裡面有個叫做角度漸變的,你第一眼看到就應該會知道這個應該怎麼做。

如果你不知道圖層樣式,或者不知道圖層樣式的漸變疊加怎麼用,不說做不出來,但是會比較麻煩。

這種效果用漸變工具也能做出來。

這種效果用圖片素材也能做出來。

條條大路通羅馬,用熟了你自然就知道該怎麼做了。

所以你做多了,自然就知道該怎麼做了。最後帶一句,要擬物趁早學建模。。。→_→


題主有手繪功底?那麼恭喜咯。 大家常在說不會畫畫能不能做設計,不會畫畫能不能如何如何。

但是經驗告訴我們,這些東西如果你能用筆畫出來就肯定能用PS 做出來,甚至PPT。

這些和繪畫一樣處理好質感,亮部暗部就好了!

至於PS的操作,如果大學計算機PS部分好好學了,去酷站找幾個教程動手做,就能了解Ps的表現手法了。一定可以,我這麼笨都會了。


先上圖:

PS. 上班時間偷懶了 30 分鐘隨手臨摹了一張,然後再花了 10 分鐘優化了細節,處女座真是討厭呢…

PPS. 話說在這個到處都已經扁平化的年代還有人想要學畫擬物風格的東西還真是那啥呢…

@野合菌 的回答很有啟發性,雖然以前我也經常用 Office 來畫圖,不過畫這種擬物風格的東西還真沒試過,剛才試了一下覺得還蠻好玩的。不過感覺這個回答對提問者而言好像沒有什麼幫助,對於連「那些複雜的光影效果是怎麼來」都不能理解的初學者而言,即使把 PS 換成了 Office,也還是無法幫助他們理解高光、陰影、等高線這些基礎效果的概念和用法。這些概念性的東西在 @Linkzero Tsang 的回答裡面已經講得很詳細了,我純粹是來補充個 PSD 的,方便提問者拆解圖層自學,有疑問的地方可以在評論處提問。

PSD 源文件:http://pan.baidu.com/s/1dbHj4

此回答一天之後轉匿名。


充分理解投影,外發光,內發光,內陰影這些圖層樣式,再去了解圖層的正片疊底,濾色,顏色減淡這些效果的屬性,然後就想畫畫一樣,理解在光線下物體的形體表現,一天就能完全學會了。


幾十個同心圓,眼睛花:多分層 取實物的色 然後漸變和虛化多配合 其實這不叫創作 叫素材搭配 多用AI等比較能提高技能 ,當然 現在很多好的擬物還是建模渲染再PS吧,平時多觀察常見的幾種材質 要會模擬得比真實的更美 啞光 高光 半透明等。即使是真實的現代產品設計都不會做這些繁複的造型了,所以擬物化本身就是開倒車。


但是如何能判斷一種效果,應該通過哪種屬性來表達

剛開始的時候多練習,至少知道每種工具或者圖層屬性能出現什麼效果,當你大概了解到每種屬性能出現什麼效果之後,再遇到這樣類似的問題就可以嘗試,前期可能需要多嘗試幾次才能出來,到後期熟悉之後應該很好判斷了。總之,這種判斷是基於你對每種屬性的了解和使用PS的經驗得來的。


條條大路通羅馬

不認路都白搭


當成是實物,想像物體的材料,光線投影情況, 慢慢增加細節


推薦閱讀:

一個顛覆用戶操作習慣的界面設計,大家有怎麼樣的看法?

TAG:AdobePhotoshop | 用戶界面設計 |