Photoshop教程:繪制另類的3D網(wǎng)頁(yè)布局(3)

大家好，好像沒(méi)有翻教程了，很不好意思了，因?yàn)閾Q了個(gè)工作，所以沒(méi)有像以前有那么多空閑的時(shí)間來(lái)譯了。
今天我們來(lái)分享的這篇教程是一個(gè)比較另類的網(wǎng)頁(yè)布局--3D網(wǎng)頁(yè)布局。像這樣的網(wǎng)頁(yè)，做成個(gè)人主頁(yè)是一個(gè)不錯(cuò)的選擇，但是如果用來(lái)做商業(yè)頁(yè)面的話，得有勇氣了，嘎嘎。。。

先來(lái)目睹為快了：

效果不錯(cuò)吧

1。打開photohshop軟件，新建一個(gè)1200*1200文檔。設(shè)置前景色：“#424241″背景色： “#191919。然后在工具箱選擇“漸變工具”，設(shè)置如下圖：

漸變效果如下圖：

2。選擇“文字工具”打上你網(wǎng)站的名字和宣傳詞，效果如下圖：

接下來(lái)給這些文字添加一些圖層樣式：

最終的效果如下圖：

3。接下來(lái)我們給網(wǎng)頁(yè)添加一個(gè)搜索框，選擇“圓角矩形工具”并設(shè)其圓角的大小為：15px.在頁(yè)面的右上角畫一個(gè)圓角矩形。

接下來(lái)給這個(gè)矩形添加一個(gè)圖層樣式設(shè)置如下圖：

最終效果如下圖：

再次選擇“圓角矩形工具”并設(shè)置圓角的大小為：5px。畫一個(gè)比較小的矩形，按ctrl+enter把路徑變?yōu)檫x區(qū)，然后給這個(gè)選區(qū)填充白色。

使用矩形選區(qū)工具，把這個(gè)小的圓角矩形裁剪后半截，按ctrl+x,再按ctrl+v復(fù)制到一個(gè)新的圖層，然后暫時(shí)隱藏起來(lái)，留到后面要用。

接下來(lái)給這個(gè)矩形的前半部添加一個(gè)圖層樣式，設(shè)置如下圖：

其效果如下圖：

下面我們把剛才隱藏的后半部打開，利用圖層樣式，把它做成一個(gè)按扭。

新建一個(gè)圖層,我們給這個(gè)按扭添加兩條1px的線條，一條填充白色，一條填充黑色。并設(shè)這個(gè)圖層的混合選項(xiàng)：soft light最后的效果下圖：

4。接下來(lái)我們來(lái)建一個(gè)3D導(dǎo)航。
新建一個(gè)圖層，在距離搜索框下的100 px左右，畫兩條1 px寬950 px長(zhǎng)的線條，一條填充黑色，一條填充白色。并混合模式：疊加.

新建一個(gè)圖層，選擇“矩形選區(qū)工具”畫一個(gè)與線條一樣寬的矩形，并填充白色。
按鍵盤上ctrl+T組合鍵，右擊菜單選擇“透視”。把鼠標(biāo)移到左邊的節(jié)點(diǎn)上按住不放拖動(dòng)，最終效果如下圖：

接下來(lái)雙擊這個(gè)圖層打開圖層樣式的對(duì)話框，設(shè)置如下：

選擇“橢圓選框工具”畫一個(gè)橢圓，效果如下圖：

給這個(gè)橢圓選取區(qū)填充黑色，并設(shè)置它的不透明度為：50%。如果你一步一步跟著我做的話，你就會(huì)得到下面的效果。

5。下面我們來(lái)給導(dǎo)航加一些元素。我在這個(gè)網(wǎng)頁(yè)下載一些圖標(biāo)：http://apathae.deviantart.com/art/W-R-E-N-84310039
給第一個(gè)圖標(biāo)添加一個(gè)外發(fā)光的效果（在圖層樣式里添加哦）。

按ctrl+J復(fù)制圖標(biāo)，再按ctrl+T，在右擊菜單中找到“垂直翻轉(zhuǎn)”。然后選擇：濾鏡-模糊-高斯模糊,給這些圖標(biāo)添加一些模糊的效果。

點(diǎn)擊圖層面板上的“蒙版”圖標(biāo)，給這些圖標(biāo)添加一個(gè)蒙版，然后選擇“漸變工具”漸變色彩從“黑--白”。然后使用漸變工具從上到下拖拉。最終的效果如下：

最后我給第一個(gè)圖標(biāo)添加一個(gè)“小提示”的圖標(biāo)，效果如下圖：

6。接下來(lái)我們來(lái)完成頁(yè)面的主體部分。
使用“矩形選區(qū)工具”來(lái)畫出主體的部分。要注意的一點(diǎn)是矩形的大小要和導(dǎo)航的一樣大。

給這個(gè)矩形添加一個(gè)圖層樣式，設(shè)置如下圖：

給主體添加你想要的內(nèi)容，在這里我把主體分成了三個(gè)部分來(lái)添加，其最終的效果如下圖：

7。嘎嘎。。。終于快大功告成了。最后我們來(lái)給頁(yè)面添加頁(yè)腳。
在主體的下面添加兩條1 px的直線，一條填充黑色，一條填充白色。并混合模式：疊加.(有沒(méi)有印象喲，上面我們也做過(guò)同樣的步驟).
最后加上你網(wǎng)站的信息，這樣一張較為較特殊的網(wǎng)頁(yè)布局就完成了。

---------
我們來(lái)回想下，這個(gè)教程特色在哪里