PS教程！手把手教你繪制一個復古風格的舊電視圖標

今天，帶大家來臨摹一個電視機圖標。教程不難，重點也是圖層樣式，效果非常好看，已附上源文件方便學習，@P大點S微博?針對一些細節(jié)做了很多實用的講解，非常適合新手學習，來收！

這里再次強調(diào)一點，圖層樣式中的參數(shù)設(shè)置是對應其相應圖層的，受圖層大小尺寸影響，在不同尺寸下，效果呈現(xiàn)是不同的。

比如說，同樣一個5像素的描邊的圖層樣式，在10像素的圓和100像素的圓下，其表現(xiàn)效果肯定是不一樣的。

所以，四個字：活學活用。

源文件打包 ?百度云下載：http://pan.baidu.com/s/1qWGf3dy

首先，我們看看原圖，一個400*300的小圖。

新建一個1000*800的文檔，添加一個漸變調(diào)整層，做一個#b4b097到#4e473a的90度的徑向漸變，設(shè)置縮放為150%，勾選仿色，防止出現(xiàn)色塊。

我想大家一定很好奇，我的截圖徑向漸變中的淺色為何不居中，而是位于中部居上，看我們的GIF演示。

在漸變填充的狀態(tài)下，我們把鼠標指針放置到屏幕上，出現(xiàn)那個移動工具的圖標時，我們拖動，漸變的位置也跟著動，這一個操作方法，在圖層樣式中一樣可用。

使用圓角矩形工具畫一個600*600像素的圓角矩形，設(shè)置圓角為140像素，設(shè)置水平居中，垂直居中。

我將這個圓角矩形命名為“主體”，并為其添加了一個圖層樣式。

復制一層“主體”圖層，更改圖層名為“投影”，將“投影”圖層置于“主體”圖層下層，將圖層填充設(shè)置為0，再添加一個圖層樣式，我們來增強一下投影效果。

原圖畫的是一個類似橢圓的形狀，我這里偷懶一下，還是畫的圓角矩形，大小為500X360像素，圓角半徑為130像素，添加一個圖層樣式。

下面，我們創(chuàng)建屏幕，設(shè)置前景色為#b4b097，使用圓角矩形工具，畫一個大小為420*280像素，圓角半徑為100像素的圓角矩形。

為這個“屏幕”圖層添加一個圖層樣式。

復制一層“屏幕”圖層，轉(zhuǎn)智能對象，添加一個雜色，并將圖層混合模式更改為“柔光”。

用兩個屏幕的那個圓角矩形相減，得到我們需要的屏幕下部的高光形狀，將這個形狀的顏色設(shè)置為#eaead2，在屬性面板中設(shè)置一個1像素的羽化，并將圖層混合模式更改為“柔光”，不透明度34%。

設(shè)置前景色為#eaead2，用屏幕的那個圓角矩形和一個橢圓相交，得到我們需要的屏幕頂部的高光形狀，同樣的將圖層混合模式更改為“柔光”，不透明度34%，并添加一個圖層蒙版，適當?shù)牟潦米笥覂蓚?cè)。

下面，我們來制作按紐，設(shè)置前景色為#b4b097，畫一個正圓，并添加一個圖層樣式。

設(shè)置前景色為#d9d0ca，畫一個小一點的圓，并添加一個圖層樣式。

復制一層“按紐”圖層，更改圖層名為“投影”，將圖層填充設(shè)置為0，再添加一個圖層樣式，我們來增強下投影效果。

選擇住按紐的這三個圖層，CTRL+G，創(chuàng)建圖層組，命名為“按紐1”，復制圖層組，得到四個按紐，最右側(cè)的一個按紐，我將顏色更改了，這里不再給參數(shù)了，如果你不懂得如何改，那么你看教程就是只是單純的看，并沒有真正的理解。真不會的話，下載我們的PSD看看。

最后我添加了我們P大點S的LOGO和圖標，設(shè)置了一個內(nèi)陰影和投影，這個圖層樣式太經(jīng)常用到了，我們的教程里太經(jīng)常看到了，這里就不說了。

我們的最終效果：

可能是國內(nèi)最用心做原創(chuàng)PS教程的：

【設(shè)計干貨+職場秘籍+神器推薦】

教科書級別的蘋果官方人機指南！
《騰訊力作！超實用的IOS 9人機界面指南（1）：UI設(shè)計基礎(chǔ)》

如何自學成為騰訊高級交互設(shè)計師？
《優(yōu)設(shè)訪談！騰訊高級交互設(shè)計師C7210的十年設(shè)計路》

紋理素材兩大殺器！
《酷站兩連發(fā)！專注無縫紋理素材站+多邊形背景生成器》

原文地址：pdadians

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學習平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量105萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導航：http://hao.uisdc.com