播放器制作，用PS加AE制作一個(gè)“山寨”網(wǎng)易云音樂播放界面(5)

本篇教程通過PS加AE結(jié)合做一個(gè)“山寨”的網(wǎng)易云音樂播放界面，經(jīng)常聽歌的同學(xué)們手機(jī)里一定有很多聽樂音的APP，其中網(wǎng)易云音樂可謂是眾多聽歌軟件中的一股清流，清新的操作界面，甩眾軟件八條街的用戶體驗(yàn)（網(wǎng)易云音樂打錢），不夸了，沒錢，本篇教來一個(gè)“山寨“版的操作界面，教程步驟比較長，操作有一定的難度，感興趣的同學(xué)們一起來挑戰(zhàn)一下吧。

效果圖：

所用素材：http://pic1.16xx8.com/allimg/180105/16xx8.rar

操作步驟：

新建畫布，可以選用預(yù)設(shè)好的尺寸，我這里就選擇1080*1920：

為了方便觀察，先隨意的填充一個(gè)顏色，然后先畫唱片吧。

在合適的位置先畫一個(gè)黑色的正圓：

然后雙擊調(diào)出圖層樣式，選擇徑向漸變，漸變類型選擇為雜色，粗糙度大家可以看著調(diào)。

然后將RBG左側(cè)的三個(gè)滑標(biāo)移到最右邊并且勾選選項(xiàng)中的限制顏色和增加透明度：

點(diǎn)擊隨機(jī)化，選擇一個(gè)自己覺得比較合適一點(diǎn)的紋路，然后降低漸變的不透明度：

再給唱片來點(diǎn)質(zhì)感吧，選擇形狀工具，把圓形的填充色改為漸變。

至于漸變色大家其實(shí)可以憑自己的感覺來，我這里是選擇的從000000到1d1b1b到000000到1d1b1b再到000000的漸變，角度試著來：

再畫高光，形狀工具畫一個(gè)透明到白色到透明的矩形：

ctrl+t自由變換，鼠標(biāo)右鍵選擇透視：

將矩形變換成如圖交叉的形狀，并且調(diào)整其整體的位置：

將其轉(zhuǎn)為智能對象以后，執(zhí)行濾鏡-模糊-高斯模糊，參數(shù)大家看著辦：

再將混合模式改為柔光，這樣高光的樣式基本上也就做好了：

把他們打個(gè)組，將之前的圓形復(fù)制出來一份拖到組的外面，并且在圖層面板上鼠標(biāo)右鍵-清除圖層樣式：

ctrl+t自由變換縮放到合適的大�。�

接著就是制作樣機(jī)部分了，拖入CD封面素材，將其轉(zhuǎn)為智能對象：

將其復(fù)制2份出來，1份隱藏，另外一份拖到背景層的上面：

背景層上的CD封面ctrl+t變換其大小，然后執(zhí)行濾鏡-模糊-高斯模糊，參數(shù)大家看著辦吧：

你想和原圖一樣給背景再調(diào)色搞暗點(diǎn)也可以，我這里偷懶就不調(diào)了。

然后把紅色方框出的封面對下方的圓形創(chuàng)建剪貼蒙版：

再將最上方的專輯封面更名為樣機(jī)按鈕，并將不透明度和填充度改為0，這樣樣機(jī)部分就做好了：

可以測試一下，雙擊樣機(jī)按鈕，更換一張圖以后，ctrl+s保存：

再回到原psd文件上看看，封面和背景就已經(jīng)被替換了：

查漏補(bǔ)缺一下，原圖唱片應(yīng)該還加了個(gè)外發(fā)光：

接著畫桿吧，兩個(gè)圓形，一個(gè)灰色一個(gè)白色：

再用鋼筆工具畫桿，不贅述了，注意描邊大�。�

再畫兩個(gè)圓角矩形：

接下來添加一些細(xì)節(jié)，給桿以及兩個(gè)圓角矩形添加圖層樣式-斜面與浮雕，參數(shù)大家看著來：

給大圓添加外發(fā)光：

再畫兩個(gè)裝飾，方法不贅述啦，實(shí)在不會(huì)看源文件吧：

桿畫完以后打個(gè)組，統(tǒng)一加一丟丟投影：

大體就差不多了，剩下的一些圖標(biāo)想畫就畫吧，不想網(wǎng)上找圖標(biāo)也可以。

Ps畫確實(shí)太麻煩了點(diǎn)，所以我是用Ai畫了拖進(jìn)去的，不過畫的也不怎么樣。

然后加點(diǎn)文字之類，最后大概這個(gè)樣子：

因?yàn)槲覀兒竺嬉鰟?dòng)圖，這里的進(jìn)度條組先復(fù)制出來一個(gè)，后面會(huì)用到：

接下來打開Ae，把psd文件拖進(jìn)去，選擇的類型如圖：

大家知道，野郎的老牛機(jī)能力有限，我們就暫定把視頻動(dòng)畫都設(shè)置為4秒吧。

在項(xiàng)目面板里找到唱片底座，然后選中高光，在變換里選中旋轉(zhuǎn)，然后鼠標(biāo)右鍵添加關(guān)鍵幀：

將滑標(biāo)移動(dòng)到4秒的位置，然后將旋轉(zhuǎn)的角度改為360度旋轉(zhuǎn)一周，高光如果你覺得過于明顯可以調(diào)整它的不透明度噢:

同理在項(xiàng)目面板里找到網(wǎng)易云，然后把cd封面旋轉(zhuǎn)一周，這里就不贅述了：

接下來雙擊紅色方框出的進(jìn)度條拷貝組：

選中橢圓對象，點(diǎn)擊變換-位置添加關(guān)鍵幀，調(diào)整好關(guān)鍵幀的時(shí)間后，用移動(dòng)工具將橢圓移動(dòng)到進(jìn)度條的最右邊：

再選中矩形對象，在效果和預(yù)設(shè)里搜索填充，然后修改一個(gè)填充色：

然后選中矩形對象中的變換-縮放，分別在0秒和4秒的地方打上關(guān)鍵幀，把0秒關(guān)鍵幀的縮放數(shù)值改為0：

選中進(jìn)度條對象組：

將橢圓隱藏：

這樣基本上就搞定了，過程中你可以不斷的預(yù)覽效果，以免出錯(cuò)。

把它直接成gif格式吧，選中對象以后，執(zhí)行合成-添加到Adobe Media Encoder隊(duì)列。

當(dāng)然，前提是你得先把Adobe Media Encoder安裝上：

啟動(dòng)Adobe Media Encoder后，稍等片刻隊(duì)列中就會(huì)出現(xiàn)你的對象了，點(diǎn)擊紅色方框處：

將格式改為動(dòng)畫gif，然后你可以修改自己想要導(dǎo)出的尺寸和時(shí)間，點(diǎn)確定：

再來點(diǎn)擊紅色方框出的圖標(biāo)渲染即可：

這里野郎只是分享一下Ae直接導(dǎo)出gif的方法，不過這種導(dǎo)出來的gif通常體積都很大。

我是選擇的導(dǎo)出視頻以后再用Ps創(chuàng)作幀動(dòng)畫的方式弄的。

最后來看看效果吧：

本文由“野鹿志”發(fā)布

轉(zhuǎn)載前請聯(lián)系作者“馬鹿野郎”

私轉(zhuǎn)必究
 

滿滿的技術(shù)含量啊，同學(xué)們可以做成功的話當(dāng)然是棒棒的，慢慢積累，所有都是由不會(huì)到會(huì)的。