先來看看最終效果圖:
OK,讓我們開始...
1.
做這個外殼界面時,我用瞭相當多的技巧,所以教程變的相當長, 希望你有耐心去完成它 :)
開始新建一文件 - 600 x 500 pixels. 白色背景.
新建一層 (起名叫 Interface body) 選擇圓形選取工具 畫出一圓形. 填充黑色. 依照圖一,在剛剛的黑圓中再畫一相似的小圓.按下Delete鍵.
(在實例中我用瞭大圓 50% 大小的小圓形刪除...)
duplicate(復制) Interface body 層,回到Interface body copy圖層,一會兒我們要用它. Interface body我們展時不用,可以先關閉它,防止幹擾我們的視線.
2.
用圓形選取工具畫出如圖二的橢圓選擇區域.
從頂部開始,每隔40 pixels 按下鍵盤上的Delete 鍵一次 如圖二.
取消選定.
3.
Ctrl+單擊選中Interface body copy 層.
切換置Channels(面板)點擊保存選擇區域按鈕
. 取消選定.
執行Filter - Blur - Gaussian Blur(濾鏡 – 模糊 – 高斯模糊) - 4 pixels.
接著執行Image - Adjust – Levels(圖像 – 調整 – 色階) – 將左右兩個小箭頭向中心拖動,直到圖像的邊緣非常幹凈為止. 以下是我的具體設置.
(通道可以起名為 Interface).
4.
回到層面板,新建一層叫 Interface.
Select - Load Selection(選擇 – 讀取選擇區域) – 在對話框中選擇我們剛剛新建的 Interface body通道.
在選擇區域中可以隨意填充顏色 – 我選擇灰色. 當我們添加特效時顏色就會改變瞭...
5.
好玩的開始瞭!
現在是特效時間!
實際是我們要用到的是Photoshop 6中的layer styles (層特效)功能.
見下圖.
另外我還加上瞭soft drop shadow (柔和的陰影特效)
6.
Ok – 現在讓我們回到最初的Interface body 層.
Ctrl + 單擊使該層浮動.
執行Select - Modify – Contract(選擇 – 修改 – 收縮) - 5 pixels - OK.
接著 Ctrl + Shift + I to 反轉選擇區域.
按Delete刪除.
7.
再次使該層浮動 (Ctrl + 單擊);
Select - Modify - Contract(選擇 – 修改 – 收縮) - 3 pixels - OK.
按下Delete鍵將Interface body層的中心部分刪除.我也為這一層添加瞭drop shadow(陰影)特效.
如圖七.
基本的界面我們已經做好瞭, 但是它看起來並不怎麼惹人喜愛.
讓我們為它加入些細節吧!
8.
使Interface layer層浮動.
執行Edit - Copy Merged(編輯 – 拷貝合並). 接著Edit – Paste(編輯 –粘貼).
將新層更名為Interface details.
使Interface details層浮動,執行
Select - Modify – Contract(選擇 – 修改 – 收縮) - 10 pixels - OK.
反選選擇區域(Ctrl + Shift + I) 按Delete鍵刪除.
取消選定.
選擇矩形選擇工具畫出如圖八的矩形選擇區域來.
在進行下一步之前,請按下圖添加圖層特效.
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 的特效來:)
好運!