ps+div+css打造藍色後台–login頁面設計

ps+div+css打造藍色後台

做到相容主流瀏覽器

如何設計一個頁面？

如何切片才能更好的配合實現？

如何考慮相容性？

如何用div+css做背景百分比布局?

Login頁面設計

先在photoshop中進行設計

1,開啟ps，建立1200px*768px;開啟圖層面板，解鎖雙擊背景圖層，解鎖，並命名為：背景層

2,建立一個檔案夾：命名為色系，在裡面建立一個圖層，確定頁面要用到的顏色。

左邊：漸層：點擊前景色彩：#2366fe 背景色：#ffffff，選擇漸層工具從上到下

右邊：同上，前景色彩：#009cff 背景色：#ffffff

ps:我選用的是右邊的色系。

3,打造網站背景。

3-1：先拉頁面基準：因為網站一般都是960*768，而在建立的時候是：1200*768，所以左右兩邊會有：(1200-960)/2=120px空白。

具體方法：ctrl+R，出現尺規，從左邊的尺規位置，滑鼠左鍵點住不松住右拖。

拉出兩條，分別是在：120px和1080px處

3-2,選擇“吸管工具”，開啟“色系層”，選擇一個顏色：我選的是：#3694cf

雙擊“背景層”開啟“圖層樣式”，選中並點擊“漸層疊加”。

點擊圖中1：色卡標：會開啟“拾色器”。選擇取前景色彩：#3694cf。向下下調。確定。

點擊圖中2：色卡標：如上，選擇取前景色彩：#3694cf，先上調，確定。

確定。

確定後，會得到所顯示的背景

3-3:打造一個背景高光：建立一個圖層：命名為高光。點擊“選區工具”—>“橢圓工具”。在圖中拉一個選區，

在選區處，滑鼠右擊—>羽化-->輸入40px，確定

開啟色系，選擇“吸管工具”，點擊背景色，選擇顏色，確定，同樣點擊前景色彩，選擇顏色，確定：我的前景色彩是：# d7ecf9 背景色是：# 5daee2

選擇“漸層工具”選擇模式“中心漸層”，由上往下拉。

最後

 

4,設計logo與標題

4-1：建立檔案夾，命名logo，調整順序

4-2：選擇距形工具，參數，選中logo檔案夾，在畫面中點擊一下

4-3：雙擊新產生的“形狀1”-->開啟“圖層樣式”-->漸層疊加-->顏色值：# 09649e，# 449cd5

4-4：勾選：投影，參數

 4-5：勾選：描邊，參數

確定

4-6：選擇“文字工具”—>“輸入文字_MT”-->調整顏色：“#cbe5f7”-->調整大小_80px-->調整位置-->設定字型。

4-7：開啟“圖層樣式”-->內陰影，參數

最終

5：系統標題

5-1：選擇“文字工具”—>“輸入文字_XXX管理系統”-->調整顏色：“#e7f5fd”-->調整大小_50px-->調整位置-->設定字型。

5-2：設定樣式：

5-3-1：添加倒影-->先中“XXX管理系統”圖層-->按：ctrl+J,複製一層;-->得到“XXX管理系統 副本”-->右擊“XXX管理系統 副本”-->選擇“柵格化文字”-->得到圖層“XXX管理系統 副本”-->建立一個圖層3放在“XXX管理系統 副本”下面-->選擇圖層“XXX管理系統 副本”-->ctrl+E向下合并圖層，得到“圖層3”

相關圖片：

柵格化前：

柵格化後：

與圖層3合并前：

與圖層3合并後：

ps:注意紅字部分，不然合并就達不到效果

5-3-2：選中圖層3：ctrl+T，移動位置到“XXX管理系統”位置的正下方，反轉，變斜，結果，確定

5-3-3：選中圖層3，添加蒙版

 

5-3-4，選中“圖層3”蒙版-->修改“前景色彩為：白色”，背景色為：“黑色”-->選擇“漸層工具”-->從上往下拉。，

這裡注意：上面長一點點，下面剛剛到字型結束

此時，效果：

圖層：

 

6，打造login模組，建立login檔案夾，放在logo下面

6-1:打造背景，選擇“距形工具”，對數如下：

6-2-1：得到形狀“圖層2”-->雙擊-->開啟“圖層樣式”-->勾選“漸層疊加”，參數：# 09649e，# 449cd5。

6-2-2：勾選“投影”，參數

6-2-3：勾選“描邊”，參數

6-2-4：勾選“內發光”參數

6-3:根據需要調整位置。

6-4: 按照步驟5-3，給“形狀2”做一個背景，做好後，最終效果如下：

6-5-1:這裡有用到兩個表徵圖。處理方法如下：

ctrl+T-->調整大小-->添加“圖層樣式”-->勾選“漸層填充”，參數“#80aed1，#c9e0f3”-->勾選“陰影”參數：距離:1px,大小:2px,不透明度:30%，效果如下：

6-5-2:打造文字框,選擇“距形工具”參數如下

6-5-3：畫一個文字框，大小自定，調整位置，添加“圖層樣式”，參數分別如下：

效果如下：

再做一個得到焦點的文字框：

ctrl+J複製一層，雙擊修改“圖層樣式”，參數如下：

得到焦點效果如下：

6-4：密碼框，驗證碼輸入框，複製一個，調整位置即可：

效果如下：

7：登入按鈕打造。

7-1:按照步驟：6-5-2畫一個圓角距形，大小自定，圓角半徑建議：4px;調整位置，

7-2:開啟“圖層樣式”，參數如下：

效果：

7-3:製作一個得到焦點的按鈕，修改樣式

效果：

到這裡設計 就全部完成了，

看下最後的檔案結構：

最後的：

 

 轉載請註明出處：http://www.cnblogs.com/overstep/archive/2012/07/23/2604274.html