UI教程,ps設(shè)計(jì)西服主題圖標(biāo)實(shí)例(7)
教程介紹如何設(shè)計(jì)一枚西裝主題風(fēng)格的UI圖標(biāo),效果雅致有型,操作細(xì)致,特別提及了很多提高效率的快捷鍵,很適合練手
最終效果:
新建畫布,大小自定。
畫一個(gè)圓角矩形,大小自定。
Alt +V+E建立參考線
雙擊圓角矩形圖層 調(diào)出圖層樣式,漸變疊加,調(diào)一個(gè)灰到黑的漸變。
添加投影。設(shè)置看圖:
內(nèi)陰影:
Ctrl+J 復(fù)制圓角矩形:
右鍵清除圖層樣式(不是拷貝的圓角矩形那個(gè)圖層)
填充調(diào)為零。
調(diào)出圖層樣式,添加投影,把圖層挖空那個(gè)選項(xiàng)勾掉(我把拷貝的圓角矩形眼睛關(guān)閉了)
再把拷貝圓角矩形的圖層眼睛打開,鼠標(biāo)選中填充調(diào)為零的那個(gè)圖層。
按住Ctrl在按兩次 ↓ 鍵按2—3下 往下移動(dòng)兩到三個(gè)像素,作為陰影效果。如圖。
拉一個(gè)較細(xì)的橢圓。
按P 轉(zhuǎn)換點(diǎn)工具。
點(diǎn)擊橢圓下面的錨點(diǎn)就會(huì)變尖了。
添加錨點(diǎn),調(diào)節(jié)下橢圓,讓它看起來(lái)有點(diǎn)弧度。
調(diào)節(jié)后的效果。
右鍵創(chuàng)建剪輯蒙版,或者Ctrl+Shift+Alt+G,再或者按住alt在兩個(gè)圖層中間點(diǎn)擊下,把調(diào)節(jié)的橢圓剪進(jìn)圓角矩形。
這一步 可能有人要問(wèn)了,為什么剪進(jìn)去 橢圓不見了?別急,雙擊圓角矩形調(diào)處圖層樣式?磮D設(shè)置,橢圓就會(huì)出現(xiàn)。
多邊形工具,畫個(gè)三角形,填充肉色。
剪輯蒙版。
用鋼筆工具順著三角形的邊,勾個(gè)領(lǐng)子出來(lái)。
勾好后Ctrl+J復(fù)制一個(gè),放到另一邊Ctrl+T,右鍵水平反轉(zhuǎn),放到合適位置。
順著橢圓弧度,再用鋼筆勾個(gè)外套的大領(lǐng)子,填充黑色。
復(fù)制,反轉(zhuǎn) 放到合適位置。
好了 ,接下來(lái)就來(lái)做領(lǐng)帶了。
矩形畫個(gè)正方形,Ctrl+T在上面數(shù)值輸入旋轉(zhuǎn)45°。
放到合適位置。
按住Alt復(fù)制一個(gè)下來(lái)。
直接選擇工具 。
按住左鍵,用虛線選中下面那個(gè)錨點(diǎn),之后松手。
接著按住左鍵,點(diǎn)擊下面那個(gè)錨點(diǎn),按住Shift 一直往下拉。
如果你覺得領(lǐng)帶有點(diǎn)寬的話,Ctrl+t 讓它變瘦點(diǎn)。
接下來(lái)加花紋。
矩形工具,畫一個(gè)寬2 px長(zhǎng)若干 px的一條直線,填充深紅色。
Ctrl+T 放在這個(gè)位置。
Ctrl+J 復(fù)制花紋圖層。
選中拷貝花紋圖層,Ctrl+T 如下圖。
先點(diǎn)擊那個(gè)小三角形,然后再y 軸輸入-10,-10是距離,如果覺得間距太小,數(shù)字可以自由改。
數(shù)字輸完后,敲回車兩下,同時(shí)鼠標(biāo)還是在花紋拷貝圖層上,同時(shí)按住Ctrl+Shift+Alt+T連續(xù)復(fù)制,效果如圖所示:
找到領(lǐng)帶這兩個(gè)圖層,Ctrl+E 合并,成為一個(gè)圖層。
再把所有復(fù)制的花紋圖層也合并成一個(gè)圖層,花紋圖層置于領(lǐng)帶圖層上面,創(chuàng)建剪輯蒙版,效果如下圖。
再給領(lǐng)帶圖層創(chuàng)建剪輯蒙版,把多余的剪進(jìn)去。
找到箭頭標(biāo)注的這個(gè)圖層,添加圖層樣式,漸變疊加,陰影,數(shù)值如下圖:
右鍵拷貝這個(gè)領(lǐng)子的圖層樣式,再右鍵粘貼到對(duì)面的領(lǐng)子上。
接著給西裝領(lǐng)子圖層添加圖層樣式。
重復(fù)剛剛的,復(fù)制圖層樣式,再粘貼到對(duì)面。
最終給領(lǐng)帶圖層添加圖層樣式,斜面浮雕,外發(fā)光,使領(lǐng)帶立體感更強(qiáng)。
如果你是一名追求完美的同學(xué),最后可以給領(lǐng)帶做一個(gè)領(lǐng)帶夾,用矩形畫一個(gè)長(zhǎng)條,添加一像素白色的內(nèi)陰影。
學(xué)習(xí) · 提示
相關(guān)教程
- UI圖標(biāo)教程,用PS繪制一個(gè)獨(dú)特的漸變風(fēng)格播放器圖標(biāo)
- UI圖標(biāo)教程,用PS制作一個(gè)音樂(lè)圖標(biāo)
- 圖標(biāo)設(shè)計(jì),用PS繪制索尼PSP圖標(biāo)
- UI圖標(biāo)教程,在PS中繪制一枚炫酷的鐘表圖標(biāo)
- UI圖標(biāo)教程,用ps制作浪漫的冰晶圖標(biāo)
- 圖標(biāo)制作,用PS繪制一款簡(jiǎn)約風(fēng)格的解密游戲圖標(biāo)
- 插畫制作,用PS繪制簡(jiǎn)約沙漏插畫效果圖片
- 圖案設(shè)計(jì),用PS快速制作一個(gè)心形圖案
- 手機(jī)圖標(biāo),用PS繪制華為手機(jī)圖標(biāo)
- 相機(jī)圖標(biāo),用UI制作簡(jiǎn)單的彩虹相機(jī)圖標(biāo)
推薦教程
- ps日歷圖標(biāo)
- PS繪制磚塊ICO圖標(biāo)
- ps設(shè)計(jì)盒子圖標(biāo)
- 相機(jī)UI圖標(biāo)設(shè)計(jì)教程
- UI教程:設(shè)計(jì)電池icon
- UI知識(shí),設(shè)計(jì)師必須知道的優(yōu)秀UI設(shè)計(jì)原則
- 地圖圖標(biāo),設(shè)計(jì)簡(jiǎn)潔的地圖主題UI圖標(biāo)教程
- ps設(shè)計(jì)折紙效果風(fēng)格的短信軟件圖標(biāo)
- UI知識(shí),做UI的工作方式與流程
- UI視頻, 設(shè)計(jì)中得美術(shù)基礎(chǔ)