ps設(shè)計(jì)網(wǎng)頁登錄界面實(shí)例
最后為背景增添漸變疊加(gradient overlay)的效果。顏色的漸變范圍在白色(white)到非常淺的灰色(#f1f1f1)之間。我們希望漸變疊加的效果看起來非常精細(xì),不著痕跡,因此,不透明度應(yīng)保持在60%到65%之間。
步驟5

登陸界面的背景效果處理完畢,不過還需完善一下,添加1px的細(xì)線可以使整個背景看起來不會太過空洞。細(xì)線的顏色與此前的應(yīng),除了灰色的細(xì)線,1px的白色細(xì)線剛好放在灰色線之下。
步驟6

在登錄背景的左上角寫上”Login Form”的字樣。寫不寫文字對PS布局并無大礙,倒是在實(shí)際的網(wǎng)站中更為重要。文字采用深灰色,與背景色形成反差,突出強(qiáng)調(diào)效果。
步驟7

使用圓角矩形工具(U)創(chuàng)建兩個白色形狀,作為用戶名和密碼的輸入框。為這兩個形狀應(yīng)用描邊樣式,大小1px,顏色為#dbdada,在用戶名的輸入框中隨便寫一個電郵名,在密碼輸入欄中輸入星標(biāo)(*)。文字字體采用Droid Sans,可在Google Fonts找到。
步驟8

在兩個輸入框中添加上小圖標(biāo),提升用戶友好度,方便用戶找到對應(yīng)的輸入?yún)^(qū)。
步驟9

使用圓角矩形工具(U)創(chuàng)建兩個10×10像素的形狀,接下來為他們描邊,顏色為#dbdada。使用自定義形狀工具(U),從中選擇“打鉤”的圖案放入形狀的中央。
步驟10

標(biāo)簽(TAG) 網(wǎng)頁圖片 Photoshop 設(shè)計(jì) 界面設(shè)計(jì) 登陸界面 登錄界面




























