網頁中外殼界面的製作方法,圖片,視覺,平面,廣告,VI,畫冊,課程,技巧,PS

先來看看最終效果圖：

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

　　10.
　　用圓形選擇工具畫出入圖十的圓形.

　　按Delete鍵刪除所選區域.

11.
　　接著我將Interface details 層向左移動了一些 (方法是選擇移動工具並按下鍵盤上的方向鍵).

　　12.
　　現在是給我們的界面填加些Cool原料的時候了 :)

　　在背景層上新建一層叫 Aqua Triangles.

　　選擇圓形選取工具在界面內畫出一圓形. 填充灰色 -#595959.

　　依照圖十二,再畫一相似的小圓.按下Delete鍵..

　　13.
　　依照圖十三,再畫一橢圓.按下Delete鍵.

　　取消選定.

14.
　　應用第五步中我們所添加的layer style(圖層特效) (Interface 層).

　　接著再添加 Drop Shadow(陰影)特效.
　　設置 Opacity(不透明度): 97 %, Distance(距離): 3 pixels,其它都用默認的設置.

　　15
　　接著我在Aqua Triangles層上新建了一ayers Bolts層,並放置了一些球體如圖十五,詳細的製作方法請見我們前面的教程.

　　我又為其添加了Bevel and Emboss(斜面和浮雕)效果,見下圖.

　16.
　　回到背景層新建一新層Chrome Detail.

　　選擇圓形選取工具 畫出一橢圓形,填充灰色.在橢圓的右邊畫一較小的圓形,按Delete 鍵刪除.

　　接著如圖十六,再次畫出一橢圓選取區域,按Ctrl + Shift + I進行反選, 按Delete 鍵刪除.

　　17.
　　Duplicate(複製)此層,執行 Edit - Transform - Flip Horizontal(編輯 – 變形 – 水平翻轉).

　　將Chrome Detail copy 層向右移動.

　　接著添加一些Drop Shadow(陰影) (默認設置) 和 Gradient Overlay(漸變覆蓋)見下圖.

18.
　　回到背景層新建一新層 Ring 1.

　　選擇圓形選取工具 畫出如圖十八的橢圓選取工具.
　　確保你的前景色為深灰色(#212121) 執行
　　Edit - Stroke – Center(編輯 – 描邊 – 中心) - 9 pixels - ok.

　　保持選擇區域的浮動!

　　新建一新層 Ring 2, 將前景色該邊為亮灰色 (#4B4B4B) 執行Edit - Stroke – Inside(編輯 – 描邊 – 內部) - 5 pixels - ok.

　　取消選定.

　　19.
　　在 Ring 2 層上畫出一矩形選擇區域如圖十九,按Delete 刪除.

　　移動選擇區域到圓環的底部,同樣按Delete 刪除.

　　20.
　　回到 Ring 1 layer.

　　畫出一圓形選擇區域如圖二十,按Delete 刪除.

　　現在是給Ring 1 層和 Ring 2 層添加特效的時候了.

　　Ring 1層的設置見下圖.

　　Ring 2層特效設置:
　　用和Ring 1層同樣的Bevel and Emboss(斜面和浮雕)效果.

　　接著增加Drop Shadow(陰影) 特效. Distance(距離): 2 pixels 和 Size(尺寸): 2 pixels.

　　如果你願意 – 可以加入Stroke(描邊)特效: 1 pixel - Outside – 黑色.

　　21.
　　Ok – 該增加一些文字了...

　　在所有層上新建一層並用Type Tool(文字工具) 敲入你想要的文字.

　　執行Edit - Transform - Rotate 90° CCV(編輯 – 變形 – 左旋轉90度).

　　選中text層並點擊 Create Warped Text(建立彎曲文字)按鈕.

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

　　22.
　　回到 Background 層新建一 Background Buttons.

　　選擇Rounded Rectangle Tool(圓角矩形工具) 畫出如圖二十二的圓角矩形.

　　確保 Create Filled Region(建立填充區域) 是選中的改變前景色為#737373.

　　接著在 Background Buttons 層是建立一layer Button層.
　　選擇 Rounded Rectangle Tool(圓角矩形工具) 改變前景色為黑色,建立一個如圖二十二的按鈕外形.

　　23.
　　同樣的,為這一層也加如第五步中Interface的層特效.

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

　　用拖拽置新建按鈕的方法複製該Button 層. 重複複製,直到你要的數量並把它們移動到合適的位置.

　　連接所有我們剛剛複製的按鈕層. 按 Ctrl + E合併為一層. 重命名為Buttons.

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

　　24.
　　在 Buttons 層之下新建一Inset Buttons層.
　　Ctrl + 單擊左鍵Buttons 層,使按鈕浮動.
　　取消較低按鈕的浮動線,只保留頂部的按鈕被選中.

　　方法是在屬性面板上選擇相減按鈕,勾選出要刪除的部分即可.
如圖二十三!
　　執行Select - Modify - Expand(選擇 – 修改 – 擴展)- 2 pixels.
　　按D鍵恢復默認顏色 (黑色前景,白色背景)
　　選擇Gradient Tool(漸變工具)從上到下填充選擇區域.

　　取消選定.

　　複製這一層,將它移動到底部的按鈕上.

如圖二十四.
連接這兩個Inset buttons 層進行合併.
　　執行 Gaussian Blur (高斯模糊)- 4 pixels.

　　25.
　　現在是進一步修整的時間了.

　　Ctrl + 單擊左鍵Chrome Detail 層,使Chrome Detail 浮動並且複製該層.
　　製作一如圖二十五的選擇區域並進行反選 (Ctrl + Shift + I).
　　按Delete刪除. 取消選定.

　　接著關閉Drop Shadow(陰影)特效 !

　　26.
　　執行 Gaussian Blur (高斯模糊)- 5 pixels.

　　停留在Chrome detail copy 層, Ctrl + 單擊左鍵Chrome Detail 層,使Chrome Detail 浮動.
　　反選選擇區域 (Ctrl + Shift + I).
　　按Delete刪除(確定你是在Chrome detail copy 層). 取消選定.

　　複製 Chrome detail copy 層執行Edit - Transform - Flip horizontal (編輯 – 變形 – 水平翻轉) – 移動置右邊部分.

27.
　　使 Background Buttons 層浮動.
　　新建一層叫 Highlights.

　　用圓形選取工具畫出如圖二十七的圓形填充百色.

　　用鍵盤移動選擇區域,使它和圖二十七類似.

　　按下 Delete刪除所選區域.

　　28.
　　複製Highlights 層 3 次執行 Edit - transform - Flip Horizontal/Vertical(編輯 – 變形 – 水平垂直/翻轉)移動到不同的位置知道和圖二十八相同.

　　連接這四個不同的highlights 層,進行合併 t (Ctrl + E).

　　執行 Gaussian Blur (高斯模糊)- 3 pixels.

　　29.
　　新建一層叫Highlights 2.

　　製作一個如圖二十九的選區,填充白色.

　　取消選定

　　Gaussian Blur (高斯模糊)- 2 pixel

30.
　　複製 Highlights 2 層將它移動置按鈕的下部

　　接著用象皮擦工具在高光條中心部分進行擦除.如圖三十.

　　像皮擦具體設置見下圖.

　　新建一層叫 Black Shadow.
　　製作一個和圖三十相似的選擇區域,填充黑色.
　　高斯模糊4 pixels.
　　複製此層並移動Black Shadow copy層到另一側.

　　31.
　　Ahhhh – 最後一步
　　只要加入文字在按鈕上,你就完成啦!

　　這個教程還遠遠沒有結速,用你的想像,還能給這個界面添加更多更cool 的特效來:)

　　好運!