PS設(shè)計(jì)制作一個(gè)清爽的藍(lán)色海洋風(fēng)格網(wǎng)(11)

在今天的這個(gè)教程中，木木和童學(xué)們分享：使用photoshop設(shè)計(jì)一個(gè)非常清爽的網(wǎng)站主頁，特色是網(wǎng)站的配色非常的不錯(cuò)，童學(xué)們好好學(xué)習(xí)一下。

效果圖：

1。在這個(gè)網(wǎng)頁設(shè)計(jì)教程中，使用的是960網(wǎng)格，所以童學(xué)們得先下載一個(gè)960網(wǎng)絡(luò)，然后導(dǎo)入到photoshop軟件中。通過編輯>畫布大小，改變文件的大小為：1600x1500px。

（注：寬度可以自由更改，但為了能在寬屏的顯示器中也能更好的顯示，建議大家還是用1600px）
2.找一張清爽的水圖片，導(dǎo)入到photoshop中。

3.在視圖>添加新參考線，添加三條水平參考線：80px，110px和170px。
4。接下來我們制作網(wǎng)站的LOGO。選擇“文字工具”并設(shè)屬性：字體大小72px;輸入網(wǎng)站的名字，接下來設(shè)置文字的樣式。

如下圖：

效果如下圖：

5。做完網(wǎng)站的LOGO后，接下來開始做網(wǎng)站的導(dǎo)航。
選擇“圓角矩形工具”并設(shè)圓角半徑為：15px，并填充白色；設(shè)不透明度為：70%。

6.在網(wǎng)站的導(dǎo)航條上添加文字；文字的屬性為：#0263a4；大小24px。
7。接下來制作導(dǎo)航的hover狀態(tài)。
選擇“圓角矩形工具”并設(shè)圓角半徑為：15px，繪制一個(gè)按鈕出來并填充黑色。雙擊此圖層添加圖層樣式。

效果如下圖：

8。制作搜索欄
還是使用“圓角矩形工具”并設(shè)圓角半徑為：15px，繪制想要的長(zhǎng)度，并設(shè)“圖層樣式”設(shè)置如下圖：

“內(nèi)陰影”選項(xiàng)：不透明改為：0%

找一個(gè)“放大鏡的圖標(biāo)”放置在右邊。

頭部做完了，接下來就開始做產(chǎn)品展示部分。

9。新增參考線：200px，465px和500px.還是選擇“圓角矩形工具”并設(shè)圓角半徑為：15px。從500參考線往上繪制一個(gè)圓角矩形并填充白色，

設(shè)不透明度為：70%。

10。接下來制作左側(cè)的方塊。
依然使有“圓角矩形工具”，從465參考線開始繪制一個(gè)高為300，寬為560的矩形，雙擊打開此圖層設(shè)其“圖層樣式”
效果如下圖：

11.在這個(gè)左側(cè)的方框里添加一個(gè)小方框來放圖片。這個(gè)小方框的大小為：500x221px。并設(shè)“圖層樣式”

設(shè)置效果下圖：

12。在方框的右側(cè)添加一些內(nèi)空

添加一個(gè)“more”的按鈕，copy第7步的“圖層樣式”。

13.繪制圖片的滑塊
繪制一個(gè)小矩形，并設(shè)如第12步的圖層樣式。
接下來我們使用“橢圓工具”按shift鍵繪制一個(gè)小正圓，然后填充＃e8e8e8 并設(shè)圖層樣式：

最終的效果哪下圖：

14.添加一條新的參照線：550px.接下來我們來做內(nèi)容的背景。選擇圓角矩形工具”并設(shè)圓角半徑為：15px，從參照線：550px到頁面的底部。

15。添加一條參考線：680px；從這個(gè)參考線到550px那條之間，添加類似“公告欄”文字。

16。添加一條參考線：880px，和參考線：680px之間，使用“矩形工具”繪制一個(gè)矩形，填充任一顏色，

并添加如下圖的“圖層樣式”。

添加一些尺寸為：180*135px的圖片，并設(shè)“圖層樣式”。

17.接下來我們給圖片的兩邊加一個(gè)“箭頭”，使用“自定義圖形”選擇一個(gè)箭頭的形狀，并設(shè)置“圖層樣式”(顏色疊加：＃87cdf5)

18。添加圖片和文字，如下圖：

19。再次添加新參考線：1280px和1350px，使用“矩形工具”繪制出一個(gè)矩形，并設(shè)如下圖“圖層樣式”

20。添加圖標(biāo)（圖標(biāo)的顏色：＃87cdf5），文字

21。接下來繪制分隔線

使用“線條工具”繪制兩條堅(jiān)線，一條填充：＃0270bc；另一條：#148bcf。

然后點(diǎn)擊“面板”上的“蒙版圖標(biāo)”，

添變效果如下圖：

22。最終效果如下圖：漂亮不，一個(gè)清爽的網(wǎng)頁布局就在你手上制作出來了。