• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】詳細解析如何臨摹網頁圖標教程




    詳細解析如何臨摹網頁圖標教程

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自站酷的設計理論類文章,寫教學的作者是白夜,感謝白夜提供設計理論的實作教學。

    教學大綱:

    臨摹,無論是純粹的藝術修鍊還是設計學習,都是必須要經過的階段。這裡有人要說了,臨摹嘛,不就是找張作品然後對着他畫出一樣的來不就好了嗎,誰不會呢?


    設計理論教學開始

    臨摹,無論是純粹的藝術修鍊還是設計學習,都是必須要經過的階段。這裡有人要說了,臨摹嘛,不就是找張作品然後對着他畫出一樣的來不就好了嗎,誰不會呢?

    可是,確實有些新人並不知道如何有效地臨摹。這裡,就圖標設計舉例,簡單介紹如何更加有效地臨摹。

    首先,自然是尋找參照物。這裡,要注意的是,參照作品必須有一定的質量,否則不僅浪費時間而且影響你的眼見。其次,對於參照作品應符合當前你的水平,特別是對於新人來說更不應該一開始就找較高難度的作品,這樣容易遭受挫折喪失學習的激情。應該從簡單的開始循序漸進,慢慢建立自信,逐漸提高難度。

    接下來就是如何操作,有些人可能找到了一副作品後會在PS如圖操作。

    詳細解析如何臨摹網頁圖標教程

    比如要臨摹Gtalk圖標,有人會用兩個畫布,一個原圖另一個練習的畫布,甚至圖標大小也不一樣。如此做有幾個不好的地方。

    1.操作麻煩,經常會需要兩畫布之間來回切換。

    2.圖標大小不一樣,導致需要自己重新判斷圖標各元素之間的比例關係,對於剛剛起步的新手來說難免有些手慢腳亂。

    所以,個人建議以以下方式進行。

    詳細解析如何臨摹網頁圖標教程

    將原圖層解鎖成普通圖層,置於圖層最底處。其上是自己重新做好的背景圖層,一般處於隱藏狀態,只有當需要查看臨摹好的圖標在自己背景下效果時再打開。然後根據參照作品圖標名稱分別命名編組,並在其相應組內繪製,臨摹圖標時也盡量保證圖標比例大小與原作一致。

    當然有些情況下,參照作品也只是小小的一個圖標,所以不得不用兩個畫布,但是也務必保證新畫布大小,圖標比例與原作一致。

    這裡有個小技巧,特別是進行圖標設計時經常用到。點擊“窗口”——“排列”——“為XXX新建窗口”最後效果如下圖。

    詳細解析如何臨摹網頁圖標教程

    會出現一個與當前畫布一模一樣的新窗口。將此窗口拉到合適比例,比如當前你只需繪製Gtalk圖標,就可以將新窗口拉至足夠顯示即可,並保持100%可視狀態。這樣你在繪製圖標細節時,無論放到多大,進行任何操作,新窗口都會同步。如此,大大減少了100%與放大狀態來回切換的時間。

    接下來就是如何具體的臨摹。

    在臨摹開始時,先不要急着動手。先在100%視圖下分析原圖可能使用的手法、圖層樣式、光源,質感等,如100%下看的不夠清楚也可再放大觀看。在如此思考後再進而動手,則對於作者的創作思路,使用的技巧,表現手法等都會比直接動手臨摹有更深層的理解,也更容易記在腦中。

    此時,有人可能會問了。我明明按照原圖臨摹完了,可是為什麼看起來就沒有原圖精緻呢。

    這裡產生問題的原因可能有幾種。

    1.像素是否對齊,是否無鋸齒。

    詳細解析如何臨摹網頁圖標教程

    該形狀100%下看似乎沒有什麼問題,可是放大后呢?

    詳細解析如何臨摹網頁圖標教程

    哈,原來是邊緣沒有對齊到像素,導致了虛邊!如果虛邊過多,圖標如何能精緻呢?對齊到像素,雖然是常識,可是對於一些新手來說,確實經常被遺忘。這裡也告訴大家一個小技巧,如圖:

    詳細解析如何臨摹網頁圖標教程

    選擇矩形/圓角矩形/橢圓工具時,點導三角——然後選擇對齊像素。這樣再繪製時,會自動對齊,當然如何你之後又進行了放大,縮小或移動后還是有可能會產生虛邊,要注意調整哦。

    2.細節質感表現。

    詳細解析如何臨摹網頁圖標教程

    詳細解析如何臨摹網頁圖標教程

    左邊原圖,右邊臨摹。粗一看似乎還蠻像,可是仔細一打量,差距還是很明顯的,那區別在哪呢?我們放大來看。。

    詳細解析如何臨摹網頁圖標教程

    請各位,自行對照編號所對應區域:

    1.木頭處的漸變對比不夠,導致看起來像平的,而且木紋的質感完全模糊。

    2.字體的亮色描邊過於明顯,不夠細膩,內陰影也較為生硬。

    3.木頭邊緣高光只是簡單的白色降低透明度。

    4.木頭厚度部分的漸變處理太簡單,高光部分的色彩也並非是白色,甚至連木紋都沒有。

    5.深灰到淺灰的對比不夠。

    6.磁盤高光部分白色太過明顯。

    新人臨摹時導致這些細節沒能妥善處理的原因可能有幾種。

    1.思想不端正。臨摹時並非100%投入注意力,甚至有可能一邊臨摹,然後做了幾部后切換出去看看電影刷刷微博什麼的。

    2.惰性。“哎呀,這點小東西沒關係啦!”臨摹時,產生這種想法,覺得這點差別有沒有都一樣,所以就懶得改動,有時候也可能是做到後面才發現前面一些細節有問題,可是如果要修改需要花費較多的精力,於是就偷懶勉強過了。

    3.技能水平。可能確實是手頭功夫或者說軟件的水平不夠,對於這個問題,平常可以看看一些難度不大的教程,難後邊看邊做,這點很重要。切忌,看完之後覺得“誒,這個原來這麼簡單,我記住了!”然後繼續翻下篇教程。如果是這樣的話,即使看1000篇教程也無濟於事。還有,建議不要看太多的教程,否則大量信息的湧入會讓你手足無措不知道從何練習,甚至產生挫敗與危機感,“啊!這個我也不會,那個我也不會,糟糕!要怎麼辦啊!”

    4.眼力。相信做視覺的很多人都聽過一個名詞叫做“像素眼”,顧名思義,即能洞察到1像素級別的細微差異。這點,對於剛剛步入該領域的新人或許難以做到。也正因為眼力不夠,所以才會導致,明明臨摹完了可是就是沒原作精緻,更加可惡的是又找不出哪裡不一樣。對此,有個建議。就是下載一些作品的源文件,如下2圖。

    詳細解析如何臨摹網頁圖標教程

    詳細解析如何臨摹網頁圖標教程

    將源文件進行一定程度的放大,這樣便於觀看細節!然後從第一個組,第一個圖層開始!隱藏-打開-隱藏-打開-隱藏-打開。對每一個圖層,每一個圖層樣式反覆如此操作,觀看前後的差異。有些細節非常細微,所以需要多次反覆操作可能才能發現。用此方法進行一定程度的訓練,對於像素眼的鍛煉是有好處的。

    以上4點,是臨摹後效果不好的主要4個原因。你是哪點呢。

    對了,說到源文件,順便提一下。

    在臨摹時,可以偶爾找幾個優秀作品的源文件進行臨摹!同樣在臨摹前,也先分析作者可能用到幾個圖層,什麼圖層樣式。進行了一定程度的思考後,在一個個圖層去翻看這樣對於提升也會很有好看。

    但是,個人建議不適合一直臨摹源文件。源文件的臨摹適合遇到一定程度的瓶頸或者完全不知道該如何表現時進行練習,但不能產生依賴,不然思想容易陷入僵化。覺得,這個效果就是要這麼實現,這個圖層樣式就是該這麼用。記住,一個效果可以有多種不同的方式實現,作者的是一種你也可以有另一種。同樣,一個圖層樣式可以如此用,也可以有其他用法。就比如投影,可以最直接的做物體的投影,可是同樣也可以做高光。內發光可以只是做發亮,同樣也可以做變暗甚至當描邊使用。關鍵在於變通,切忌切忌。

    臨摹的基本方法掌握了,接下來就是大量的練習,等待量變產生質變。一定時間過後,你就該試圖從臨摹中脫離出來,嘗試原創。畢竟臨摹的最終目的就是為了創作。不然,你即使臨摹的再好看也無濟於事。但是,即便你已經可以創作了,保證一定量的臨摹也是有必要的。臨摹與創作在我看來是相互穿擦,相互指引的關係,而並非獨立的個體。

    好咯,最後來個總結。

    1.找到適合自己程度且有質量的作品臨摹,循序漸進,慢慢提高難度,從完全臨摹,到慢慢原創。

    2.掌握一些臨摹的小技巧,端正態度,嚴肅認真。

    3.一定程度的源文件臨摹。

    4.大量練習,直至產生質變。

    其實,設計的提高是綜合因素的影響。看,思,練,一個都不能少,這裡我就不多說廢話了。相信這方面的理論大家都看得夠多了。

    哎,第一次寫教程,果然這活不是那麼輕鬆啊。還有,第一次嘛,難免有些疏忽與不正確的地方,歡迎一些較真的同學幫忙指正,另外,嘿嘿!我也只是個新人。

    — —

    文章永久連結為: 詳細解析如何臨摹網頁圖標教程