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

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

軟件下載吧

當(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)

主站蜘蛛池模板: 国产爽爽视频 | 成年人免费在线观看网站 | a级毛片免费观看网站 | 国产精品香蕉一区二区三区 | 亚洲a级片 | 日韩经典中文字幕 | 国内自拍第一页 | 亚洲日本在线观看 | 国产精品久久久久久久毛片 | 手机在线观看毛片 | 99九九99九九九视频精品 | 免费人成在线观看网站品爱网 | 欧美精品综合一区二区三区 | 欧美亚洲一区 | 99久久伊人一区二区yy5o99 | 亚洲黄色美女视频 | www.亚洲日本| 日韩在线视频中文字幕 | 中文字幕日韩一区二区不卡 | 久草热久草在线 | 久久99精品久久久久久国产越南 | 国产成人在线免费观看 | 在线视免费频观看韩国aaa | 国产精品亚洲天堂 | 欧美日韩高清 | 欧美一区二区三区久久久人妖 | 亚洲欧美卡通动漫丝袜美腿 | 亚洲欧美另类在线视频 | 在线视频免费观看a毛片 | 国产成人高清 | 国产成人小视频 | 成人女人a毛片在线看 | 玖玖精品在线视频 | 国产日韩久久久久69影院 | 亚洲视频在线观看网站 | 久久免费久久 | 色香欲综合成人免费视频 | 久久免费精品视频 | 午夜无遮挡怕怕怕免费视频 | 国产一区二区在免费观看 | 久操免费在线视频 |