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

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

軟件下載吧

當(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久久精品国产 | 97视频在线免费播放 | 中文字幕 亚洲 一区二区三区 | 久久99久久精品视频 | 亚洲精品综合欧美一区二区三区 | 成人国产精品免费网站 | 碰碰碰人人澡人人爱摸 | 爆操巨乳美女 | 精品久久久久久久久中文字幕 | 国产视频二 | 午夜欧美成人香蕉剧场 | 成人自拍小视频 | 欧美成人第一页 | 免费日本视频 | a级片在线| 免费看日韩欧美一级毛片 | 又摸又揉又黄又爽的视频 | 国产在线黄 | 国内真实愉拍系列情侣 | 日本aaaaa毛片动漫 | 亚洲欧洲无码一区二区三区 | 特级淫片日本高清视频 | 亚洲特级黄色片 | 久久精品国产99国产精品免费看 | 毛片免费看网站 | 三级网站大全 | 99久久精品国产免看国产一区 | 成人一级黄色片 | 久久久久久久国产免费看 | 巨乳女上司 | 手机看片自拍自自拍日韩免费 | 国产精品一区二区手机在线观看 |