InterFace網(wǎng)頁(yè)的平面效果制作

InterFace網(wǎng)頁(yè)的平面效果制作看膩了方方正正的頁(yè)面嗎？現(xiàn)在各種各樣interface風(fēng)格的頁(yè)面越來(lái)越多，其實(shí)做這種頁(yè)面一般都是先完成平面效果的設(shè)計(jì)，然后再切割完成，所以平面效果的體現(xiàn)就顯得尤為重要了。

　　下面我們就舉一個(gè)實(shí)例來(lái)具體講解，教程比較長(zhǎng)，主要運(yùn)用的就是層的特效（style），只要有耐心就能做出精彩的效果。

　　最終效果如下圖：



　　1.新建一文件-600x500pixels，白色背景。新建一層(起名叫Interfacebody)，選擇圓形選取工具畫(huà)出一圓形，填充黑色.。依照?qǐng)D一,在剛剛的黑圓中再畫(huà)一相似的小圓，按下Delete鍵。(我用了大圓50%大小的小圓形刪除)

　　duplicate(復(fù)制)Interfacebody層,回到Interfacebodycopy圖層,一會(huì)兒我們要用它.Interfacebody我們暫時(shí)不用,可以先關(guān)閉它,防止干擾我們的視線(xiàn)。

　　2. 用圓形選取工具畫(huà)出如圖二的橢圓選擇區(qū)域。從頂部開(kāi)始,每隔40pixels按下鍵盤(pán)上的Delete鍵一次如圖二，取消選定。

　　3. Ctrl 單擊選中Interfacebodycopy層.

　　切換置Channels(面板)點(diǎn)擊保存選擇區(qū)域按鈕.取消選定.

　　執(zhí)行Filter-Blur-GaussianBlur(濾鏡–模糊–高斯模糊)-4pixels.

　　接著執(zhí)行Image-Adjust–Levels(圖像–調(diào)整–色階)–將左右兩個(gè)小箭頭向中心拖動(dòng),直到圖像的邊緣非常干凈為止.以下是我的具體設(shè)置。(通道可以起名為Interface).

　　4. 回到層面板,新建一層叫Interface。Select-LoadSelection(選擇–讀取選擇區(qū)域)，在對(duì)話(huà)框中選擇我們剛剛新建的Interfacebody通道。

　　在選擇區(qū)域中可以隨意填充顏色，我選擇灰色，添加特效時(shí)顏色就會(huì)改變了。

　　5. 現(xiàn)在開(kāi)始表現(xiàn)特效。其實(shí)就是Photoshop 6.0/7.0中的layerstyles(層特效)功能。見(jiàn)下圖，另外我還加上了softdropshadow(柔和的陰影特效)。

　　6. 現(xiàn)在讓我們回到最初的Interfacebody層。Ctrl 單擊該層，執(zhí)行Select-Modify–Contract(選擇–修改–收縮)，5pixels，OK。
　　接著Ctrl Shift Ito反轉(zhuǎn)選擇區(qū)域，按Delete刪除。

　　7. 再次Ctrl 單擊該層，Select-Modify-Contract(選擇–修改–收縮)，3pixels，OK。

　　按下Delete鍵將Interfacebody層的中心部分刪除.我也為這一層添加了dropshadow(陰影)特效。如圖七.

　　

　　基本的界面我們已經(jīng)做好了,但是它看起來(lái)并不怎么惹人喜愛(ài)。讓我們?yōu)樗尤胄┘?xì)節(jié)吧!

8. Ctrl 單擊Interfacelayer層，執(zhí)行Edit-CopyMerged(編輯–拷貝合并)，接著Edit–Paste(編輯–粘貼)。將新層更名為Interfacedetails。

　　Ctrl 單擊使Interfacedetails層浮動(dòng),執(zhí)行Select-Modify–Contract(選擇–修改–收縮)-10pixels-OK，反選選擇區(qū)域(Ctrl Shift I)按Delete鍵刪除，取消選定。

　　選擇矩形選擇工具畫(huà)出如圖八的矩形選擇區(qū)域來(lái)，在進(jìn)行下一步之前,請(qǐng)按下圖添加圖層特效。

　　9. 接著每移動(dòng)矩形選擇區(qū)域12pixels按Delete刪除一次。效果如圖九.

10. 用圓形選擇工具畫(huà)出入圖十的圓形，按Delete鍵刪除所選區(qū)域。

　　11. 接著選擇移動(dòng)工具并按下鍵盤(pán)上的方向鍵，將Interfacedetails層向左移動(dòng)了一些。

　　12. 再給我們的界面填加些Cool的元素！在背景層上新建一層叫AquaTriangles，選擇圓形選取工具在界面內(nèi)畫(huà)出一圓形.填充灰色-#595959，依照?qǐng)D十二,再畫(huà)一相似的小圓.按下Delete鍵。

　　13. 依照?qǐng)D十三,再畫(huà)一橢圓，按下Delete鍵，取消選定。

　　14. 應(yīng)用第五步中我們所添加的layerstyle(圖層特效)(Interface層)，接著再添加DropShadow(陰影)特效，設(shè)置Opacity(不透明度):97%,Distance(距離):3pixels,其它都用默認(rèn)的設(shè)置。

　　15. 接著我在AquaTriangles層上新建了一ayersBolts層,并放置了一些球體如圖十五。再添加了BevelandEmboss(斜面和浮雕)效果，見(jiàn)下圖。

　　16. 回到背景層新建一新層ChromeDetail，選擇圓形選取工具畫(huà)出一橢圓形,填充灰色.在橢圓的右邊畫(huà)一較小的圓形,按Delete鍵刪除。如圖十六，再次畫(huà)出一橢圓選取區(qū)域,按Ctrl Shift I進(jìn)行反選,按Delete鍵刪除。

　　17. Duplicate(復(fù)制)此層,執(zhí)行Edit-Transform-FlipHorizontal(編輯–變形–水平翻轉(zhuǎn))。將ChromeDetailcopy層向右移動(dòng)。接著添加一些DropShadow(陰影)(默認(rèn)設(shè)置)和GradientOverlay(漸變覆蓋)見(jiàn)下圖.

　　18. 回到背景層新建一新層Ring1。選擇圓形選取工具畫(huà)出如圖十八的橢圓選取工具。

　　確保你的前景色為深灰色(#212121)執(zhí)行 Edit-Stroke–Center(編輯–描邊–中心)-9pixels-ok.

　　保持選擇區(qū)域的浮動(dòng)，新建一新層Ring2,將前景色該邊為亮灰色(#4B4B4B)執(zhí)行 Edit-Stroke–Inside(編輯–描邊–內(nèi)部)-5pixels-ok。取消選定。

　　19. 在Ring2層上畫(huà)出一矩形選擇區(qū)域如圖十九,按Delete刪除。移動(dòng)選擇區(qū)域到圓環(huán)的底部,同樣按Delete刪除。

　　20. 回到Ring1layer，畫(huà)出一圓形選擇區(qū)域如圖二十,按Delete刪除。給Ring1層和Ring2層添加BevelandEmboss(斜面和浮雕)效果，接著增加DropShadow(陰影)特效.Distance(距離):2pixels和Size(尺寸):2pixels。如果你愿意，還可以加入Stroke(描邊)特效:1pixel-Outside–黑色。

　　21. 增加文字。

　　在所有層上新建一層并用TypeTool(文字工具)敲入你想要的文字。執(zhí)行Edit-Transform-Rotate90°CCV(編輯–變形–左旋轉(zhuǎn)90度)。

　　選中text層并點(diǎn)擊CreateWarpedText(建立彎曲文字)按鈕.

　　圖二十一是我的設(shè)置,但不同的文字具體設(shè)置可能有所不同,在這里我只是教你如何使用建立彎曲文字工具罷了。

22. 回到Background層新建一BackgroundButtons。選擇RoundedRectangleTool(圓角矩形工具)畫(huà)出如圖二十二的圓角矩形。確保CreateFilledRegion(建立填充區(qū)域)是選中的改變前景色為#737373.

　　接著在BackgroundButtons層是建立一layerButton層。選擇RoundedRectangleTool(圓角矩形工具)改變前景色為黑色,建立一個(gè)如圖二十二的按鈕外形。

　　23. 同樣為這一層也添加如第五步中Interface的層特效。加入DropShadow(陰影)–默認(rèn)設(shè)置–但Distance(距離):2pixels,Size(尺寸):2pixels。用拖拽置新建按鈕的方法復(fù)制該Button層.重復(fù)復(fù)制,直到你要的數(shù)量并把它們移動(dòng)到合適的位置.

　　鏈接所有我們剛剛復(fù)制的按鈕層.按Ctrl E合并為一層.重命名為Buttons.

　　加入DropShadow(陰影)–默認(rèn)設(shè)置–但Distance(距離):1pixels,Size(尺寸):1pixels.

　　24. 在Buttons層之下新建一InsetButtons層。Ctrl 單擊左鍵Buttons層,使按鈕浮動(dòng)，取消較低按鈕的浮動(dòng)線(xiàn),只保留頂部的按鈕被選中。（方法是在屬性面板上選擇相減按鈕,勾選出要?jiǎng)h除的部分即可）。

　　執(zhí)行Select-Modify-Expand(選擇–修改–擴(kuò)展)-2pixels，按D鍵恢復(fù)默認(rèn)顏色(黑色前景,白色背景)，選擇GradientTool(漸變工具)從上到下填充選擇區(qū)域，取消選定。

　　復(fù)制這一層,將它移動(dòng)到底部的按鈕上，如圖。鏈接這兩個(gè)Insetbuttons層進(jìn)行合并，執(zhí)行GaussianBlur(高斯模糊)-4pixels。

　　25. 進(jìn)一步修整。Ctrl 單擊左鍵ChromeDetail層,使ChromeDetail浮動(dòng)并且復(fù)制該層，制作一如圖二十五的選擇區(qū)域并進(jìn)行反選(Ctrl Shift I)，按Delete刪除，取消選定。接著關(guān)閉DropShadow(陰影)特效。

　　26. 執(zhí)行GaussianBlur(高斯模糊)-5pixels，停留在Chromedetailcopy層,Ctrl 單擊左鍵ChromeDetail層,使ChromeDetail浮動(dòng)。反選選擇區(qū)域(Ctrl Shift I)，按Delete刪除(確定你是在Chromedetailcopy層).取消選定。

　　復(fù)制Chromedetailcopy層執(zhí)行Edit-Transform-Fliphorizontal(編輯–變形–水平翻轉(zhuǎn))–移動(dòng)置右邊部分。

　　27. 使BackgroundButtons層浮動(dòng)，新建一層叫Highlights，用圓形選取工具畫(huà)出如圖二十七的圓形填充白色。用鍵盤(pán)移動(dòng)選擇區(qū)域，按下Delete刪除所選區(qū)域.

　　28. 復(fù)制Highlights層3次，執(zhí)行Edit-transform-FlipHorizontal/Vertical(編輯–變形–水平垂直/翻轉(zhuǎn))移動(dòng)到不同的位置知道和下圖相同。鏈接這四個(gè)不同的highlights層,進(jìn)行合并(Ctrl E)。再執(zhí)行GaussianBlur(高斯模糊)-3pixels。

　　29. 新建一層取名Highlights2。制作一個(gè)如下圖的選區(qū),填充白色，取消選定，GaussianBlur(高斯模糊)-2pixel。

　　30. 復(fù)制Highlights2層將它移動(dòng)置按鈕的下部，接著用橡皮擦工具在高光條中心部分進(jìn)行擦除.如圖三十。橡皮擦具體設(shè)置見(jiàn)下圖。
　　新建一層叫BlackShadow，制作一個(gè)和圖三十相似的選擇區(qū)域,填充黑色。高斯模糊4pixels。復(fù)制此層并移動(dòng)BlackShadowcopy層到另一側(cè)。

　　31. 最后一步，加上文字在按鈕上。你還可以運(yùn)用你的想象給這個(gè)界面添加更多更c(diǎn)ool的特效來(lái)。