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

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

軟件下載吧

當(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爰片久久毛片人呢 | 国产精品国产三级国产an | 中文字幕在线网址 | 国产精品99久久99久久久看片 | 无国产精品白浆是免费 | 性刺激免费视频观看在线观看 | 欧美一区二区三区不卡免费 | 七七国产福利在线二区 | 国产乱子伦真实china | 欧美激情国产一区在线不卡 | 亚洲欧美在线不卡 | 亚洲欧美日韩久久精品第一区 | 在线看片a | 国产成人在线视频 | 国产精品男人的天堂 | 不卡午夜视频 | 久久国产午夜精品理论片34页 | 国产精选91热在线观看 | 男女做性免费视频软件 | 欧美手机手机在线视频一区 | 久久久久久久性高清毛片 | 国产精品久久久久久久久福利 | 亚洲女视频 | 欧美一级精品高清在线观看 | 91一区二区在线观看精品 | 成人a一级毛片免费看 | 亚洲精品日韩专区在线观看 | 成人毛片全部免费观看 | 亚洲欧美日本人成在线观看 | 免费一级毛片私人影院a行 免费一级毛片无毒不卡 | 国产在线一区二区三区四区 | 日韩不卡一级毛片免费 | 黄色毛片视频网站 | 亚州视频在线 | 视频一区二区三区在线 | 亚洲国产精品区 | 国产高清在线不卡 | 日韩欧美国产精品第一页不卡 | 日韩一级欧美一级毛片在线 | 中文字幕免费视频 |