設計立體擬物風格APP圖標的PS實例教程

在開始製作之前呢,首先確定好自己要做的內容有哪些,大致的一個風格。然後去尋找參考,看看其他作者如何在作品中將自己的想法展現出來。這裡我選擇相機、天氣、日曆、相冊、設置、信息、視頻和地圖。

內容和風格確定了,參考也找的的差不多了,對於自己要做的東西有一個比較清晰的思路之後,先在草圖上將自己大致的想法畫出來,然後才用軟件將想法構建完善。這裡做的幾個圖標都是比較簡單的,基本上可以用圖層樣式來實現所有的效果。

因為是擬物風格,所以在圖標製作的過程當中,要注意體積和光影的表達。通過顏色的選擇、相似的裝飾元素使整體風格看起來更加統一和諧。

先看看效果圖

設計立體擬物風格APP圖標的PS實例教程

教程步驟

草圖

設計立體擬物風格APP圖標的PS實例教程

一、相機圖標

步驟 01 建立文檔並製作背景

新建文檔,大小2000x800px,分辨率72;新建圖層,命名背景,填充前景色#d6d6dd

步驟 02 製作底座

新建300x300px的圓角矩形,圓角半徑60px,命名底座,添加圖層樣式製造體積感

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

步驟 03 製作鏡頭外圓

新建228x228px的圓形,命名【外圓1】,添加圖層樣式

複製外圓1,修改大小190x19px,命名【外圓2】,添加圖層樣式

將外圓1,外圓2編組命名【外圓】

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

步驟 04 鏡頭內部

新建大小162×162 px的圓形,命名【內圓1】

複製3個,大小分別修改為130x130px、90x90px、56x56px

分別命名為【內圓2】、【內圓3】、【內圓4】

再按順序添加以下圖層樣式

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

步驟 05 製作玻璃球

新建大小24x24px的圓形,顏色#000000,複製一個備用

添加蒙版,擦去上半部分,添加圖層樣式

將複製的圓形顏色改為#ffffff,調整不透明度10%,添加蒙版,擦出一個月牙形狀

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

步驟 06 製作鏡頭高光

按住CTRL+左鍵點擊【外圓1】圖層縮略圖得到圓形選區

新建一個圖層,用柔邊圓筆刷(大概400px)在圓形選區的上半部分輕輕拍一下,顏色#ffffff,不透明度20%

用布爾運算做出圖中圖形(三個圖層),顏色#ffffff,不透明度30%

添加蒙版將邊緣擦的模糊一點,讓邊緣過渡看起來自然一些

在較大的兩個圖像上添加圖層樣式

設計立體擬物風格APP圖標的PS實例教程

步驟 07 添加裝飾性元素

新建100×300 px的矩形,顏色#d43131,調整圖層順序使它在底座上方,做剪貼蒙版

選個字體打一些裝飾性的文字啥的

至此,相機就做完啦~(做完記得將相機的都編成一個組)

設計立體擬物風格APP圖標的PS實例教程

二、日曆圖標

步驟 01 製作底座和日曆基本形狀

將相機底座複製一個,新建228x 224 px大小的圓角矩形,圓角半徑24,命名【底頁1】,添加圖層樣式

複製底頁1,命名【底頁2】,修改投影大小,相對底頁1上移2px

複製底頁2,命名底頁3,相對底頁2上移2px。

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

步驟 02 製作主頁面上半部分

新建228x114px大小的矩形,將上面兩個角的圓角半徑調整為24px,命名【上半頁】,添加圖層樣式

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

步驟 03 製作主頁面下半部分

複製上半頁,垂直翻轉,用小白適當調整形狀,添加圖層樣式

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

步驟 04 製作日期

選擇一個字體,隨便打個數字,將數字轉化為形狀,添加圖層樣式,複製一層備用

按住CTRL+左鍵點擊【上半頁】圖層縮略圖,選擇數字圖層,添加蒙版

為備用數字圖層添加圖層樣式

CTRL+左鍵點擊【下半頁】圖層縮略圖,選擇備用的數字圖層,添加蒙版

用小白工具對備用圖層的形狀進行調整,添加圖層樣式

最後加上月份星期

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

三、相冊圖標

步驟 01 製作底座和膠片基本形狀

新建225×144 px大小的矩形,將右邊的兩個角的圓角半徑修改為10px,顏色#f6f5f5

運用布爾運算做出上下兩排小孔(12x16px,圓角半徑4px)

新建圓角矩形116×80 px,圓角半徑10px;顏色#dad7d7

複製一個,適當調整位置和大小

將三個圖層編組,命名【膠片-下】

整組複製,命名【膠片-上】

運用布爾運算將【膠片-上】中的底修改成合適的形狀

將兩組合起來編成一個新的組命名【膠片】,添加圖層樣式

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

步驟 02 製作膠片高光和陰影

新建34x155px的矩形,顏色#ffffff,羽化4.6

複製一層,將寬改為9px

兩個高光圖層居中對齊

新建空白圖層,用柔邊圓畫筆在【膠片-上】左側邊緣畫出陰影

調整圖層順序,使高光和暗部圖層在【膠片-上】的上方,做剪切蒙版

添加紅色裝飾物,使整體圖標風格統一

設計立體擬物風格APP圖標的PS實例教程

四、設置圖標

步驟 01 製作齒輪基本形狀

新建180×180 px大小的圓,40×240 px的矩形,將矩形與圓形居中對齊

用鋼筆工具在矩形與圓形交點處,為矩形添加四個錨點

用小白調整使新增錨點兩邊偏移10px,根據情況上下調整,使得四個新增錨點仍為矩形與圓形的交點

複製兩層,分別旋轉120°和240°

將所有形狀合併形狀組件

新建80x80px的圓形,與剛剛合併形成的形狀居中對齊,減去頂層形狀

添加圖層樣式,得到設置圖標的基本形狀

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

步驟 02 製作齒輪內部

白色部分:新建160×160 px和100×100 px的圓形,減去頂層形狀,添加圖層樣式

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

紅色部分:新建140x140px和100x100px的圓形,減去頂層形狀,添加圖層樣式,最後加上文字就可以了

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

五、地圖圖標

步驟 01 製作基本形狀

創建190×190 px大小的圓形,140×140 px大小的矩形,將矩形旋轉45°

用錨點轉換工具和小白,將左右兩點調整至與圓相切,並且帶有下面兩條邊帶有弧度,像是從圓上延申過來的感覺

創建80x80px的圓形,將三個圖形合併形狀減去小圓,添加圖層樣式和文字裝飾

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

六、視頻圖標

步驟 01 製作外部結構

大圓:創建228×228 px大小的圓形,5個50×50 px的小圓,均勻分佈,減去頂層形狀,添加圖層樣式

小圓環:用60×60 px和50×50 px的圓做出5個圓環,將大圓的圖層樣式複製到小圓環上,關掉投影內陰影,放在5個小圓相對應的位置上。

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

步驟 02 製作扣狀結構

分別創建大小40x40px、34x34px、24x24px的圓形,命名【圓1】,【圓2】,【圓3】,添加圖層樣式

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

步驟 03 製作膠捲帶

創建220x220px大小,顏色#d4d4d4的圓,命名【底面】

創建大小150x150px的圓形,命名【膠捲帶】,複製一層隱藏備份

然後將源圖層轉化為智能對象,雙擊智能對象縮略圖進入智能對象後,添加上圖層樣式,再將源圖層轉化為智能對象

並添加智能濾鏡,Ctrl+s保存,回到圖標源文檔

CTRL+左鍵選中備份圓縮略圖得到選區,再選中膠捲帶層添加蒙版,加上投影

最後添加一些文字和裝飾物就完成啦,要注意調整圖層順序

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

七、信息圖標

步驟 01 製作信封

創建240x140px大小的矩形,下邊兩個角的圓角半徑為20px

刪除右上角的點,添加圖層樣式

複製一層,水平翻轉,底部的創建矩形旋轉45°即可完成

設計立體擬物風格APP圖標的PS實例教程

步驟 02 製作信

創建200x140px大小的矩形,添加圖層樣式

製作幾個148×6 px大小,顏色#ededed的矩形用來表示文本信息

設計立體擬物風格APP圖標的PS實例教程

八、天氣圖標

步驟 01 製作玻璃管

創建50x146px的矩形,頂部圓角半徑25px

100x100px的圓形;合併形狀,填充調整為0,添加圖層樣式

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

步驟 02 製作紅色液體

這一部分主要由管狀和球狀兩部分組成

設計立體擬物風格APP圖標的PS實例教程

液體管:創建一個42×100 px的矩形,添加圖中對應的圖層樣式

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

液體頂:創建一個42×8 px的橢圓;顏色#d13131,添加圖層樣式

設計立體擬物風格APP圖標的PS實例教程

液體頂-暗部:將液體管複製一層,顏色修改為#9e1717,添加蒙版將左側部分稍稍擦去,添加圖層樣式

設計立體擬物風格APP圖標的PS實例教程

液體球:創建一個90×90 px的圓形,添加圖層樣式(注意調整漸變的位置),之後添加蒙版,再上方擦出一個小口子,使它和【液體管】放在一起的時候看起來更自然

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

液體球-高光:CTRL+左鍵點擊【液體球】圖層縮略圖得到選區,新建空白圖層;用柔邊圓畫筆在選區左上角的位置輕輕拍一下,圖層模式改為疊加,不透明度和填充看情況適當調整。

液體球-投影:創建一個90x70px大小的橢圓,顏色#e83333,調整羽化值6.2,不透明度60%。

設計立體擬物風格APP圖標的PS實例教程

步驟 03 製作玻璃管高光部分

先製作左側部分,新建14×135 px大小的圓角矩形兩個,圓角半徑拉滿,顏色#ffffff

調整位置,布爾運算減去頂層形狀,添加蒙版,將邊緣部分擦得柔和一些

然後複製一層,水平翻轉,將不透明度調為75%,這樣就把右邊的也做好了

然後做一個小小的橢圓,調整一下不透明度和羽化值,最後把文字和刻度加上就製作完成了

設計立體擬物風格APP圖標的PS實例教程
設計立體擬物風格APP圖標的PS實例教程

結語

本期教程到這裡就結束了,希望大家在練習過程中多思考、理解制作思路和操作方法,活學活用。

免責聲明:本教程來源於網絡,禁止商業使用, 禁止個人使用,僅供學習交流使用 ,版權歸原作者所有, 若涉及版權問題,請及時聯繫刪除!!!(小編分享只為自己和大家學習所用!越努力,越幸運!本頭條號不承擔任何法律責任!)


分享到:


相關文章: