Photoshop制作精致的XP風(fēng)格任務(wù)欄

來源:不詳 作者:佚名 學(xué)習(xí):270人次
Photoshop制作精致的XP風(fēng)格任務(wù)欄

 在設(shè)計多媒體光盤、多媒體課件的用戶界面時,許多設(shè)計者喜歡制作仿真Windows任務(wù)欄和開始菜單。因為平常大家接觸最多的界面恰恰就是Windows的桌面環(huán)境,所以這種風(fēng)格的用戶界面為許多用戶所喜愛。

  設(shè)計這類界面的關(guān)鍵是制作出逼真的任務(wù)欄和開始按鈕,今天我們來介紹一下如何使用Photoshop制作這種逼真的任務(wù)欄和開始按鈕。

  本文以Photoshop CS中文版為例,其他版本類似。 文章末尾提供.psd文件供大家下載參考。   完成效果:

  繪制過程:   1、運行Photoshop CS中文版,新建一個大小為“450×450”像素、分辨率為72像素/英寸、背景顏色為白色的文件,輸入文件名稱“Toolbar”,具體設(shè)置如圖1所示。

  2、按下鍵盤上的D鍵設(shè)置前景色與背景色為默認的黑色和白色,然后再按下“Alt Delete”鍵將當前圖層填充為黑色。設(shè)置為黑色的目的是為了在制作過程中更容易地看清楚銀色任務(wù)欄的效果,在制作完成后可以將多余的部分去掉。   3、單擊圖層面板中的“創(chuàng)建新的圖層”按鈕,在“背景”圖層的上方新建一個圖層,并將其命名為“Bar”。(小技巧:按下鍵盤上的“Ctrl Alt Shift N”可以快速在當前圖層上方創(chuàng)建一個新的圖層,若要在新建圖層的同時對圖層命名、設(shè)置圖層顏色、模式,可以按快捷鍵“Ctrl Shift N”,然后在彈出的“新圖層”對話框中進行詳細設(shè)置,如圖2所示。)

  4、選擇工具箱中的“矩形選框工具”,在圖層“Bar”上繪制一個高度大約為35像素的長方形選擇區(qū)域,其寬度與圖像文件寬度相同。繪制完成后按下“Alt Delete”鍵將創(chuàng)建的選區(qū)填充為黑色。

  在設(shè)計多媒體光盤、多媒體課件的用戶界面時,許多設(shè)計者喜歡制作仿真Windows任務(wù)欄和開始菜單。因為平常大家接觸最多的界面恰恰就是Windows的桌面環(huán)境,所以這種風(fēng)格的用戶界面為許多用戶所喜愛。

  設(shè)計這類界面的關(guān)鍵是制作出逼真的任務(wù)欄和開始按鈕,今天我們來介紹一下如何使用Photoshop制作這種逼真的任務(wù)欄和開始按鈕。

  本文以Photoshop CS中文版為例,其他版本類似。 文章末尾提供.psd文件供大家下載參考。   完成效果:

  繪制過程:   1、運行Photoshop CS中文版,新建一個大小為“450×450”像素、分辨率為72像素/英寸、背景顏色為白色的文件,輸入文件名稱“Toolbar”,具體設(shè)置如圖1所示。

  2、按下鍵盤上的D鍵設(shè)置前景色與背景色為默認的黑色和白色,然后再按下“Alt Delete”鍵將當前圖層填充為黑色。設(shè)置為黑色的目的是為了在制作過程中更容易地看清楚銀色任務(wù)欄的效果,在制作完成后可以將多余的部分去掉。   3、單擊圖層面板中的“創(chuàng)建新的圖層”按鈕,在“背景”圖層的上方新建一個圖層,并將其命名為“Bar”。(小技巧:按下鍵盤上的“Ctrl Alt Shift N”可以快速在當前圖層上方創(chuàng)建一個新的圖層,若要在新建圖層的同時對圖層命名、設(shè)置圖層顏色、模式,可以按快捷鍵“Ctrl Shift N”,然后在彈出的“新圖層”對話框中進行詳細設(shè)置,如圖2所示。)

  4、選擇工具箱中的“矩形選框工具”,在圖層“Bar”上繪制一個高度大約為35像素的長方形選擇區(qū)域,其寬度與圖像文件寬度相同。繪制完成后按下“Alt Delete”鍵將創(chuàng)建的選區(qū)填充為黑色。

   6、制作開始按鈕的關(guān)鍵是制作出按鈕形狀的選區(qū)。在圖層“Bar”上新建一個圖層,并命名為“White”,然后按住Ctrl鍵的同時單擊圖層“Bar”,載入圖層“Bar”的選區(qū),如圖6中1所示。

   7、選擇工具箱中的“矩形選框工具”,在上方的選項欄中設(shè)置為“從選區(qū)減去”,如圖7所示,然后選擇窗口中矩形選區(qū)的右邊部分,將其減去,得到如圖6中2所示的結(jié)果。

  8、選擇工具箱中的“橢圓選框工具”,在上方的選項欄中設(shè)置為“與選區(qū)交叉”,如圖8所示,在左邊繪制橢圓,使其形成如圖6中4所示的結(jié)果。一次不行,可以按Ctrl Z鍵撤消再重做一次,直到結(jié)果令你滿意為止。

  9、將得到的選區(qū)填充為白色,復(fù)制該圖層,并命名為“black”。按下快捷鍵Ctrl I將該圖層中的圖像反相,成為黑色。選擇工具箱中的“移 動工具”,然后按一次向左箭頭鍵,將圖像向左移 動一個像素。    10、復(fù)制圖層“black”,并向?qū)?fù)制得到的圖層向左移 動一個像素,方法同上。將這個圖層命名為“button”,使用步驟5中介紹的方法打開“圖層樣式”對話框,為其設(shè)置漸變疊加,具體設(shè)置如圖9、圖10所示。

設(shè)置完畢,得到如圖11所示的結(jié)果,已經(jīng)比較接近真正的開始按鈕了,但還有一點不足的地方,接下來繼續(xù)制作。

   11、在按住Ctrl鍵的同時,單擊圖層“button”(即有漸變按鈕的圖層),載入該圖層的選區(qū)。單擊工具箱中的選框工具,敲擊向左箭頭鍵7次,將選區(qū)稍向左移 動一段距離。   12、創(chuàng)建一個新的圖層,用任意一種顏色填充該選區(qū)。    13、再次按住Ctrl鍵的同時,單擊圖層“button”載入選區(qū)。選擇工具箱中的“魔棒工具”,并在選項欄中設(shè)置為“從選區(qū)減去”,單擊新圖層中選區(qū)以外的填充區(qū)域,得到一個新的月牙型選區(qū)。保持選區(qū),將該圖層刪除。   14、新建一個圖層,并命名為“bevel”,用黑色填充選區(qū),并設(shè)置圖層樣式為漸變填充,方法同步驟10,具體設(shè)置如圖12所示。

  這樣我們就得到了逼真的XP風(fēng)格任務(wù)欄,如圖13所示。

  你可以自己添加按鈕上的圖標及文字,如圖14所示。 .psd原文件下載

簡單的,我們教你,深奧的,你來分享

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!