Photoshop創建時尚MP3播放器

【火星時代專稿，未經授權不得轉載】

導言：
大家好！現在，幾乎每個人都會有某種樣式的播放音樂的MP3。在這個教程中，我們將示範如何在ps中創建一個漂亮的，時尚的，簡約的MP3，為您的Flash項目播放音頻文件。

創建一個黑色徑向漸變的背景。在任何顏色的層上，添加一個如下所示的漸變圖層樣式。（圖01）

圖01

用圓角矩形工具（設置一個半徑為20像素）創建一個該設備的主要元素，表現設備的形狀圖層（點擊菜單上的第一選擇）。（圖02）

圖02

雙擊該圖層上的向量，顏色編輯器將打開。我們可以選擇一個#E1E0E0的淺灰色，進而可以增加表麵的發光程度。（圖03）

圖03

現在我們要創建一個該設備周邊的一個斜麵。在此之前，我們需要用PS標尺創建一個參考標準。建立參考線，通過拖動鼠標，在放置光標的位置放置參考線，這將使我們能夠創造一個外圍設備周圍等距離斜麵。（圖04）

圖04

把這個圖層的不透明度調為0，因為我們隻是想看到一個表麵上2像素的斜麵。（圖05）

圖05

套用一個1像素的描邊，在設備的內部位置要使用比設備前麵更暗的顏色。在這一步，我們要創建一個代表行之間的形狀和播放器的前聯合差距的線。（圖06）

圖06

設置2像素值以下的描邊。（圖07）

圖07

給設備的前部添加軟梯度，讓設備更有凸出感。（圖08）

圖08#p#e#

現在，我們將突出這個MP3的優勢。要做到這一點，需要添加一條有擠壓感有三維效果的線。然後在MP3的外表麵添加2像素灰度描邊效果。（圖09）

圖09

利用錐與浮雕風格，我們在這條線的上部區域添加光效果。現在物品看上去像是從上麵打光，下麵是變得更暗的擠壓效果。（圖10）

圖10

現在在這個圖層上添加柔柔的，輕輕的內陰影效果，讓播放器的前麵更顯突出。（圖11）

圖11

通過複製和編輯前麵的斜麵層，我們創造更多的代表不同的控製按鈕的斜麵。（圖12）

圖12

現在通過編輯形狀層來創建播放器的主播放/暫停按鈕。重複第一個斜麵，在邊界以內畫一個圓形物體。然後放大10％的水平，因為我們隻需要那些斜麵。（圖13）

圖13

給下麵這樣在步驟十三中創建的形狀，添加蒙版，數值如下。（圖14）

圖14

為了使蒙版隱藏對象和它的圖層樣式，在圖層樣式窗口單擊選項“圖層蒙版隱藏效果”。如果我們不選擇此選項，這個蒙版隻能隱藏形狀，但是會把效果顯示出來，而我們就是想要把它隱藏。（圖15）

圖15

相同的蒙版也將用於其他斜麵，我們可以從之前的圖層屏蔽掉。點擊鼠標右鍵，選擇“從選區中減去圖層蒙版”。這將創建一個和以前相同的選擇。（圖16）

圖16#p#e#

在這一步，我們將重複選擇轉換圖層的步驟。（圖17）

圖17

我們已經有了設置主按鈕的斜麵。現在我們需要給播放器創建一個顯示器：黑色亞克力屏幕，在那裏可以顯示歌曲名字和播放時間。（圖18）

圖18

首先，我們使用陰影來創建一個光從上麵射向底部的斜麵。使用圖片顯示配置的風格，可以使圖片顯得銳利和清晰，而不是黑暗和模糊。（圖19）

圖19

現在，我們需要建立一個徑向漸變。把黑色和白色兩種顏色盡量靠近中心附近，那樣沒有這麼多兩色的柔軟性。黑色占49％，白色占50％。（圖20）

圖20

取消與圖層對其選項。如果不這樣做，梯度將隻能從該對象的中心到邊緣，我們希望梯度更大和更廣泛。（圖21）

圖21

鏡麵效果，使用兩個類似於我們創建按鈕那一步的斜麵來做一個形狀。使用一個一致行程內的黑色1像素描邊。使用內部發光，2像素的大小設置為屏幕上的混合模式。（圖22）

圖22

現在我們已經完成了MP3播放器的前麵。現在需要添加一些顯示按鈕和文本的圖標。（圖23）

圖23

現在，讓我們在顯示屏上模擬顯示滾動文本。使用像素化的字體，添加歌曲名稱。（圖24）

圖24#p#e#

用其他位圖字體創建計時器，指示時間的流逝。（圖25）

圖25

使用通用的顯示圖標和音頻或視頻播放器符號的字體。（圖26）

圖26

對於這個符號，我們使用和前表麵相同的顏色。用顏色選擇工具，我們可以繪製文本。（圖27）

圖27

現在，我們可以包括各種不同的款式，讓播放器外觀看起來像淺浮雕標一樣。使用內陰影下的相應值。（圖28）

圖28

減輕底部斜麵。（圖29）

圖29

使用柔軟的寬度和坡度小的表麵，讓播放器看起來不是很枯燥。（圖30）

圖30

現在創建音量控製按鈕。畫出一個小的金屬表麵拋光旋轉按鈕。繪製一個圓形圖層。（圖31）

圖31

使用陰影效果，製作一個具有大擠壓感的效果錯覺。（圖32）

圖32#p#e#

憑借在視角模式和一些灰色和白色條紋梯度，我們可以模擬這個按鈕的圓形拋光。確保第一次在左側使用的灰色顏色和最後的右側的灰色完全一致。（圖33）

圖33

最後，添加一個漸變填充和描邊效果，添加在斜麵外圍。按照圖片中的步驟細心操作。（圖34）

圖34

現在我們已經完成了音量控製按鈕，但還想添加一個靜音按鈕。你可以使用圖層樣式做到這一點。（圖35）

圖35

用2個像素陰影軟化圓形工具給播放器陰影處上色（見工具菜單上的價值）。（圖36）

圖36

按Ctrl + H隱藏這些操作，然後使用10％的流量和100像素的畫筆，輕輕的給陰影上色。這將使播放器中心更鮮明。（圖37）

圖37

現在在播放器的顯示屏邊緣添加一個小發光。首先，在中心的亮區畫一個1個像素的圓形。然後，使用相同的刷子，但沒有任何選擇單擊幾次，以增加該中心的力度。（圖38）

圖38

創建一個主鍵翻滾效果，當鼠標越過時使前表麵彈出。首先，在暫停後麵創建一個圓形圖標。（圖39）

圖39

陰影變暗和軟化對象的邊緣，模擬梯度，增強效果，正如按鈕被按下一樣。（圖40）

圖40#p#e#

用蒙版隱藏這個過渡，因為我們用它完成了主控按鈕的斜麵操作。同時還要記得隱藏圖層效果選項。（圖41）

圖41

重複前麵掩蓋過渡的步驟。（圖42）

圖42

我們將添加兩個燈光效果，以加強過渡。通過二色（邊緣用＃00CCFF，中心用白色）創建了一個發光的邊緣。複製圖層，垂直反射，使它看起來好像點亮在頂部和作為鼠標經過時的底部。（圖43）

圖43

最後，讓我們添加一個超薄線，這將給播放器增添更多的顯示色彩。要做到這一點，使用鋼筆工具畫一個彎曲的形狀層。（圖44）

圖44

調整為0％不透明度，並添加與播放器表麵同樣的灰色調描邊。（圖45）

圖45

從我們創建的形狀分隔，給線添加一些陰影。用鼠標右鍵點擊圖標旁邊的外彙層和選擇創建層。（圖46）

圖46

這一步在不破壞原來的形狀的基礎上在一個新建圖層。使用內陰影，讓一個圓柱浮雕的想法放到這一行。（圖47）

圖47

總結
我們的MP3播放器現在可以導出為一個透明的PNG格式和Flash編碼可以在網站上使用。您可以查看下麵的最終圖像或查看大版本。（圖48）

圖48