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

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

軟件下載吧

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

主站蜘蛛池模板: 日本欧美做爰全免费的视频 | 国产成人免费高清视频 | 美女视频免费永久观看的 | 欧美成人手机视频免费播放 | 日本成人免费在线观看 | 日韩在线一区二区三区免费视频 | 国产一级特黄全黄毛片 | 日韩毛片免费线上观看 | 成年女人毛片免费观看中文w | 天天看a| 国产精品一区二区国产 | 欧美 日韩 国产 在线 | 国产一区二区三区不卡在线观看 | 亚洲国产成人最新精品资源 | 亚洲天堂区 | 亚洲人成综合在线播放 | 国产日韩欧美一区二区三区综合 | 美国特级毛片 | 男人天堂网在线视频 | 香港毛片免费观看 | 久草在线观看福利 | 国产精品久久久久影院色老大 | 日本一区二区三区高清在线观看 | 一区二区三区免费视频网站 | 毛片在线免费观看网站 | 久久国产精彩视频 | 中文精品99久久国产 | 日本肥老妇色xxxxx日本老妇 | 日本一线一区二区三区免费视频 | 一级视频在线播放 | 一级黄色毛片免费看 | 国产乱码精品一区二区三上 | 日本一级级特黄特色大片 | 日本九六视频 | 成人久久在线 | 日本精品久久 | 一级在线视频 | 国产精品91在线 | 精品免费久久 | 俄罗斯黄色毛片 | 特级a毛片 |