Photoshop設(shè)計(jì)網(wǎng)站頭部導(dǎo)航效果
2013/4/2 15:17:39來(lái)源:思緣論壇
第一步建立新文件,設(shè)置如下圖
下一步設(shè)置前景色為#e6e0d5,背景色為#cec5af
制作頂部區(qū)域,確保之前設(shè)置的顏色正確,然后使用“濾鏡>渲染>云彩”!
開(kāi)始設(shè)計(jì)導(dǎo)航按鈕,新建圖層,使用矩形工具,制作如下圖形
再次新建圖層,制作#ac2a2a顏色矩形
再用單行選區(qū)工具制作按鈕鼠標(biāo)移動(dòng)上后的黃色滑桿
為滑桿添加漸變樣式
新建圖層,使用橢圓選區(qū)工具,羽化設(shè)置20px,這樣之后填充的黑色將會(huì)出現(xiàn)羽化的效果
為之前的橢圓選區(qū)填充黑色,然后設(shè)置圖層為"正片疊底",使用矩形選區(qū)工具刪除右邊區(qū)域,這樣看上去紅色的導(dǎo)航條上就出現(xiàn)了陰影分割效果
復(fù)制之前做的橢圓陰影
制作RSS破損紙張效果,制作2個(gè)圖層,用選區(qū)勾畫出紙張的輪廓,一個(gè)大的為白色,小的紅色,如果覺(jué)得效果過(guò)于平滑,可以使用濾鏡來(lái)讓其看上去更自然
為白色的輪廓添加內(nèi)陰影樣式
完成后的效果圖
現(xiàn)在進(jìn)行最后的修飾,使用單行選區(qū)工具
填充顏色#e6e0d5
復(fù)制圖層,并將它移動(dòng)到如下箭頭位置,設(shè)置不透明度為20%
最后將LOGO標(biāo)志放入,一個(gè)完整的網(wǎng)站頭部導(dǎo)航設(shè)計(jì)就完成了
[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/ps1465.html
本文地址:http://m.likemindfilms.com/tutorial/ps1465.html
這些是最新的
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏
最熱門的教程