編者按：今天 @P大點(diǎn)S微博 ?給同學(xué)們來一發(fā)登陸界面教程，不難，技巧點(diǎn)都集中在圖層樣式的運(yùn)用，操作非常細(xì)致，零基礎(chǔ)也可以學(xué)會(huì)，附上源文件供參考，來收！

零基礎(chǔ)的人也可以學(xué)會(huì)的PS技巧： 《有哪些看上去很高大上，但實(shí)際很簡單的PS技巧？》

源文件打包 ?百度云下載： http://pan.baidu.com/s/1eQi9u18

1、新建一個(gè)文檔，這里我用的是400*300像素，填充一個(gè)#d0c0be的顏色填充調(diào)整層。

2、選擇畫筆工具，使用圓角柔邊畫筆，設(shè)置前景色為#364e35，畫出如下圖中的形狀出來。

3、執(zhí)行“濾鏡—模糊—高斯模糊”，我用的數(shù)值是46.9像素，賦予這個(gè)顏色層一個(gè)模糊效果，跟我們的背景融合。

4、選擇圓角矩形工具，并設(shè)置前景色為#313c45，畫一個(gè)圓角矩形，并將圓角矩形的填充設(shè)置為11%

5、為這個(gè)圓角矩形添加一個(gè)圖層樣式。這里，我添加了描邊、內(nèi)陰影以及投影。

6、下面，復(fù)制一層這個(gè)圓角矩形，按照構(gòu)思， 我們將用第一個(gè)圓角矩形來當(dāng)作輸入用戶名 的框框，復(fù)制來的這一個(gè)圓角矩形，我們下 移一定的像素，用來當(dāng)作輸入密碼的框框。

7、接下來，我們繼續(xù)復(fù)制一層這個(gè)圓角矩形， 依舊下移一定的像素，用來當(dāng)作確定的框框。右鍵清除掉圖層樣式，并將形狀填充顏色更改為#749e5e，添加一個(gè)圖層樣式。

8、添加文本，會(huì)員登陸，文本顏色設(shè)置為白色#ffffff，并為其添加一個(gè)圖層樣式，這里我添加了描邊以及投影。

9、添加最底下那個(gè)綠色框中的文本：確定。設(shè)置確定兩字的顏色為白色，并添加一個(gè)圖層樣式，這里我用了描邊和投影。

10、下面，我們添加用戶名及密碼兩個(gè)文本，同樣的設(shè)置文本的顏色為白色，添加一個(gè)圖層樣式，在這里，我設(shè)置了一個(gè)投影效果。

到這里，就算是完成了，來看看我們的效果吧！

我們的PSD里制作了不同顏色各異的效果，來看看吧！

一個(gè)全是原創(chuàng)教程的微信公眾號：

【設(shè)計(jì)干貨+職場秘籍+神器推薦】

教科書級別的蘋果官方人機(jī)指南！
《騰訊力作！超實(shí)用的IOS 9人機(jī)界面指南（1）：UI設(shè)計(jì)基礎(chǔ)》

如何自學(xué)成為騰訊高級交互設(shè)計(jì)師？
《優(yōu)設(shè)訪談！騰訊高級交互設(shè)計(jì)師C7210的十年設(shè)計(jì)路》

紋理素材兩大殺器！
《酷站兩連發(fā)！專注無縫紋理素材站+多邊形背景生成器》

原文地址： pdadians