·?軟件:?Photoshop

·?耗時?3-4?小時

·?技巧:?圖層樣式、圖層蒙版、光效、陰影效果

本文將簡略的陳述這款圖標的設計思路，如何讓圖標顯得栩栩如生，大家在放假的時候，來杯咖啡，慢慢的按照作者步驟來一發吧，難度有的，主要是掌握思路哦！~~~

相關教程推薦：
《PS教程！制作絢麗的閃光粒子字體特效》
《PS教程:簡單幾步創建復古風格的圖文排版》
《PS+AI制作精致可愛的毛線風格圖標》

步驟01

首先用草圖勾勒出大體理念。這里我畫出了黑膠，然后添加了按鈕、唱針等元素。為了讓草圖看起來更有立體感（而不使用透視法），因此，我添加了圓角矩形，讓圖標看起來像是打開的盒子一般。

步驟02

掃描草圖，導入到PS中。選擇漸變工具，填充背景從深色到淺色。下一步，花一個512x512的圓角矩形，半徑90px。按住Alt，選擇形狀，創建新圖層組，命名為“Icon”，現在為該圖層組添加蒙版

步驟03

色彩選擇非常重要。顏色一定要細膩，黑膠使用了深棕色，按鈕使用了亮棕色。

步驟04

利用圖層樣式，我們可以添加很多有趣的效果。黑膠部分添加了線性漸變疊加，混合模式為色彩簡單，還加入了一點雜色漸變。復制圖層后，改變漸變模式為純色漸變，這樣能增添一種光反射效果。

步驟05

現在需要添加一些陰影，可以通過色彩或者線性加深的混合模式。給旋鈕以及唱針加入光反射以及投影。

步驟06

為了更逼真的陰影效果，在黑膠上方畫一個灰色矩形，加入外發光效果，混合模式為線性加深，然后調節不透明度。

步驟07

材質也很重要，適度改變材質的飽和度。然后為圖層添加蒙版，混合模式為疊加。

步驟08

注意工作圖層有序排布。

步驟09

現在可以對圖層樣式進行詳細修改，直到滿意為止。

步驟10

創建新圖層，至于頂部，加入內發光和光澤。通過光澤效果，讓整體圖標顯示同一種色調。

原文地址：www.creativebloq.com

優設網翻譯:@MartinRGB
本文由優設網原創翻譯，轉摘請注明優設網譯文出處，謝謝各位小編。

 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量61萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：