關(guān)于教程
本次臨摹的設(shè)計(jì)作品,光影原理非常簡(jiǎn)單,適合初學(xué)者學(xué)習(xí)。光影從上到下,上方亮下方暗。底座要用到漸變和投影,S字母對(duì)話框部分要制作高光,營(yíng)造質(zhì)感。
教程步驟
新建畫(huà)布 900×600px 72ppi,填充背景色#f9f9f9,在畫(huà)布上繪制一個(gè)圓角矩形,大小225×160px,圓角20px。居中于整個(gè)畫(huà)布,并命名為【底座】。在矩形圖層上添加圖層樣式。添加漸變營(yíng)造光感。
添加描邊。因?yàn)楣饩€的方向,描邊顏色為漸變。上淺下深。
添加投影,突出層次感。投影疊加3層,增加真實(shí)感。投影顏色不變#595959。第一層投影距離和大小數(shù)值較小,第二層和第三層投影距離和大小數(shù)值逐漸加大。
可以適當(dāng)?shù)恼{(diào)整等高線。調(diào)整投影間的過(guò)渡關(guān)系。
給底座添加反光。Ctrl+J復(fù)制【底座】,并將復(fù)制的圖層命名為【反光】,刪除圖層樣式。
去掉填充色,設(shè)置描邊色為#ffffff。給反光層添加圖層蒙版。用柔邊畫(huà)筆擦去下半部分。
繪制一個(gè)圓角矩形,命名為【小按鍵】大小29×31px,圓角6px。矩形填充顏色為#ebedef,描邊色為#7a7a7a。描邊為1px。并添加投影。投影顏色為#595959。
多復(fù)制幾個(gè)【小按鍵】放在合適的位置。中間的長(zhǎng)圓角矩形大小為102×31px。圓角為6px。
繪制一個(gè)圓角矩形,并命名為【對(duì)話框】。大小150×114px,圓角20px。并添加圖層樣式漸變及描邊對(duì)話框有三層顏色,故添加內(nèi)外兩層描邊。
通過(guò)修改錨點(diǎn),做出對(duì)話框的形狀。
復(fù)制【對(duì)話框】圖層,命名為【描邊】,放在【對(duì)話框】圖層的下方。柵格化【描邊】圖層及其圖層樣式后,再添加圖層樣式。
從原圖可以看出,對(duì)話框與底座間是有陰影的。我們可以通過(guò)羽化來(lái)實(shí)現(xiàn)。在【描邊】圖層下方新建圖層,命名為【對(duì)話框投影】,選擇橢圓選框工具,設(shè)定羽化值為30px。
框出投影的大概范圍并填充較深的藍(lán)色。填充顏色后可以適當(dāng)?shù)母淖兤浯笮『屯该鞫?,也可以多?fù)制幾層。使投影更加真實(shí)。
繪制圓角矩形,命名為【高光】,色值#ffffff,大小129×39px, 圓角12px。添加圖層蒙版,選中蒙版,使用漸變工具,按住shift鍵,使高光顏色過(guò)渡均勻。
將【高光】復(fù)制一層。命名為【質(zhì)感】,先將蒙版部分填充為白色,右鍵轉(zhuǎn)換該圖層為智能對(duì)象,選擇濾鏡-模糊-高斯模糊。并添加圖層蒙版,使過(guò)渡均勻。
最后選一個(gè)喜歡的字體,打上字母S。
最終效果圖
1華信智原名師大講堂2323期:如何快速入門(mén)前后端分離項(xiàng)目開(kāi)發(fā)
2華信智原名師大講堂2318期:多線程高級(jí)知識(shí)
3【教學(xué)測(cè)評(píng)】華信智原三輪模擬面試,究竟有什么獨(dú)到之處?
5華信智原名師大講堂2317期:小白也能學(xué)會(huì)的剪輯技巧
6【大賽風(fēng)采】華信智原設(shè)計(jì)大賽圓滿落幕
1【人才共建】華信智原與世紀(jì)恒通科技股份有限公司達(dá)成人才共建戰(zhàn)略
2【開(kāi)班典禮】從這一刻出發(fā),為夢(mèng)想助力前行!
3【總監(jiān)進(jìn)課堂】大咖教你試用期如何簽合同?
4華信智原與阿里云南區(qū)運(yùn)營(yíng)商簽署合作
5華信智原UI2212班職業(yè)化面試答辯圓滿結(jié)束