當前位置:首頁>ps實例教程>ps網(wǎng)頁設計>UI設計教程>教程內(nèi)容

風扇圖標,設計擬物風扇主題UI圖標教程

來源:微博 作者:楊洋-XHM 學習:14052人次

本篇教程主要分享一款風扇主題的UI圖標設計方法,教程比較詳細,想學習風扇圖標設計的同學趕緊學習分享吧。

先看看效果圖:

風扇圖標,設計擬物風扇主題UI圖標教程_m.tgudhdp.cn
<點圖片看大圖>m.tgudhdp.cn

練習重點:

這次練習主要練習光影、顏色對形體、空間的塑造,對這塊運用不熟練的小伙伴,值得動手練習一下。

整個教程分為【背景】【機身】【扇葉】【扇框內(nèi)投影】【光-顏色】五個部分,每個部分在完成以后都進行了編組,所以你們要注意圖層分組。

我們首先從背景層開始。

步驟一:

打開你的Adobe Photoshop,創(chuàng)建一個新文檔。

寬度:400 px高度:300 px分辨率:72 px

制作擬物圖標背景:

溫馨提示:這主要是用漸變工具(G),整體扯出差不多的效果過就可以啦。

底層漸變:徑向 - #ededed~#b1adaa近景亮色:線性 - #e1e0df~#b1adaa

風扇圖標,設計擬物風扇主題UI圖標教程_m.tgudhdp.cn
<點圖片看大圖>

步驟二:

制作【風扇機身】:

溫馨提示:用圓角矩形工具(U),該圖層命名為【風扇機身】,顏色填充#e2e1e0。

寬度:180 px高度:180 px半徑:8 px

賦予【風扇機身】光感,制造體積感:

風扇圖標,設計擬物風扇主題UI圖標教程_m.tgudhdp.cn
<點圖片看大圖>

溫馨提示:用圖層樣式時,盡量都【不要使用全局光】,因為使用后,在添加相同樣式,制作不同角度的效果時,會有影響。

圖層樣式:內(nèi)陰影 模式:濾色 顏色:#b4785a 不透明度:75% 角度:90° 距離:5px 大。5px圖層樣式:內(nèi)陰影 模式:正片疊底 顏色:#8f8696 不透明度:76% 角度:-52° 距離:4px 大。5px圖層樣式:漸變疊加 模式:正常 樣式:線性 顏色:#b4b6bb ~ #f2eee9 角度:103°圖層樣式:投影 模式:正片疊底 顏色:#22272a 不透明度:20% 角度:90° 距離:2px 大。2px

風扇圖標,設計擬物風扇主題UI圖標教程_m.tgudhdp.cn
<點圖片看大圖>

步驟三:

制作電扇【圓形扇框】:

溫馨提示:用 橢圓工具 (U),該圖層命名為【圓形扇框】,顏色填充#e2e1e0。

寬度:138 px高度:138 px

賦予【圓形扇框】光感,制造體積感:

風扇圖標,設計擬物風扇主題UI圖標教程_m.tgudhdp.cn
<點圖片看大圖>

溫馨提示:用圖層樣式時,盡量都【不要使用全局光】,因為使用后,在添加相同樣式,制作不同角度的效果時,會有影響。

圖層樣式:描邊 大。2px 位置:外部 填充類型:漸變 顏色:#757e8a ~ #ccd4dc 角度:-68°圖層樣式:內(nèi)陰影 模式:正片疊底 顏色:#5e6f84 不透明度:75% 角度:90° 距離:1px 大小:12px圖層樣式:漸變疊加 模式:正常 樣式:徑向 顏色:#636363 ~ #bdccdb 角度:90° 縮放:127%

風扇圖標,設計擬物風扇主題UI圖標教程_m.tgudhdp.cn
<點圖片看大圖>

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
Elyvan2020-05-06 08:39
我的作業(yè):

來看看原因2019-12-26 03:18
煒彤 發(fā)表于 2019-12-26 14:43
請問這一步扇格部分是怎么做的?
畫圓形路徑,描邊,然后做選區(qū)擦掉那幾個缺口
煒彤2019-12-26 02:43
請問這一步扇格部分是怎么做的?

張德帥2017-08-30 06:00
‘’
張德帥2017-08-30 06:00
‘’
張德帥2017-08-30 06:00
‘’
張德帥2017-08-30 05:59
‘’
張德帥2017-08-30 05:59
‘’
張德帥2017-08-30 05:59
‘’
張德帥2017-08-30 05:59
‘ ’
你de笑讓莪心跳2016-12-30 05:49
新人交作業(yè)
你de笑讓莪心跳2016-12-30 05:12
新人交作業(yè)
寒雨2016-11-30 02:26
寒雨2016-11-30 02:11
photoshop2016-11-20 07:55
漂亮

關注大神微博加入>>

網(wǎng)友求助,請回答!