Photoshop打造小巧播放器

來源:互聯網
上載者:User
無論你要設計一個應用程式介面、皮膚,或是一個播放器的外觀,你會發現,這篇教程中的技巧對你來說都會合用。很明顯,我不可能坐在這裡,一個字一個字的敲出打造一個介面的所有步驟,因為有些實在是基礎的基礎。但是,我想,告訴你如何創造一些元件,對你設計一個美觀的介面來說,還是有用的。

  1.首先,建立一個合適大小的文檔。這個例子中,我用的是500×500像素大小的文檔,解析度為72像素/英寸,背景為白色。

  如果你覺得在偌大的空白畫布上工作有些空蕩蕩的,那為什麼不在映像中貼一副喜愛的壁紙或製造一個簡單的背景呢?當然要保證作為背景的映像顏色非常淡,降低圖層的不透明度是個好辦法。(圖01)

圖01

  2.現在開始繪製播放器的主要形狀。在這篇教程中,我們想要製作的是一個小巧玲瓏的播放器,形狀盡量的簡單。將前景色彩設為一種淺灰色#E5E5E5,在工具箱中選擇圖形工具中的圓角矩形工具,在工具列中設定建立新的形狀圖層,圓角半徑為50px,拖動滑鼠,在圖中繪製一個圓角矩形,形狀如圖02所示。

圖02

  採用向量圖形工具來確定圓角矩形的形狀,除了方便之外,更重要的是,我們可以通過修改路徑來編輯形狀。點擊圖層剪貼路徑縮圖以顯示路徑,用直接選擇工具點擊路徑顯示節點(圖03)。

圖03

  用直接選擇工具選擇右上方的節點,點擊方向鍵向上移動5次,即向上移動5像素;選擇右下方的節點,向下移動5像素(圖04)。

圖04

  接下來,用鋼筆工具在如圖位置上添加節點(圖05),用直接選擇工具選擇上面新添加的節點,向下移動4像素;選擇下面新添加的節點,向上移動4像素(圖06)。隱藏了路徑之後,你可以看到光滑的形狀,這就是我們要打造的播放器的外形了。

圖05

圖06

  提示:用向量圖形工具建立面板形狀是個不錯的主意。不但映像品質會提高,更重要的是,你可以隨時編輯修改。

  3.下面的工作是要給形狀添加立體外觀。我想使它呈現光滑的金屬外觀,我們通過圖層樣式來實現。當然,你可以用各式各樣的方法來進行,但運用圖層樣式的話,以後遇到相同的情況就可以直接套用樣式了。雙擊圖層,我們開始運用圖層樣式:

  選擇漸層疊加,混合模式為正常,不透明度為10%,縮放為34%,其它保持預設;
  選擇光澤,將混合模式改為正常,顏色為黑色,不透明度為16%,其它保持預設狀態;
  選擇斜面和浮雕,在結構中,僅將大小改為9像素,軟化改為6像素,在陰影中,將角度改為90度,高度改為6度,暗調模式的不透明度為0%,其它保持預設;
  選擇內發光,混合模式改為正常,不透明度為21%,發光顏色為黑色,其它保持預設;
  選擇內陰影,將不透明度改為17%,角度為-87度,取消全域光,距離為5像素,阻塞為16%,大小為6像素,其它保持預設;
  選擇投影,不透明度為17%,角度為90度,距離為3像素,擴充為0,大小為3像素。

  這樣,播放器的面板就完成了。你可以將圖層樣式儲存起來,下次再用。下面的任務是給面板上添加各種元素。(圖07)

圖07



 

  4.選擇圓角矩形工具,將前景色彩設為白色,依然按照剛才的設定,在面板層上建立一個小一些的圓角矩形層,添加漸層疊加樣式,將不透明度設為49%,漸層為從白到黑,選擇反向,縮放為93%,效果如圖08。

圖08

  現在我們需要一個略小於我們剛才所建的黑色圓角矩形。複製剛才的形狀圖層,右鍵點擊新的副本層,從快顯功能表中選擇“清除圖層樣式”命令;雙擊圖層縮圖,在拾色器中選擇黑色,這樣,新圖層的顏色就變成了黑色。我們想使它稍微小一些,按CTRL+T,調出變形框,按住ALT,使縮放對稱,稍稍向上拖動變形框的下邊, 同樣,按住ALT,向內拖動變形框側邊。如果覺得不合適,按ESC取消變形,按ENTER確定變形。(圖09)

圖09

  我們依然用圖層樣式為之添加立體效果:

  選擇斜面和浮雕:深度為1%,大小為1像素,角度為90度,取消全域光,高度為80度,高光不透明度為47%,其它保持預設,在等高線選項中,選擇消除鋸齒,範圍設為100%;
  選擇內發光,混合模式為正常,不透明度為96%,發光顏色為黑色,在圖索選項中,設阻塞為20%,大小為3像素;

  這樣,你的圖現在應該像下圖一樣(圖10)。

圖10

  5.現在,我們來打造一個真正的液晶螢幕。下面你看到的過程會和上面的有些相似。

  選擇前景色彩為#86B7E7,使用圓角矩形工具,將圓角半徑設為3像素,在黑色面板上繪製一個新的藍色圓角矩形層,作為液晶螢幕的面板(圖11)。

圖11

  它看上去太平板了,所以我們用圖層樣式修飾:

  選擇投影,將混合模式設為正常,顏色為白色,不透明度為30%,角度為-56度,取消全域光,距離為3像素,大小為1像素,其它預設;
  選擇內發光,混合模式設為正常,不透明度為41%,顏色為黑色,其餘按照預設;
  選擇斜面和浮雕,深度為211%,大小為92像素,陰影角度為-90度,取消全域光,高度為45度,高光模式為顏色減淡,顏色為白色,不透明度為30%,暗調模式為顏色減淡,顏色為黑色,不透明度為0%;
  選擇描邊,大小為1像素,顏色為黑色,映像現在如圖12所示。

圖12

  下面的步驟可隨意選擇,不過我經常用它來為映像添加高光效果,就像它真的反射了光線一樣。當然,要得到反光效果並不是只有這一種方法,但我覺得,這種方法創造的效果最為逼真。

  首先,複製藍色的液晶螢幕層,用右鍵菜單去除圖層樣式,用白色重新填充圖層。按CTRL+T,變形形狀圖層,在螢幕上的工具列中,將寬度設為97%,高度設為87%,確定變形(圖13)。隨後,在高及混合選項中,將填充不透明度降低為0,使其不可見。恢複預設前景背景色面板,並反轉前景色彩和背景色,進入漸層疊加圖層樣式,將漸層設為前景色彩到透明,選擇反向,將縮放設為123%,其餘選項保持預設。這樣,我們就得到了很好的高光,但仍有一些不夠完美,我們來進一步修改高光。

圖13

  在高光層中,點擊圖層面板下的添加圖層蒙版按紐,為高光層添加圖層蒙版,蒙版縮圖夾在圖層縮圖和圖層剪貼路徑縮圖之間。確定在圖層蒙版中,選擇鋼筆工具,畫出如圖路徑(圖14),按CTRL+ENTER,將路徑轉化為選區,反選,將蒙版選區填充為黑色,取消選擇,此時的高光層如圖15所示。

圖14

圖15

  選擇合適的字型,為液晶螢幕添加顯示數字(圖16)。

圖16

  最後,需要你發揮一些想象力,再添加一些其它的按紐和零件,使其更完整,這個精緻玲瓏的播放器就完成了。(圖17)

圖17



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。