UI教程,設(shè)計(jì)一個(gè)日歷主題的UI圖標(biāo)(10)
寫實(shí)圖標(biāo)流行時(shí),這幾類效果很受歡迎(繩索、金屬環(huán)、紙邊撕裂等),今天這個(gè)教程把這些效果全收了,也是以前特別經(jīng)典的一個(gè)日歷圖標(biāo),雖然現(xiàn)在是扁平化時(shí)代,不過(guò)寫實(shí)圖標(biāo)這部分,新手最好掌握起來(lái)。把這個(gè)練完,絕對(duì)有不一樣的收獲!做完記得交作業(yè)。
1、觀察這個(gè)圖標(biāo)
我們將它分成三個(gè)部分來(lái)制作,如下圖所示。
①日歷的卷頁(yè) ②日歷的夾子和金屬環(huán) ③底座
2、開(kāi)始動(dòng)手新建一個(gè)700*800的畫布,如下圖所示:
3、日歷的卷頁(yè)
(1)新建一個(gè)圓角矩形作為日歷卷頁(yè)的最后一頁(yè)。如下圖所示:
(2)為圓角矩形添加圖層樣式。
內(nèi)發(fā)光、投影、漸變疊加。(內(nèi)發(fā)光是重中之重,它主要區(qū)分了每一頁(yè)日歷,是使日歷有層次敢最主要的效果!漸變疊加可添加也可以不添加,如果你想做的精細(xì)一些,可以自己嘗試調(diào)整各類數(shù)值。最后一頁(yè)的投影必須要有啦~)如下圖所示:
(數(shù)值自己嘗試一下哦~)
(3)向上復(fù)制“最后一頁(yè)”作為“中間頁(yè)”。調(diào)整“中間頁(yè)的位置”修改圖層樣式(修改一下投影,不需要那么大啦。┤缦聢D所示:
(4)向上復(fù)制多張“中間頁(yè)”圖層,調(diào)整位置(向上調(diào)整1~3個(gè)像素點(diǎn),移動(dòng)大小不要一樣,這樣會(huì)顯得比較真實(shí)。)合并復(fù)制的“中間頁(yè)圖層并作為”中間頁(yè)“的剪切蒙版。此時(shí)得到的效果是這樣的:
(5)制作完中間頁(yè)后,開(kāi)始制作第二頁(yè)。就是這個(gè)部分:
觀察”第二頁(yè)“上有”第一頁(yè)“的投影,所以,復(fù)制一層”中間頁(yè)“向上移動(dòng)并為其添加漸變疊加,同事向下做剪切蒙版。如下圖所示:
(漸變疊加是逐漸變亮的,控制好角度就可以啦。
(6)第二頁(yè)制作完成后,開(kāi)始制作第一頁(yè)。我將第一頁(yè)分為兩個(gè)部分制作。如下圖所示:
首先制作位于下方的”第一頁(yè)平頁(yè)“。向上復(fù)制”第二頁(yè)“,關(guān)閉”漸變疊加效果“,并作向下作為剪切蒙版。采用”直接選擇“工具點(diǎn)選出”第一頁(yè)平頁(yè)“的路徑,選擇”鋼筆——添加錨點(diǎn)工具“為”第一頁(yè)平頁(yè)“添加錨點(diǎn)。如下圖所示:
添加錨點(diǎn)后,使用”直接選擇工具,選中下圖四處錨點(diǎn),并刪除,得到效果如下圖所示:
(第一頁(yè)平頁(yè)制作完成)
接下來(lái)制作“第一頁(yè)卷頁(yè)”部分。
使用鋼筆工具,描出卷頁(yè)形狀,并填充路徑。并添加圖層樣式。如下圖所示。
得到的效果是這樣的:
(7)為第一頁(yè)添加日期,今天是30號(hào)。將“日期”置于“第一頁(yè)平頁(yè)”和“第一頁(yè)卷頁(yè)”之間,效果如下:
(8)第一頁(yè)制作完之后,制作撕掉頁(yè)。首先使用鋼筆工具勾出撕掉頁(yè)輪廓,然后填充路徑,并為其添加“投影”效果。(最好畫兩條不一樣的撕掉頁(yè),這樣比較真實(shí)。)如下圖所示:
到此,【①日歷的卷頁(yè)】部分制作完成,大概是這個(gè)樣子的:
4、日歷的夾子和金屬環(huán):
(1)日歷的夾子(就是紅色那個(gè)部分):首先新建一個(gè)稍稍大一丟丟(幾個(gè)像素就好啦)的圓角矩形置于最上層。就像這樣的。
新建一個(gè)矩形置于頂層,如下圖所示:
選擇圓角矩形(日歷紅色夾子)按住shift加選白色矩形,使用“直接選擇工具”鼠標(biāo)右鍵單擊,在菜單欄中選擇“減去頂層形狀”得到入下效果:
夾子的形狀制作完畢,接下來(lái)為其添加效果。為了使其更立體,需要添加‘斜面和浮雕“”內(nèi)陰影“”投影“然后添加一個(gè)顏色疊加變成紅色。(數(shù)值可以自己嘗試調(diào)節(jié)哦,每個(gè)效果都試試以后做其他的東西也會(huì)輕車熟路。)如下圖所示:
(此處可以適當(dāng)調(diào)整”撕掉頁(yè)“和”夾子“的位置。)
向上復(fù)制”紅色夾子“圖層,添加一個(gè)”漸變疊加“效果,并將透明度調(diào)小,給”紅色夾子“增加一些變化。如下圖所示:
(2)月份:首先輸入”September“然后為其添加圖層樣式。
(注意,因?yàn)槲淖质窍蛳掳枷莸乃?ldquo;方向”是“下”。)
效果如下:
(3)金屬環(huán)的制作:
新建一個(gè)圓角矩形。(很圓很圓。)就像下面這樣。
然后為了模擬金屬效果,我們?yōu)樗砑?ldquo;圖層樣式”。(這個(gè)地方最煩了,嘗試了很多次,你在制作的時(shí)候也要多去嘗試,并沒(méi)有統(tǒng)一的做法,也沒(méi)有統(tǒng)一的數(shù)值。多多動(dòng)手才是最好的,另,我做的可能并不科學(xué)。
得到的效果是這樣的:
制作反光:使用鋼筆工具描出反光的形狀,然后使用“濾鏡”——“模糊”——“高斯模糊”使反光真實(shí)一些。就像這樣:
高光制作:使用“橢圓工具,畫一個(gè)橢圓,然后”高斯模糊“,為其添加一個(gè)比較模糊比較大的光;再次用”橢圓“工具畫一個(gè)小一點(diǎn)的橢圓,”高斯模糊“(數(shù)值小一點(diǎn).)為其添加高光。就像這樣:
連接日歷的洞(我也不知道咋形容)制作:
畫一個(gè)圓,直徑稍稍大于金屬環(huán)的寬,為其添加顏色。是這樣的。
這樣,一個(gè)金屬環(huán)就做完了,給他們打個(gè)包,命名”金屬環(huán)“然后復(fù)制一下,放到另一面。然后給兩個(gè)金屬環(huán)添加一個(gè)”投影“效果是這樣的。請(qǐng)看:
到這,第二部分制作完成。
5、底座的制作:(1)新建一個(gè)大的圓角矩形(圓角大小自己調(diào)整一下)放在最下面。就像這樣:
然后為其添加圖層樣式,讓它立體一點(diǎn)(和制作夾子的時(shí)候差不多)。如下圖所示:
接下來(lái)找一張你喜歡的”皮子“比如這樣的:
把它放在底座上面,然后作為”剪切蒙版“,就像這樣:
如果你是一個(gè)十分野性的人,也可以這樣:
或者這樣的:
(這里的”混合模式“很有意思,可以自己試試,有許許多多不一樣的效果。)
(2)繩子的制作:
Ctrl+點(diǎn)擊”底座“圖層縮略圖,就是點(diǎn)這個(gè):
會(huì)出現(xiàn)這樣的效果(就是把底座選中了):
然后,”選擇“——”修改“——”收縮“,就像這樣:
選擇適當(dāng)?shù)臄?shù)值:
由圖層面板轉(zhuǎn)入路徑面板,像這樣:
單擊”從選區(qū)生成工作路徑“,像這樣:
選區(qū)畫筆工具,調(diào)一下大。愀杏X(jué)繩子應(yīng)該有多粗你就調(diào)多大),選擇鋼筆工具為路徑描個(gè)黑色的邊兒吧。如下圖:
因?yàn)槔K子縫入皮革是有擠壓的,所以,添加一個(gè)圖層樣式,增加一些真實(shí)感,這里為它添加一個(gè)斜面和浮雕,像這樣:
到這步,制作完成了繩子的擠壓效果,下面來(lái)制作繩子:
新建一個(gè)20X80的畫布。然后在畫布上新建一個(gè)圓角矩形,大概是這樣的:
將它定義為筆刷,起一個(gè)好聽(tīng)的名字,方便查找。像這樣:
下面,調(diào)整一下筆刷設(shè)置,快捷鍵為F5,需要調(diào)整的地方如下:
(一定要調(diào)整間距!可以根據(jù)自己的喜好,感覺(jué)是怎么縫的就怎么調(diào)。)
(一定要選擇”方向“,不選擇就慘嘍,制作的時(shí)候可以試一下不勾選”反向“的效果,更容易理解)。
筆刷制作好之后,我們可以回到原來(lái)的操作界面繼續(xù)制作我們的繩子啦!再次選擇之前的路徑,然后鋼筆描邊。效果如下:
為了使繩子寫實(shí)一點(diǎn),我們?yōu)樗砑訄D層樣式:
此時(shí)的效果如下:
感覺(jué)像塑料,不是很真,繩子應(yīng)該是一股一股扭在一起的,所以,接下來(lái)制作繩子的紋理。
新建一個(gè)畫布。新建一層圖層添加白色。執(zhí)行”濾鏡“——”濾鏡庫(kù)“——”半調(diào)圖案“得到如下效果。
將此圖層旋轉(zhuǎn)45°,裁剪一下。如下圖所示:
執(zhí)行”編輯“——”定義圖案“并且起一個(gè)自己記得住的名字,如下圖所示:
到這,繩子的紋理也完成啦。我們回去給繩子添加”圖案疊加“,看一下效果。
現(xiàn)在看一下效果,大概是這樣:
6、地板背景
找一張地板圖嘍,我找的是這張。
把它放在背景圖層上面,就可以啦!
我們來(lái)看看:
就是這樣。
差不多就是這樣,還有很多東西可以加上去(比如各種光啊,可以做的更好看一些!制作的時(shí)候可以多多嘗試,實(shí)踐真的很重要。。這個(gè)圖標(biāo)做的不是很精細(xì),請(qǐng)見(jiàn)諒。至于這個(gè)教程,可能并不是很正確,有錯(cuò)誤之處歡迎指出,有更好的方法實(shí)現(xiàn)效果也希望共同討論。謝謝,謝謝,謝謝!
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- ps網(wǎng)頁(yè)設(shè)計(jì)
- UI圖標(biāo)
- UI教程
- 日歷設(shè)計(jì)
- 日歷圖標(biāo)
學(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設(shè)計(jì)盒子圖標(biāo)
- UI知識(shí),設(shè)計(jì)師必須知道的優(yōu)秀UI設(shè)計(jì)原則
- PS繪制磚塊ICO圖標(biāo)
- 地圖圖標(biāo),設(shè)計(jì)簡(jiǎn)潔的地圖主題UI圖標(biāo)教程
- UI教程:設(shè)計(jì)電池icon
- ps日歷圖標(biāo)
- UI知識(shí),做UI的工作方式與流程
- 相機(jī)UI圖標(biāo)設(shè)計(jì)教程
- UI視頻, 設(shè)計(jì)中得美術(shù)基礎(chǔ)
- ps設(shè)計(jì)折紙效果風(fēng)格的短信軟件圖標(biāo)