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