ps設(shè)計經(jīng)典的ICON音樂圖標(biāo)(9)

來源:百度貼吧 作者:_projava_ 學(xué)習(xí):13839人次

在Photoshop中圖層樣式是最為直觀的東西,所有的效果都能量化,以數(shù)值的形式表現(xiàn)出來,就是各種晦澀難懂的等高線也可以用數(shù)字來表現(xiàn)。利用圖層樣式中的混合模式可以得到千變?nèi)f化的效果,很多的UI和icon絢麗的效果大多數(shù)是靠圖層樣式來實現(xiàn)的。

今天我的臨摹的iTunes圖標(biāo)是一個非常經(jīng)典的icon,不過現(xiàn)在你們看不到了,F(xiàn)在的版本只能說是走火入魔,推崇扁平化,說它漂亮也談不上,說難看也不至于,下面是我完成的效果圖,不過我對它的外輪廓作了一些惡搞性質(zhì)的變化。這個外形介于正方形和圓形之間,它跟圓角矩形不是一個概念,迎合了現(xiàn)在的審美觀。

效果圖:

Photoshop設(shè)計軟件圖標(biāo)教程

下面開始臨摹過程,首先我百度了一張原圖作為參考

Photoshop設(shè)計軟件圖標(biāo)教程

新建一個1000X1000的新畫布~

Photoshop設(shè)計軟件圖標(biāo)教程

粘貼剛才復(fù)制的iTunes原圖,移動到角落上作為參考

Photoshop設(shè)計軟件圖標(biāo)教程

按ctrl+r打開標(biāo)尺,右鍵標(biāo)尺選擇百分比

Photoshop設(shè)計軟件圖標(biāo)教程

快捷鍵alt+v+e在垂直位置輸入50%

Photoshop設(shè)計軟件圖標(biāo)教程

繼續(xù)橫向位置也是50%

Photoshop設(shè)計軟件圖標(biāo)教程

設(shè)置好參考后點擊圖層欄下面的快捷按鈕添加一個漸變調(diào)節(jié)層

Photoshop設(shè)計軟件圖標(biāo)教程

選擇你認(rèn)為比較合適的顏色搭配。本來我打算給出顏色的代碼,后來想想還是算了,每個人都有自己的獨好。我認(rèn)為好看的你不一定也認(rèn)同,所以這里你大可不必按照我的選擇

Photoshop設(shè)計軟件圖標(biāo)教程

在圖形工具里選擇橢圓根據(jù)

Photoshop設(shè)計軟件圖標(biāo)教程

以參考線的交叉點為中心畫一個大小差不多跟畫布大小的圓形。至于它的顏色大可不必在意,任何顏色都可以,我只要的是它的形狀

Photoshop設(shè)計軟件圖標(biāo)教程

右擊“選擇工具”,選擇“直接選擇工具”,也就是白色的箭頭。如果你比較熟悉這個工具的話可以結(jié)合ctrl建快速轉(zhuǎn)換

Photoshop設(shè)計軟件圖標(biāo)教程

框選水平方向的兩個錨點

Photoshop設(shè)計軟件圖標(biāo)教程

右鍵選擇“自由變換點

Photoshop設(shè)計軟件圖標(biāo)教程

在"設(shè)置水平縮放"里輸入80%大小。這時候你看到這個圓形變成一個橢圓

Photoshop設(shè)計軟件圖標(biāo)教程

同樣框選垂直方向的兩個錨點,在垂直方向輸入80%,F(xiàn)在你看到的形狀跟我頂樓的差不多了

Photoshop設(shè)計軟件圖標(biāo)教程

按ESC隱藏路徑。雙擊打開圖層樣式,添加一個漸變。如果你的想象力足夠豐富的話,可以隨意填充你認(rèn)為漂亮的顏色組合

Photoshop設(shè)計軟件圖標(biāo)教程

繼續(xù)添加描邊。其實用斜面浮雕效果也差不多,不過我認(rèn)為用線性漸變的描邊來模擬“倒角”更加細(xì)膩

Photoshop設(shè)計軟件圖標(biāo)教程

ctrl+j復(fù)制一層,ctrl+t自由變換。打開“保持長寬比”,同比例縮小為95%

Photoshop設(shè)計軟件圖標(biāo)教程

重新修改它的圖層樣式數(shù)值,首先是漸變填充

Photoshop設(shè)計軟件圖標(biāo)教程

它同樣也有一個線性漸變的描邊,注意它的顏色要加深

Photoshop設(shè)計軟件圖標(biāo)教程

ctrl+j復(fù)制一層,在圖層縮略圖上右鍵清除圖層樣式

Photoshop設(shè)計軟件圖標(biāo)教程

ctrl+t自由變換。同樣要打開“保持長寬比”縮小為95%

Photoshop設(shè)計軟件圖標(biāo)教程

按ESC或者點擊矢量蒙版隱藏路徑。雙擊進(jìn)入圖層樣式,添加一個徑向漸變。每個人的口味不同,這里我想盡量模擬原圖的風(fēng)格,所以選擇了接近原圖的顏色

Photoshop設(shè)計軟件圖標(biāo)教程

添加內(nèi)發(fā)光,我們要摒棄一個概念,“發(fā)光”不一定是亮的,有時候也可以的暗的

Photoshop設(shè)計軟件圖標(biāo)教程

再次添加“投影”,現(xiàn)在我得到一個邊緣看上去比較柔和的效果。其實這里你盡可使用“外發(fā)光",效果是一模一樣的,不過投影的控制更加靈活,它還有”距離“的選項,”外發(fā)光“相比之下比較死板

Photoshop設(shè)計軟件圖標(biāo)教程

還有這個形狀下面的反射效果,以前我在別的網(wǎng)站見過ps愛好者臨摹這個icon的時候比較拘謹(jǐn),他另外使用選區(qū)的減除來實現(xiàn)這個效果,這里我覺得可以鄙視一下,相比之下他對圖層樣式的理解沒有我透徹,我就這樣吹一下牛大概不會影響到我的光輝形象吧,開啟內(nèi)陰影模擬下面的反射效果,這里我要提醒各位注意”使用全局光“的選項

Photoshop設(shè)計軟件圖標(biāo)教程

繼續(xù)復(fù)制一層,在圖層上右鍵清除圖層樣式

Photoshop設(shè)計軟件圖標(biāo)教程

ctrl+t把這個形狀縮小至98%

Photoshop設(shè)計軟件圖標(biāo)教程

單獨選擇下面的錨點往上移動

Photoshop設(shè)計軟件圖標(biāo)教程

結(jié)合shift選擇左右兩個錨點,右鍵選擇”自由變換點“編輯這個形狀的外形

Photoshop設(shè)計軟件圖標(biāo)教程

雙擊這個結(jié)果編輯的形狀進(jìn)入圖層樣式,添加線性黑白漸變,注意混合模式的變化

Photoshop設(shè)計軟件圖標(biāo)教程

還有白色的”內(nèi)陰影“模擬高光

Photoshop設(shè)計軟件圖標(biāo)教程

接著是icon中的音符,這里要使用到圖形工具。先畫一個橢圓,大小隨意,到時候我們可以編輯

Photoshop設(shè)計軟件圖標(biāo)教程

用”疊加模式“畫一個矩形,記得要用第二個的疊加按鈕,這樣能保證它們在一個圖層里

Photoshop設(shè)計軟件圖標(biāo)教程

選擇”路徑選擇工具“,框選這兩個形狀后按ctrl+alt+t復(fù)制移動到合適的位置~

Photoshop設(shè)計軟件圖標(biāo)教程

同樣還是選擇”路徑選擇工具“,點擊任意一個矩形,ctrl+alt+t自由變換,把它設(shè)為音符橫向

Photoshop設(shè)計軟件圖標(biāo)教程

點擊上面的”組合“合并

Photoshop設(shè)計軟件圖標(biāo)教程

選擇鋼筆中”刪除錨點工具“,刪除右邊多余的錨點

Photoshop設(shè)計軟件圖標(biāo)教程

選擇”添加錨點工具“,在橫條中間增加兩個錨點

Photoshop設(shè)計軟件圖標(biāo)教程

ctrl+t編輯這個音符,在垂直斜切里輸入-11度,這里沒有硬性規(guī)定必須要11度。我只是目測它大概是這個角度

Photoshop設(shè)計軟件圖標(biāo)教程

使用”直接選擇工具“選擇這兩個剛剛添加的錨點,往上移動一些距離

Photoshop設(shè)計軟件圖標(biāo)教程

雙擊這個音符圖層打開圖層樣式,先添加一個徑向漸變

Photoshop設(shè)計軟件圖標(biāo)教程

添加斜面浮雕效果

Photoshop設(shè)計軟件圖標(biāo)教程

外發(fā)光,我使用了”柔光“模式以強(qiáng)化它的通透效果

Photoshop設(shè)計軟件圖標(biāo)教程

這個音符的外發(fā)光還有更深的一層,既然我已經(jīng)用過了”外發(fā)光“,只好使用投影來實現(xiàn),不過我前面說過了,用投影來實現(xiàn)一點也不遜色于外發(fā)光

Photoshop設(shè)計軟件圖標(biāo)教程

接著用一個內(nèi)發(fā)光來強(qiáng)化這個音符。這里我墨跡幾句,個人認(rèn)為圖層樣式里最強(qiáng)大的功能不是投影,也不是斜面浮雕,而是等高線。如果你的觀察力足夠強(qiáng)的話你會發(fā)現(xiàn)我使用了一個很特別的等高線

Photoshop設(shè)計軟件圖標(biāo)教程

選中所有可移動的圖層,往上一動一段距離

Photoshop設(shè)計軟件圖標(biāo)教程

最后一步,我用Photoshop力最基礎(chǔ)的畫筆來制作它的陰影,畫筆是Photoshop里最強(qiáng)大的功能,而且沒有之一。如果沒有畫筆你什么都干不了,忘記某個菜鳥說什么鋼筆是Photoshop最重要的這個謬論,那個傻逼把Photoshop當(dāng)成 AI 和CD使了。

在漸變背景層上新建一層,用一個硬度為0,差不多120大小在底下點一下

Photoshop設(shè)計軟件圖標(biāo)教程

ctrl+t自由變換,水平拉伸

Photoshop設(shè)計軟件圖標(biāo)教程

不要確認(rèn)這個操作,繼續(xù)右鍵選擇變形,仔細(xì)的把它調(diào)成這個形狀

Photoshop設(shè)計軟件圖標(biāo)教程

稍微往上移動

Photoshop設(shè)計軟件圖標(biāo)教程

選擇這個陰影層,開啟圖層欄上面的”鎖定像素“按鈕,給它填充比漸變背景上更深的顏色

Photoshop設(shè)計軟件圖標(biāo)教程

選擇畫筆,減少透明度和流量,在最接近圖標(biāo)的地方涂抹更深的顏色

Photoshop設(shè)計軟件圖標(biāo)教程

完成

Photoshop設(shè)計軟件圖標(biāo)教程

 

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
素衣2016-01-15 05:28
手已殘
素衣2016-01-15 05:01
手已殘
熊孩紙2014-08-09 08:55
學(xué)習(xí)啦。。學(xué)習(xí)啦。
芋頭2014-08-09 12:51
學(xué)學(xué)習(xí)啦。。。
北雪炎2014-08-09 10:43
學(xué)習(xí)學(xué)習(xí)啦。。。
楓花雪月2014-08-09 09:44
學(xué)習(xí)啦。。學(xué)習(xí)啦。。。
神要囿光2014-08-09 09:18
學(xué)習(xí)啦、
豆腐小少爺2014-08-09 09:18
學(xué)習(xí)啦、
再笑又哭那顆星2014-08-09 09:18
學(xué)習(xí)啦、
咻冬咚2014-08-09 09:18
學(xué)習(xí)啦、
拳拳王子2014-08-09 09:18
學(xué)習(xí)啦、
笑嘆塵世滄桑2014-08-09 05:36
學(xué)習(xí)啦。。學(xué)習(xí)。。學(xué)。。。
許莪永世墮落2014-08-09 02:37
學(xué)習(xí)啦學(xué)習(xí)啦。。。

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!