不同的階段，臨摹的目的不盡相同。一般來說，前期臨摹更多的是練習(xí)軟件、技法，后期練習(xí)別人的風(fēng)格表達，綜合運用。所以，我把臨摹分為技法臨摹、半原創(chuàng)到原創(chuàng) 3 個階段，每一個階段沒有絕對的界限，都是在積累創(chuàng)意，完全是可以用到自己的項目中去的。

今天會分享一個我當(dāng)年做臨摹練習(xí)并融入實際項目中的小案例。

臨摹

大概是在 15 年左右，在網(wǎng)上看到錘子設(shè)計師設(shè)計的一個圖標(biāo)，覺得非常驚艷，當(dāng)時就想把它臨摹下來，這是當(dāng)時臨摹的一個效果。

△ 原作

△ 這是我當(dāng)時臨摹的圖

我在臨摹這張圖的時候，想達到的目標(biāo)是能根據(jù)自己的 logo 色及文字，做一個半原創(chuàng)的設(shè)計。

然后實際練習(xí)中，不斷觀察原作發(fā)現(xiàn)有一些細(xì)節(jié)值得學(xué)習(xí)：

1. 圖標(biāo)分為水上和水下，2 個層級，在水下的圖形因為折射的關(guān)系，會發(fā)生扭曲
2. 水下會有深淺的顏色變化
3. 真實的水會流動，所以在水下會畫出帶明暗細(xì)節(jié)的水紋線條
4. 水下會有氣泡，且氣泡的產(chǎn)生符合真實場景，氣泡的大小由小變大
5. 水面的邊緣因為透光而產(chǎn)生邊緣反射
6. 投影因為紅色盒子的影響，會偏紅色色相，并且有近實遠(yuǎn)虛的關(guān)系
7. 盒子的邊緣會有 1px 的高光和反光
8. 背景為了增加圖標(biāo)的展示效果，也做了單獨的設(shè)計，把四周壓暗，然后加上雜色，使得整體的質(zhì)感更加強烈

當(dāng)時，對我來說，在練習(xí)的過程中有一個難點就是關(guān)于第 3 個細(xì)節(jié)水的紋理執(zhí)行有些難度，因為其中包括了粗細(xì)變化、虛實變化、明暗變化等等，單純的用圖層樣式或者矢量去畫的話，難度都比較大。這個細(xì)節(jié)當(dāng)時耗費了我不少時間，后面突然想到其實也可以用合成的辦法來實現(xiàn)，然后我去找了真實水紋的圖片進行疊加，很快就搞定了。所以，只要能達到效果，不能太過于局限某一種思路。

分析并完成這些細(xì)節(jié)后，就是你在做這個練習(xí)中學(xué)到的點，嘗試把它們學(xué)以致用。

運用

記得當(dāng)時在 360 時需要設(shè)計一套關(guān)于摩洛哥藍(lán)色小鎮(zhèn)的官方定制版主題圖標(biāo)。從搜集的當(dāng)?shù)卮硇缘膱D片中發(fā)現(xiàn)，多彩顏料是當(dāng)?shù)氐囊淮筇卣?，所以決定以染料為關(guān)鍵詞去畫一個圖標(biāo)，又因為顏料本身自帶多彩的特點，所以以它為主題圖標(biāo)就很合適了。

然后在思考這個圖標(biāo)的時候，首先會應(yīng)用參考圖中的配色，并結(jié)合染缸的造型做出了第一版的效果。

這個效果雖然是表達了那個意思，但缺乏亮點，聯(lián)想之前練習(xí)過水的技法表達（臨摹中第 3 點細(xì)節(jié)運用），正好可以利用水的紋理做下強化，這樣就優(yōu)化出了第二版。

嗯，看起來感覺有了一些特點，但感覺缺乏細(xì)節(jié)，接著思考水除了有紋理高光，應(yīng)該還會有邊緣高光（結(jié)合臨摹中第 5 點細(xì)節(jié)），所以在邊緣嘗試加了高光，增加體積感，做出水要漫出來的感覺。

如果只有這一層高光的話，細(xì)節(jié)度感覺還是不大夠，在之前的文章《如何從優(yōu)秀作品中偷師，用一個游戲案例教你思路》我有分享到在 UI 大佬的作品中能學(xué)到他們對于 1px 高光的使用（臨摹作用中的第 7 點），這里因為是液體的材質(zhì)表現(xiàn)，所以增加一個高光點增加水的通透感。

到目前為止，似乎看起來已經(jīng)差不多了，但考慮到現(xiàn)實世界中，溢出的彩色液體在透光性很好的情況下，也會對周圍環(huán)境產(chǎn)生影響，所以我在顏料設(shè)計的四周，配上對應(yīng)的四種顏色的模糊投影（臨摹練習(xí)中的第 6 點）。

在思考下，在臨摹的圖標(biāo)中為了使得圖標(biāo)更加自然，作品中其實結(jié)合了很多真實世界中會發(fā)生的情況，比如水的折射，氣泡的比例，深淺等等，那對于染料來說，會有怎樣的真實情況發(fā)生呢？我當(dāng)時想到一點是，染料在用的過程中其實很容易灑出來，所以圖標(biāo)背板上現(xiàn)在太過于干凈了，增加一些細(xì)節(jié)能夠使得背板能夠跟主體物產(chǎn)生關(guān)聯(lián)，也更加自然。嗯，又是一個小細(xì)節(jié)。

最后，我們對比下第一版和最終版的效果，細(xì)節(jié)確實豐富了很多。

一張動態(tài)圖可以更加清晰的看到變化。

總結(jié)

這次圖標(biāo)的優(yōu)化過程，我覺得有幾個要點對我來說印象深刻的：

圖標(biāo)的風(fēng)格可以是扁平的，但想要增加自然舒服的細(xì)節(jié)，一樣可以像畫寫實風(fēng)格那樣仿照現(xiàn)實。你需要留心觀察這個世界，就算是一張照片中也能有非常多可以利用的細(xì)節(jié)。

碰到難做出來的細(xì)節(jié)，多想想有沒有更效率的辦法。比如在做水紋理的時候，一開始就想著完全靠鼠繪畫出來，結(jié)果效果一直不大好，然后利用 PS 合成的方法，很快就能把效果做出來。

對于圖標(biāo)來說，要注意其整體性。比如圖標(biāo)中的主體物不要跟背景脫離，不要讓圖標(biāo)背板只是作為一個容器，而要讓背板也成為圖標(biāo)本身的一部分，這樣圖標(biāo)的整體性會更好。

臨摹的過程中，一定要多分析，多記錄自己覺得是細(xì)節(jié)的點。每一次記錄，都可能是將來設(shè)計時提升細(xì)節(jié)的靈感來源。

以上內(nèi)容只是我在日常練習(xí)中應(yīng)用到實際項目中的一個小案例，其實還有非常多的靈感想法都來自于你平時做的練習(xí)，關(guān)鍵是要多動手，多總結(jié)，才能增強自己對細(xì)節(jié)的把握能力。

文章來源：優(yōu)設(shè)網(wǎng)     作者：彩云譯設(shè)計

藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)