InterFace網頁的平面效果制作

2022-12-24 23:15:50
來源/作者：互聯網/佚名
己被圍觀次

InterFace網頁的平面效果制作看膩了方方正正的頁面嗎？現在各種各樣interface風格的頁面越來越多，其實做這種頁面一般都是先完成平面效果的設計，然后再切割完成，所以平面效果的體現就顯得尤為重要了。下面我們就

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

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

　　最終效果如下圖：

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

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

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

　　3. Ctrl 單擊選中Interfacebodycopy層.

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

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

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

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

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

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

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

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

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

　　

　　基本的界面我們已經做好了,但是它看起來并不怎么惹人喜愛。讓我們為它加入些細節吧!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　21. 增加文字。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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