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

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

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

　　最終效果如下圖：



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

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

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

　　3. Ctrl 單擊選中Interfacebodycopy層.

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

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

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

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

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

　　5. 現(xiàn)在開始表現(xiàn)特效。其實就是Photoshop 6.0/7.0中的layerstyles(層特效)功能。見下圖，另外我還加上了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)做好了,但是它看起來并不怎么惹人喜愛。讓我們?yōu)樗尤胄┘?xì)節(jié)吧!

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

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

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

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

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

　　11. 接著選擇移動工具并按下鍵盤上的方向鍵，將Interfacedetails層向左移動了一些。

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

　　13. 依照圖十三,再畫一橢圓，按下Delete鍵，取消選定。

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

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

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

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

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

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

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

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

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

　　21. 增加文字。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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