ps+div+css打造藍(lán)色后臺(tái)

做到兼容主流瀏覽器

如何設(shè)計(jì)一個(gè)頁(yè)面？

如何切片才能更好的配合實(shí)現(xiàn)？

如何考慮兼容性？

如何用div+css做后臺(tái)的百分比布局?

Login頁(yè)面設(shè)計(jì)

先在photoshop中進(jìn)行設(shè)計(jì)

1,打開(kāi)ps，新建1200px*768px;打開(kāi)圖層面板，解鎖雙擊背景圖層，解鎖，并命名為：背景層

2,新建一個(gè)文件夾：命名為色系，在里面新建一個(gè)圖層，確定頁(yè)面要用到的顏色。如圖：

左邊：漸變：點(diǎn)擊前景色：#2366fe 背景色：#ffffff，選擇漸變工具從上到下

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

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

3,打造網(wǎng)站背景。

3-1：先拉頁(yè)面基線：因?yàn)榫W(wǎng)站一般都是960*768，而在新建的時(shí)候是：1200*768，所以左右兩邊會(huì)有：(1200-960)/2=120px空白。

具體方法：ctrl+R，出現(xiàn)標(biāo)尺，從左邊的標(biāo)尺位置，鼠標(biāo)左鍵點(diǎn)住不松住右拖。

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

3-2,選擇“吸管工具”，打開(kāi)“色系層”，選擇一個(gè)顏色：我選的是：#3694cf

雙擊“背景層”打開(kāi)“圖層樣式”，選中并點(diǎn)擊“漸變疊加”。

點(diǎn)擊圖中1：色卡標(biāo)：會(huì)打開(kāi)“拾色器”。選擇取前景色：#3694cf。向下下調(diào)。確定。

點(diǎn)擊圖中2：色卡標(biāo)：如上，選擇取前景色：#3694cf，先上調(diào)，確定。

確定。

確定后，會(huì)得到如圖所顯示的背景

3-3:打造一個(gè)背景高光：新建一個(gè)圖層：命名為高光。點(diǎn)擊“選區(qū)工具”?>“橢圓工具”。在圖中拉一個(gè)選區(qū)，如圖：

在選區(qū)處，鼠標(biāo)右擊?>羽化-->輸入40px，確定

打開(kāi)色系，選擇“吸管工具”，點(diǎn)擊背景色，選擇顏色，確定，同樣點(diǎn)擊前景色，選擇顏色，確定：我的前景色是：# d7ecf9 背景色是：#?5daee2

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

最后如圖：

?

4,設(shè)計(jì)logo與標(biāo)題

4-1：新建文件夾，命名logo，調(diào)整順序

4-2：選擇距形工具，參數(shù)如圖，選中l(wèi)ogo文件夾，在畫(huà)面中點(diǎn)擊一下

4-3：雙擊新生成的“形狀1”-->打開(kāi)“圖層樣式”-->漸變疊加-->顏色值：# 09649e，# 449cd5

如圖：

4-4：勾選：投影，參數(shù)如圖

?4-5：勾選：描邊，參數(shù)如圖

確定

4-6：選擇“文字工具”?>“輸入文字_MT”-->調(diào)整顏色：“#cbe5f7”-->調(diào)整大小_80px-->調(diào)整位置-->設(shè)置字體。

4-7：打開(kāi)“圖層樣式”-->內(nèi)陰影，參數(shù)如圖：

最終如圖：

5：系統(tǒng)標(biāo)題

5-1：選擇“文字工具”?>“輸入文字_XXX管理系統(tǒng)”-->調(diào)整顏色：“#e7f5fd”-->調(diào)整大小_50px-->調(diào)整位置-->設(shè)置字體。

5-2：設(shè)置樣式：

5-3-1：添加倒影-->先中“XXX管理系統(tǒng)”圖層-->按：ctrl+J,復(fù)制一層;-->得到“XXX管理系統(tǒng) 副本”-->右擊“XXX管理系統(tǒng) 副本”-->選擇“柵格化文字”-->得到圖層“XXX管理系統(tǒng) 副本”-->新建一個(gè)圖層3放在“XXX管理系統(tǒng) 副本”下面-->選擇圖層“XXX管理系統(tǒng) 副本”-->ctrl+E向下合并圖層，得到“圖層3”

相關(guān)圖片：

柵格化前：

柵格化后：

與圖層3合并前：

與圖層3合并后：

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

5-3-2：選中圖層3：ctrl+T，移動(dòng)位置到“XXX管理系統(tǒng)”位置的正下方，反轉(zhuǎn)，變斜，結(jié)果如圖，確定

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

?

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

這里注意：上面長(zhǎng)一點(diǎn)點(diǎn)，下面剛剛到字體結(jié)束

此時(shí)，效果：

圖層：

?

6，打造login模塊，新建login文件夾，放在logo下面

6-1:打造背景，選擇“距形工具”，對(duì)數(shù)如下：

6-2-1：得到形狀“圖層2”-->雙擊-->打開(kāi)“圖層樣式”-->勾選“漸變疊加”，參數(shù)：# 09649e，# 449cd5。

6-2-2：勾選“投影”，參數(shù)如圖：

6-2-3：勾選“描邊”，參數(shù)如圖：

6-2-4：勾選“內(nèi)發(fā)光”參數(shù)如圖：

6-3:根據(jù)需要調(diào)整位置。

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

6-5-1:這里有用到兩個(gè)圖標(biāo)。處理方法如下：

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

6-5-2:打造文本框,選擇“距形工具”參數(shù)如下

6-5-3：畫(huà)一個(gè)文本框，大小自定，調(diào)整位置，添加“圖層樣式”，參數(shù)分別如下：

效果如下：

再做一個(gè)得到焦點(diǎn)的文本框：

ctrl+J復(fù)制一層，雙擊修改“圖層樣式”，參數(shù)如下：

得到焦點(diǎn)效果如下：

6-4：密碼框，驗(yàn)證碼輸入框，復(fù)制一個(gè)，調(diào)整位置即可：

效果如下：

7：登錄按鈕打造。

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

7-2:打開(kāi)“圖層樣式”，參數(shù)如下：

效果：

7-3:制作一個(gè)得到焦點(diǎn)的按鈕，修改樣式如圖：

效果：

到這里設(shè)計(jì) 就全部完成了，

看下最后的文件結(jié)構(gòu)：

最后的效果圖：

?

?轉(zhuǎn)載請(qǐng)注明出處：http://www.cnblogs.com/overstep/archive/2012/07/23/2604274.html

?

?

?

?

?