Photoshop教程:繪制另類的3D網(wǎng)頁(yè)布局
大家好,好像沒有翻教程了,很不好意思了,因?yàn)閾Q了個(gè)工作,所以沒有像以前有那么多空閑的時(shí)間來譯了。
今天我們來分享的這篇教程是一個(gè)比較另類的網(wǎng)頁(yè)布局--3D網(wǎng)頁(yè)布局。像這樣的網(wǎng)頁(yè),做成個(gè)人主頁(yè)是一個(gè)不錯(cuò)的選擇,但是如果用來做商業(yè)頁(yè)面的話,得有勇氣了,嘎嘎。。。
先來目睹為快了:
效果不錯(cuò)吧
1。打開photohshop軟件,新建一個(gè)1200*1200文檔。設(shè)置前景色:“#424241″背景色: “#191919。然后在工具箱選擇“漸變工具”,設(shè)置如下圖:
漸變效果如下圖:
2。選擇“文字工具”打上你網(wǎng)站的名字和宣傳詞,效果如下圖:
接下來給這些文字添加一些圖層樣式:
最終的效果如下圖:
3。接下來我們給網(wǎng)頁(yè)添加一個(gè)搜索框,選擇“圓角矩形工具”并設(shè)其圓角的大小為:15px.在頁(yè)面的右上角畫一個(gè)圓角矩形。
接下來給這個(gè)矩形添加一個(gè)圖層樣式設(shè)置如下圖:
最終效果如下圖:
再次選擇“圓角矩形工具”并設(shè)置圓角的大小為:5px。畫一個(gè)比較小的矩形,按ctrl+enter把路徑變?yōu)檫x區(qū),然后給這個(gè)選區(qū)填充白色。
使用矩形選區(qū)工具,把這個(gè)小的圓角矩形裁剪后半截,按ctrl+x,再按ctrl+v復(fù)制到一個(gè)新的圖層,然后暫時(shí)隱藏起來,留到后面要用。
接下來給這個(gè)矩形的前半部添加一個(gè)圖層樣式,設(shè)置如下圖:
其效果如下圖:
下面我們把剛才隱藏的后半部打開,利用圖層樣式,把它做成一個(gè)按扭。
新建一個(gè)圖層,我們給這個(gè)按扭添加兩條1px的線條,一條填充白色,一條填充黑色。并設(shè)這個(gè)圖層的混合選項(xiàng):soft light最后的效果下圖:
4。接下來我們來建一個(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),最終效果如下圖:
接下來雙擊這個(gè)圖層打開圖層樣式的對(duì)話框,設(shè)置如下:
選擇“橢圓選框工具”畫一個(gè)橢圓,效果如下圖:
給這個(gè)橢圓選取區(qū)填充黑色,并設(shè)置它的不透明度為:50%。如果你一步一步跟著我做的話,你就會(huì)得到下面的效果。
5。下面我們來給導(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。接下來我們來完成頁(yè)面的主體部分。
使用“矩形選區(qū)工具”來畫出主體的部分。要注意的一點(diǎn)是矩形的大小要和導(dǎo)航的一樣大。
給這個(gè)矩形添加一個(gè)圖層樣式,設(shè)置如下圖:
給主體添加你想要的內(nèi)容,在這里我把主體分成了三個(gè)部分來添加,其最終的效果如下圖:
7。嘎嘎。。。終于快大功告成了。最后我們來給頁(yè)面添加頁(yè)腳。
在主體的下面添加兩條1 px的直線,一條填充黑色,一條填充白色。并混合模式:疊加.(有沒有印象喲,上面我們也做過同樣的步驟).
最后加上你網(wǎng)站的信息,這樣一張較為較特殊的網(wǎng)頁(yè)布局就完成了。
---------
我們來回想下,這個(gè)教程特色在哪里
學(xué)習(xí) · 提示
相關(guān)教程
- 網(wǎng)頁(yè)模版,個(gè)人網(wǎng)站建設(shè)入門知識(shí)
- 網(wǎng)頁(yè)模板,設(shè)計(jì)酒吧主題網(wǎng)頁(yè)模板實(shí)例
- ps設(shè)計(jì)藍(lán)色主題風(fēng)格的網(wǎng)站首頁(yè)模板教程
- 從零手把手教你設(shè)計(jì)網(wǎng)頁(yè)
- 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)技巧
- 網(wǎng)頁(yè)設(shè)計(jì)的分割布局秘密
- ps cs6設(shè)計(jì)個(gè)人作品網(wǎng)頁(yè)模板教程
- ps網(wǎng)頁(yè)布局設(shè)計(jì)實(shí)例教程
- ps黑色風(fēng)格網(wǎng)頁(yè)模板
- ps一個(gè)木紋風(fēng)格網(wǎng)頁(yè)模板
推薦教程
- Photoshop制作禮品店網(wǎng)站模板
- PS教程:繪制清新的色彩生動(dòng)的網(wǎng)頁(yè)布局
- Photoshop CS5制作放射狀光線網(wǎng)頁(yè)廣告板
- PS教程:制作非常不錯(cuò)的wordpress博客網(wǎng)站模板
- photoshop網(wǎng)頁(yè)應(yīng)用實(shí)例:制作蘋果導(dǎo)航欄
- ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁(yè)特效
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁(yè)模板
- Photoshop繪制好看的老式wordpress主題
- Photoshop網(wǎng)頁(yè)設(shè)計(jì):雜志風(fēng)格網(wǎng)站界面
- PhotoShop設(shè)計(jì)制作懷舊風(fēng)格網(wǎng)頁(yè)的詳細(xì)教程