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

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

效果圖：

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

操作步驟：

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

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

在合適的位置先畫一個黑色的正圓：

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

然后將RBG左側的三個滑標移到最右邊并且勾選選項中的限制顏色和增加透明度：

點擊隨機化，選擇一個自己覺得比較合適一點的紋路，然后降低漸變的不透明度：

再給唱片來點質感吧，選擇形狀工具，把圓形的填充色改為漸變。

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

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

ctrl+t自由變換，鼠標右鍵選擇透視：

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

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

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

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

ctrl+t自由變換縮放到合適的大小：

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

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

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

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

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

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

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

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

查漏補缺一下，原圖唱片應該還加了個外發(fā)光：

接著畫桿吧，兩個圓形，一個灰色一個白色：

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

再畫兩個圓角矩形：

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

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

再畫兩個裝飾，方法不贅述啦，實在不會看源文件吧：

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

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

Ps畫確實太麻煩了點，所以我是用Ai畫了拖進去的，不過畫的也不怎么樣。

然后加點文字之類，最后大概這個樣子：

因為我們后面要做動圖，這里的進度條組先復制出來一個，后面會用到：

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

大家知道，野郎的老牛機能力有限，我們就暫定把視頻動畫都設置為4秒吧。

在項目面板里找到唱片底座，然后選中高光，在變換里選中旋轉，然后鼠標右鍵添加關鍵幀：

將滑標移動到4秒的位置，然后將旋轉的角度改為360度旋轉一周，高光如果你覺得過于明顯可以調整它的不透明度噢:

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

接下來雙擊紅色方框出的進度條拷貝組：

選中橢圓對象，點擊變換-位置添加關鍵幀，調整好關鍵幀的時間后，用移動工具將橢圓移動到進度條的最右邊：

再選中矩形對象，在效果和預設里搜索填充，然后修改一個填充色：

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

選中進度條對象組：

將橢圓隱藏：

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

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

當然，前提是你得先把Adobe Media Encoder安裝上：

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

將格式改為動畫gif，然后你可以修改自己想要導出的尺寸和時間，點確定：

再來點擊紅色方框出的圖標渲染即可：

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

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

最后來看看效果吧：

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

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

私轉必究
 

滿滿的技術含量啊，同學們可以做成功的話當然是棒棒的，慢慢積累，所有都是由不會到會的。