日韩小视频-日韩久久一区二区三区-日韩久久一级毛片-日韩久久久精品中文字幕-国产精品亚洲精品影院-国产精品亚洲欧美云霸高清

下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當(dāng)前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > ps設(shè)計(jì)網(wǎng)頁(yè)登錄界面實(shí)例

ps設(shè)計(jì)網(wǎng)頁(yè)登錄界面實(shí)例

時(shí)間:2024-03-02 18:45作者:下載吧人氣:18

本教程旨在教大家使用Photoshop創(chuàng)建一個(gè)簡(jiǎn)單的登錄界面。只需一些簡(jiǎn)單技巧,你也可以設(shè)計(jì)出一個(gè)漂亮的登錄界面。界面的背景色使用了幾種不同的灰色色系,此舉可最大程度保持整個(gè)界面的簡(jiǎn)潔和優(yōu)雅。

本教程簡(jiǎn)單易學(xué),適合于初學(xué)者。

ps設(shè)計(jì)網(wǎng)頁(yè)登錄界面實(shí)例

登錄界面

步驟1

ps設(shè)計(jì)網(wǎng)頁(yè)登錄界面實(shí)例

新建一個(gè)800(H)x600(W)像素的文檔。當(dāng)然也可根據(jù)自己的需求新建。接下來(lái),使用圓角矩形工具(U)建立一個(gè)320×210像素的圓角矩形,并用淺灰色(light gray)填充,以此作為整個(gè)登錄界面的背景。

步驟2

ps設(shè)計(jì)網(wǎng)頁(yè)登錄界面實(shí)例

為登陸界面背景添加深灰色(#dbdada)投影,參數(shù)如下:

投影(Drop shadow): 距離(distance):1px,大小(size):1px,混合模式(blend mode)設(shè)為“正片疊底”(Multiply),不透明度(opacity)設(shè)為50%

步驟3

ps設(shè)計(jì)網(wǎng)頁(yè)登錄界面實(shí)例

為背景應(yīng)用大小為1px的描邊(stroke),描邊的顏色與投影的顏色一致,即#dbdada。

步驟4

ps設(shè)計(jì)網(wǎng)頁(yè)登錄界面實(shí)例

最后為背景增添漸變疊加(gradient overlay)的效果。顏色的漸變范圍在白色(white)到非常淺的灰色(#f1f1f1)之間。我們希望漸變疊加的效果看起來(lái)非常精細(xì),不著痕跡,因此,不透明度應(yīng)保持在60%到65%之間。

步驟5

ps設(shè)計(jì)網(wǎng)頁(yè)登錄界面實(shí)例

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

步驟6

ps設(shè)計(jì)網(wǎng)頁(yè)登錄界面實(shí)例

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

步驟7

ps設(shè)計(jì)網(wǎng)頁(yè)登錄界面實(shí)例

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

步驟8

ps設(shè)計(jì)網(wǎng)頁(yè)登錄界面實(shí)例

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

步驟9

ps設(shè)計(jì)網(wǎng)頁(yè)登錄界面實(shí)例

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

步驟10

ps設(shè)計(jì)網(wǎng)頁(yè)登錄界面實(shí)例

制作登錄按鈕,使用圓角矩形工具創(chuàng)建110 x 35像素的形狀,并用顏色#6d6d6d填充。為登錄按鈕添加白色投影,并將混合模式由“正片疊加”改為“正常”。

步驟11

ps設(shè)計(jì)網(wǎng)頁(yè)登錄界面實(shí)例

給按鈕添加內(nèi)陰影(inner shadow),大小和阻塞(choke)都設(shè)為0,距離設(shè)為3像素,不透明度:30%,混合模式:疊加(overlay)。

步驟12

ps設(shè)計(jì)網(wǎng)頁(yè)登錄界面實(shí)例

最后給按鈕添加顏色為#595656,大小為1像素的邊線。

最終效果

ps設(shè)計(jì)網(wǎng)頁(yè)登錄界面實(shí)例

標(biāo)簽登錄,界面,優(yōu)雅,簡(jiǎn)潔,設(shè)計(jì),Photoshop

相關(guān)下載

查看所有評(píng)論+

網(wǎng)友評(píng)論

網(wǎng)友
您的評(píng)論需要經(jīng)過(guò)審核才能顯示

熱門閱覽

最新排行

公眾號(hào)

主站蜘蛛池模板: 日韩一品在线播放视频一品免费 | 99爱免费视频 | 美女黄色影院 | 欧美美女视频网站 | 一 级做人爱全视频在线看 一本不卡 | 免费在线观看一区二区 | 黄色欧美网站 | 毛片免费看看 | 久草在线观看首页 | 日韩一区二区精品久久高清 | 日本三本道 | 久久99亚洲精品一区二区 | 亚洲精品国产一区二区三 | 精品在线看 | 波多野结衣在线观看高清免费资源 | 亚洲欧美在线观看播放 | 久久免费精彩视频 | 特黄a大片免费视频 | 久久精品国产线看观看亚洲 | 高清欧美一级在线观看 | 八戒午夜精品视频在线观看 | 香蕉tv亚洲专区在线观看 | 亚洲精品在线看 | 亚洲国产欧美91 | 男女性男女刺激大片免费观看 | 一级特黄aa大片欧美网站 | 91香蕉国产线观看免 | 国产亚洲欧美一区二区 | 成人毛片免费观看视频大全 | 视频一区在线免费观看 | 亚洲精品国产男人的天堂 | 日本高清视频免费在线观看 | 国产一级精品视频 | 国产精品va一级二级三级 | 香港三级88久久经典 | 欧美成免费 | 日产国产精品久久久久久 | 免费观看的毛片手机视频 | 多人伦精品一区二区三区视频 | 在线观看中文字幕一区 | 男操女视频网站 |