作者:PS真功夫翻譯　  出處:

今天的布局設(shè)計是以黑色為主菜，配菜是紅與白，聽起來是不是有些納悶，那么請往下看，作者是如何打造的。

首先欣賞下最終效果圖：

準備就緒

新建文檔：大小1200px*1200px.設(shè)置前景色#505050，背景色#2d2d2d，選擇”漸變工具”，并改漸變類型為”徑向漸變”。

此徑向漸變大概是位于畫布中間上方一點，因此漸變起點和終點要有一定長度。如下所示：

接下來，新建圖層，命名為”header”，選擇”矩形選框工具”或”矩形工具”沿左上角拖出高為300px的矩形，以任何顏色填充。如下所示：

給”header”添加以下圖層樣式：

這時的效果圖為：

創(chuàng)建TopBar

選擇”鋼筆工具”，像下圖一樣描繪頭部形狀：（提示：借助網(wǎng)格線或標尺）

接著用黑色填充，如下所示：

此圖層設(shè)置如下樣式

1）內(nèi)陰影

2）漸變疊加

3）描邊

在topbar突出的空間里添加白色文字”contact us”，字體是Arial，右邊帶一個小三角形（可使用多邊形套索工具創(chuàng)造）。

創(chuàng)建導(dǎo)航和網(wǎng)站標題

使用”圓角矩形工具”，半徑為10px，拖出一般按鈕大小的圓角矩形作為導(dǎo)航鏈接。

不管用什么顏色填充，然后與”topbar”圖層合并，得到的效果如下：（我按照作者說的操作，沒有得到下圖效果，只是把圓角矩形的圖層樣式改為”topbar”的圖層樣式）

在”topbar”下方添加其它導(dǎo)航鏈接，圓角矩形作為某鏈接動態(tài)時的形狀。

在導(dǎo)航鏈接下添加網(wǎng)站標題和標語，字體選擇的是”quicksand”，（在此下載）對于前兩個字母以紅色填充，剩下的字母為深灰色。

創(chuàng)建產(chǎn)品服務(wù)盒

創(chuàng)建產(chǎn)品服務(wù)盒之前，在”header”圖層底部邊緣新建兩條1px的水平線，分別為黑白兩色，完成后設(shè)置圖層透明度為40%

選取”圓角矩形工具”，半徑仍為10px，在網(wǎng)站標題下拖出一個大約250px高的矩形，直到”contact us”右邊緣為止。

為此矩形設(shè)置以下圖層樣式

1）陰影

2）斜面與浮雕

3）漸變疊加

4）描邊

下部分需要一些圖標，紅色的最適宜，可以從Dryicons.com網(wǎng)站進行下載.

在每部分的文字說明之間，添加分隔線，由兩條1px的直線組成，一條挨著另一條，顏色從左到右為黑色和白色。新建圖層，選取”單列選框工具”，點擊一下畫布，然后選取”矩形選框工具”，選取類型為”交叉選取”。

 給選區(qū)填充黑色，照此方法再新建一條白色豎線，完成后設(shè)置圖層混合模式為”柔光”。

在每個段落下方，創(chuàng)建一個小型圓角紅色按鈕。

創(chuàng)建側(cè)欄

在產(chǎn)品服務(wù)盒下方創(chuàng)建新圖層，并且像上述創(chuàng)建分隔線一樣再創(chuàng)建一條分隔線，對準第二個和第三個服務(wù)盒之間那條分隔線。如下所示：

挨著側(cè)欄分隔線，用”矩形選擇框工具”創(chuàng)建選區(qū)，寬度不用太寬。

選擇”漸變工具”進行從黑到透明的線性漸變，從左到右（越過選區(qū)）拖出此漸變，完成后設(shè)置透明度為15%。

給側(cè)欄分隔線和剛才新建的漸變圖層添加圖層蒙版，然后再次拖出同樣的線性漸變，方向是從元素底部到頭部，如下所示：

在右側(cè)欄添加新聞動態(tài)。

創(chuàng)建內(nèi)容區(qū)

從下載圖標的網(wǎng)站下載一個”房子”的圖標，放置在左邊產(chǎn)品盒下方。

選擇”矩形選框工具”，在主內(nèi)容下方創(chuàng)建矩形選區(qū)。

給此矩形填充顏色#1e1e1e，然后設(shè)置如下圖層樣式：

最后在矩形內(nèi)添加一張圖片示例，并留出10px的邊框。

創(chuàng)建Footer

在畫布剩下的空間里創(chuàng)建一個矩形選區(qū)，以顏色#1e1e1e進行填充，然后添加如下圖層樣式：

在底部區(qū)域添加你想添的內(nèi)容。