photoshop-create-timer-icon-1

編者按:已經跳坑UI的同學老實交代!當年有木有練過這類圖標!今天這枚圖標效果很經典了,不多介紹,作為一枚入門必備的練手圖標,今天@P大點S微博?重新把教程寫出來給大家練手,附上PSD,開工吧。

本文為作者授權優設發布,未經作者本人授權請勿轉載,謝謝 :)

作者的微信公眾號十分有料,歡迎同學們關注?Photoshop-ps 喲。

源文件 微盤下載

首先,看看我們的山寨原圖。

我們的成品:

原圖有點小,我這里文檔比原圖建得稍大了一些。

我們首先進行背景的創建,我創建了一個“漸變”調整層,設置的#444c60到#262f37的90度的徑向漸變。

建個新圖層,填充白色,執行“濾鏡—雜色—添加雜色”,設置雜色數量為20%,平均分布,并將這個圖層混合模式更改為“正片疊底”。

下面,我們制作原圖中的像素斜線,新建個5像素*5像素的文檔,放大畫布到最大,用鉛筆工具,設置鉛筆像素大小為1像素,畫出如下圖案,記得把文檔的背景圖層刪除掉,我們只要那個斜線圖層。

接下來,我們把這個圖案自定義,執行“編輯—自定圖案”。

回到我們的文檔,在“雜色”圖層上層,新建個圖層,執行“編輯—填充”,選擇使用圖案填充,找到剛才我們自定義的那個圖案,確定。

將這個斜線圖層的圖層不透明度更改為30%,這樣我們就完成了背景的創建。

設置前景色為黑色,畫一個黑色的圓角矩形,并將填充更改為20%

為這個底框圖層添加一個內陰影

添加一個投影

復制這個底框圖層,擺放到右邊,現在我們得到如下的效果:

下面,我們開始制作圖標的整體,用圓角矩形工具,畫一個圓角矩形。

為這個框添加一個漸變疊加。

添加一個外描邊。

添加一個內陰影。

現在,我們得到如下效果:

選擇框圖層,復制一層在下層,調整圓角矩形大小,寬度縮小4像素,高度不變,向下移動4像素。

選擇框拷貝圖層,再次復制一層在下層,同樣的寬度還是縮小4像素,高度不變,向下移動4像素。

為這個最底層的框,也就是框拷貝2圖層增加一個外發光。

增加一個投影。

現在,我們的效果如下:

接下來,打上字。

為這個數字設置一個漸變。

添加一個投影。

設置前景色為#172026,畫一個矩形。

為這個線,設置一個投影。

用圓角矩形工具,畫一個圓角矩形。

為這個圓角矩形設置一個漸變疊加。

添加一個斜面和浮雕。

添加一個外發光。

現在,我們的效果如下:

接下來,打上字。

為這個數字設置一個漸變。

添加一個投影。

設置前景色為#172026,畫一個矩形。

為這個線,設置一個投影。

用圓角矩形工具,畫一個圓角矩形。

為這個圓角矩形設置一個漸變疊加。

添加一個斜面和浮雕。

添加一個外發光。

現在,我們的效果如下:

我們把最后一個圖標修改一下,我們把高光圖層,移動到文字5的下層,復制一層框圖層在文字5的上層。并畫一個矩形減去,組合形狀組件。

進行適當的透視變形,得到如下效果。

為其設置一個漸變疊加。

添加一個漸變的描邊。

添加一個內陰影。

復制一層文字5,置于這個變形后的框的上層,轉形狀,用減去模式畫個矩形,得到一個一半的5

對這個一半的5進行透視變形。

為這個一半的5添加一個漸變疊加。

添加一個投影。

現在,我們得到如下效果:

設置前景色為黑色,用鋼筆工具畫一個下圖的形狀,我們來添加一個陰影。

在屬性面板中,為其設置一個10像素的羽化。

更改這個陰影圖層的混合模式為正片疊底,不透明度35%。

到這里,就大功告成了,當然,你喜歡的話,隨便做什么顏色都行。

【P大點S精品教程合集】

手把手教你打造現代風格海報:
《AI+PS新手教程!手把手教你打造簡約現代的極簡海報》

給新手小白的Photoshop形狀指南!
《超實用!PHOTOSHOP基礎形狀新手入門指南全科普!》

教你繪制逼真寫實的黑板粉筆字:
《PS教程!手把手教你繪制效果逼真的黑板粉筆字》

原文地址:tieba.baidu
作者:@P大點S微博

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量98萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的”福利”嗎?
添加 優秀網頁設計 微信號:【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加:

sdcweixin

點贊
收藏 2

發表評論 已發布 1

還可以輸入 800 個字
 
 
載入中....
相關推薦
1 收藏