教你如何用photoshop制作網(wǎng)頁(yè)外殼界面(12)

出處：PConline      作者：轉(zhuǎn)載：mashijia/牛筋大學(xué)

　先來(lái)看看最終效果圖：

　　OK，讓我們開始...

　　1.
　　做這個(gè)外殼界面時(shí),我用了相當(dāng)多的技巧,所以教程變的相當(dāng)長(zhǎng), 希望你有耐心去完成它 :)
　　開始新建一文件 - 600 x 500 pixels. 白色背景.
　　新建一層 (起名叫 Interface body) 選擇圓形選取工具 畫出一圓形. 填充黑色. 依照?qǐng)D一,在剛剛的黑圓中再畫一相似的小圓.按下Delete鍵.
　　(在實(shí)例中我用了大圓 50% 大小的小圓形刪除...)
　　duplicate(復(fù)制) Interface body 層,回到Interface body copy圖層,一會(huì)兒我們要用它.　Interface body我們展時(shí)不用,可以先關(guān)閉它,防止干擾我們的視線.

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

　3.
　　Ctrl+單擊選中Interface body copy 層.
　　切換置Channels(面板)點(diǎn)擊保存選擇區(qū)域按鈕. 取消選定.

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

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

　　(通道可以起名為 Interface).

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

　　在選擇區(qū)域中可以隨意填充顏色 – 我選擇灰色. 當(dāng)我們添加特效時(shí)顏色就會(huì)改變了...

　5.
　　好玩的開始了!

　　現(xiàn)在是特效時(shí)間!
　　實(shí)際是我們要用到的是Photoshop 6中的layer styles (層特效)功能.

　　見(jiàn)下圖.

　　另外我還加上了soft drop shadow (柔和的陰影特效)

　　6.
　　Ok – 現(xiàn)在讓我們回到最初的Interface body 層.

　　Ctrl + 單擊使該層浮動(dòng).

　　執(zhí)行Select - Modify – Contract(選擇 – 修改 – 收縮) - 5 pixels - OK.

　　接著 Ctrl + Shift + I to 反轉(zhuǎn)選擇區(qū)域.
　　按Delete刪除.

　7.
　　再次使該層浮動(dòng) (Ctrl + 單擊);

　　Select - Modify - Contract(選擇 – 修改 – 收縮) - 3 pixels - OK.


　　按下Delete鍵將Interface body層的中心部分刪除.我也為這一層添加了drop shadow(陰影)特效.

如圖七.

　　基本的界面我們已經(jīng)做好了, 但是它看起來(lái)并不怎么惹人喜愛(ài).

　　讓我們?yōu)樗尤胄┘?xì)節(jié)吧!

　　8.
　　使Interface layer層浮動(dòng).

　　執(zhí)行Edit - Copy Merged(編輯 – 拷貝合并). 接著Edit – Paste(編輯 –粘貼).
將新層更名為Interface details.

　　使Interface details層浮動(dòng),執(zhí)行
　　Select - Modify – Contract(選擇 – 修改 – 收縮) - 10 pixels - OK.
　　反選選擇區(qū)域(Ctrl + Shift + I) 按Delete鍵刪除.

　　取消選定.

　　選擇矩形選擇工具畫出如圖八的矩形選擇區(qū)域來(lái).

　　在進(jìn)行下一步之前,請(qǐng)按下圖添加圖層特效.

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

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

　　按Delete鍵刪除所選區(qū)域.

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

　　12.
　　現(xiàn)在是給我們的界面填加些Cool原料的時(shí)候了 :)

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

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

　　依照?qǐng)D十二,再畫一相似的小圓.按下Delete鍵..

　　13.
　　依照?qǐng)D十三,再畫一橢圓.按下Delete鍵.

　　取消選定.

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

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

　　15
　　接著我在Aqua Triangles層上新建了一ayers Bolts層,并放置了一些球體如圖十五,詳細(xì)的制作方法請(qǐng)見(jiàn)我們前面的教程.

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

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

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

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

　　17.
　　Duplicate(復(fù)制)此層,執(zhí)行 Edit - Transform - Flip Horizontal(編輯 – 變形 – 水平翻轉(zhuǎn)).

　　將Chrome Detail copy 層向右移動(dòng).

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

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

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

　　保持選擇區(qū)域的浮動(dòng)!

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

　　取消選定.

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

　　移動(dòng)選擇區(qū)域到圓環(huán)的底部,同樣按Delete 刪除.

　　20.
　　回到 Ring 1 layer.

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

　　現(xiàn)在是給Ring 1 層和 Ring 2 層添加特效的時(shí)候了.

　　Ring 1層的設(shè)置見(jiàn)下圖.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　用拖拽置新建按鈕的方法復(fù)制該Button 層. 重復(fù)復(fù)制,直到你要的數(shù)量并把它們移動(dòng)到合適的位置.

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

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

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

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

　　取消選定.

　　復(fù)制這一層,將它移動(dòng)到底部的按鈕上.

如圖二十四.

　連接這兩個(gè)Inset buttons 層進(jìn)行合并.
　　執(zhí)行 Gaussian Blur (高斯模糊)- 4 pixels.

　　25.
　　現(xiàn)在是進(jìn)一步修整的時(shí)間了.

　　Ctrl + 單擊左鍵Chrome Detail 層,使Chrome Detail 浮動(dòng)并且復(fù)制該層.
　　制作一如圖二十五的選擇區(qū)域并進(jìn)行反選 (Ctrl + Shift + I).
　　按Delete刪除. 取消選定.

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

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

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

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

　27.
　　使 Background Buttons 層浮動(dòng).
　　新建一層叫 Highlights.

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

　　用鍵盤移動(dòng)選擇區(qū)域,使它和圖二十七類似.

　　按下 Delete刪除所選區(qū)域.

　　28.
　　復(fù)制Highlights 層 3 次執(zhí)行 Edit - transform - Flip Horizontal/Vertical(編輯 – 變形 – 水平垂直/翻轉(zhuǎn))移動(dòng)到不同的位置知道和圖二十八相同.

　　連接這四個(gè)不同的highlights 層,進(jìn)行合并 t (Ctrl + E).

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

　　29.
　　新建一層叫Highlights 2.

　　制作一個(gè)如圖二十九的選區(qū),填充白色.

　　取消選定

　　Gaussian Blur (高斯模糊)- 2 pixel

　30.
　　復(fù)制 Highlights 2 層將它移動(dòng)置按鈕的下部

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

　　象皮擦具體設(shè)置見(jiàn)下圖.

　　新建一層叫 Black Shadow.
　　制作一個(gè)和圖三十相似的選擇區(qū)域,填充黑色.
　　高斯模糊4 pixels.
　　復(fù)制此層并移動(dòng)Black Shadow copy層到另一側(cè).

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

　　這個(gè)教程還遠(yuǎn)遠(yuǎn)沒(méi)有結(jié)速,用你的想象,還能給這個(gè)界面添加更多更c(diǎn)ool 的特效來(lái):)

　　好運(yùn)!