Photoshop導(dǎo)航條的制作

1、導(dǎo)航條設(shè)計(jì)（一）網(wǎng)站導(dǎo)航條的制作并不是幾款按鈕的簡(jiǎn)單組合，他們需要與logo和背景元素結(jié)合起來(lái)。通過(guò)學(xué)習(xí)，能夠掌握導(dǎo)航條的制作全過(guò)程以及各種處理的方法。1、制作底板第二步：第一步：新建一個(gè)圖像文件，寬度為780象素，高度為100像素按快捷鍵Ctrl+A，將圖像全部選中，在工具箱中設(shè)置前景色（如：R：54,G：62,B：89）,按快捷鍵Alt+Delete,將前景色填充到背景中，Ctrl+D取消選擇。第三步：新增一個(gè)圖層，重新命名為“導(dǎo)航底圖”，選取漸變工具在工具選項(xiàng)欄上單擊“漸變色條”，打開(kāi)漸變編輯器對(duì)話框昨點(diǎn)圖層選擇IS）濾鏡視圖窗口妣）幫助0!）輛:名稱迥）;色標(biāo)不透明度：1%位置：%刪除

2、(0)顏色:!_!曲:厶%1刪除也）101層強(qiáng)釉徑P記錄*常W不透明度:100%E：卄B豌100%第四步：選擇黑色和白色漸變，選中左側(cè)的色標(biāo)，設(shè)置一種顏色（R：114，G：128，B：164）第五步：選中右側(cè)的色標(biāo)，設(shè)置顏色（R：72，G：85，B：117）單擊確定按鈕，完成設(shè)置。第六步：用鼠標(biāo)從圖像的上端拖動(dòng)到下端，對(duì)圖層進(jìn)行漸變填充r包AdobePhotoshop口問(wèn)岡文件編輯圖像（1）圖層選擇濾鏡視謝匹）窗口幫助J”_|口口門(mén)模式：正常V不透明度:100VOH反向回仿色回透明區(qū)域皤畫(huà)筆書(shū)第七步：選取多邊形套索工具，在圖像上單擊鼠標(biāo)，創(chuàng)建出一個(gè)選區(qū)回UZ塞7級(jí)卜第八步：按Delete鍵，刪

3、除選取中的圖形，顯示出背景色r週AdobePhotoshop口問(wèn)區(qū)11文件編輯圖像（1）圖層選擇濾鏡視謝匹）窗口幫助也巧4j羽化：oPx回消除霍齒皤畫(huà)筆i口IVJtt/撈El缺T國(guó)口口回區(qū)）文件g）編輯迢）團(tuán)像0）圖層選擇濾鏡視圖邏）窗口址）幫助樣式（D：內(nèi)斜面角度辿）:咼度:三使用全局光（30度滾動(dòng)所有窗口丨方向:大小：J斜面和浮雕廠結(jié)構(gòu)光澤顏色疊加漸變疊協(xié)圖案疊加描邊不透明度回：0|?5%陰影模式笛|正片疊底司不透明（C：0|45|%U藝雖7鉉樣式混合選項(xiàng);默認(rèn)投影內(nèi)陰影外發(fā)光內(nèi)發(fā)光方法（:平滑深度（邑：七光澤等高線:確運(yùn)新建拝式迴）回預(yù)覽取消口問(wèn)區(qū)）in昨石史記錄衛(wèi)竺卑才不透明度；100

4、%第九步：按Ctrl+D，取消選擇，雙擊“導(dǎo)航底圖”圖層，打開(kāi)圖層樣式對(duì)話框，選擇“斜面和浮雕”樣式，在“高光模式”中設(shè)置一種顏色（R：255,G：253,B：221），設(shè)置好其他參數(shù)5AdobePhotoshopI設(shè)置陰克的不透H可第十步：選擇“投影”樣式，設(shè)置不透明度為39%，設(shè)置好其他參數(shù)，單擊確定按鈕，完成圖層樣式的添加。第十一步：選取多邊形套索工具，在圖像的上端選取一個(gè)選區(qū)，按Delete廠週AdobePhotoshop口回岡文件匹）編輯（1）圖像（X）圖層（1）選擇濾鏡）視圖迪窗口幫助:V”1口邑羽化：Opx回消除鋸齒迫畫(huà)筆警刪除選區(qū)中的圖形r山AdobePhotoshop口問(wèn)岡文

5、件編輯圖像（1）圖層選擇濾鏡視謝匹）窗口幫助V”InlQF4j羽化：Opx回消除霍齒皤畫(huà)筆書(shū)未標(biāo)題T9100S（導(dǎo)航底圖，RGB/8）回岡100鴨|冋I文檔:228.5燈304.液第十二步：執(zhí)行“選擇”“修改”“收縮”命令，打開(kāi)“收縮選區(qū)”對(duì)話框，設(shè)置“收縮量”為1像素第十三步：新增一個(gè)圖層，設(shè)置前景色為白色，按Alt+Dlete,將選取填充為白色，按Ctrl+D取消選擇心AdobePhotoshop口問(wèn)岡文件編輯（1）圖像（X）圖層（1）選擇濾鏡）觀圖電）窗口址）幫助:V”InlQ4j羽化：opx回消除鋸齒圍1畫(huà)筆弋導(dǎo)航底閤第十四步：雙擊新增圖層的縮略圖，打開(kāi)“圖層樣式”對(duì)話框，選擇漸變疊加

6、”選項(xiàng)，單擊“漸變色條”，打開(kāi)“漸變編輯器”對(duì)話框，選中左側(cè)的色標(biāo)，設(shè)置一種顏色（R：96,G：98,B：120）,選中右側(cè)的色標(biāo)，設(shè)置一種顏色（R：120，G：120，B：138），單擊確0AdobePhotoshop口回岡文件匹）編輯圖像（X）圖層（1）選擇濾鏡）觀圖迪窗口幫助1口心日羽化：Opx二|回消除鋸齒蚩了畫(huà)筆藥定按鈕,完成樣式的設(shè)計(jì)。文普;2285K/38(L9K*鼻1。嘆|eW航底E切不透明度：1如埴充：100%2、制作文字效果第一步：選取橫排文字工具，在窗口中單擊，輸入文字“Hosting”，選中文字，在“工具選項(xiàng)欄”上設(shè)置文字的屬性，選取移動(dòng)工具，調(diào)整好文字的位置第二步：右

7、鍵單擊文字層，從彈出的菜單中選擇“刪格化文字”命令，將文字圖層轉(zhuǎn)化為普通圖層自動(dòng)選擇閤層】選擇組顯示變換控件!-Qo-編組到新連智能對(duì)象圖層中選擇相似圖層轉(zhuǎn)換為段落文本文字變形Photoshop圖層雇性混合選項(xiàng)消除鋸齒方式為無(wú)消除鋸齒方式為銳利消除鋸齒方式為犀利消除鋸齒方式為渾厚消除鋸齒方式為平涓水平垂直刪格化文字創(chuàng)建工作躋徑轉(zhuǎn)換為形狀籬接團(tuán)層選擇捱接圖層拷貝圖層樣式粘貼圖層樣式清除圖層樣式復(fù)制圖層刪除E1層）編輯El像IEl層L）選擇連鏡（I）tPlE窗口址）幫助第三步：雙擊圖層的縮略圖，打開(kāi)圖層樣式對(duì)話框，選擇“外發(fā)光”樣式，選擇混合模式為正常，選擇顏色為黑色r週AdobePhotosho

8、p口問(wèn)岡、文件編輯圖像（1）圖層選擇濾鏡視謝匹）窗口幫助點(diǎn)按井拖移可調(diào)整效果的位置口一畫(huà)筆7圖層樣式未標(biāo)題-1100鴨代樣式混合選項(xiàng);默認(rèn)投影內(nèi)陰影回外發(fā)光內(nèi)發(fā)光斜面和浮雕等高線紋理光澤顏色疊加漸變疊加廠漸變第四步：選擇漸變疊加樣式，單擊漸變色條，打開(kāi)漸變編輯器對(duì)話框，選中左側(cè)的色標(biāo)，設(shè)置顏色為黑色，在中間位置處單擊，加入一個(gè)色標(biāo)，給他設(shè)置一個(gè)顏色（R：159,G：139,B：105）,選中右側(cè)的色標(biāo)，為他設(shè)置顏色（R：255,G：251,B：229）,單擊確定按鈕,返回到圖層樣式對(duì)話框，設(shè)置其他參數(shù)，單擊確定按鈕，完成圖層樣式的設(shè)置。第五步：此時(shí)的文字產(chǎn)生了漸變的效果葉胡相自動(dòng)選擇閣層顯示變

9、換控件R小丄由占JIIHMM濾鏡d）視圖窗口妣）幫助QPPhotoshop第六步：按住Ctrl鍵，在圖層面板中單擊文字圖層的縮略圖，創(chuàng)建一個(gè)文字選區(qū)，執(zhí)行“選擇”“修改”“擴(kuò)展”，設(shè)置擴(kuò)展量為5像素，單擊確定按鈕第七步：選中“導(dǎo)航底圖”圖層，按Delete鍵，刪除選區(qū)中的圖形,文件廈）輪輯國(guó)）圖像Q）E1層（1）選擇$）濾鏡（!）視圖）窗口址）幫助（W自動(dòng)選擇圖層顯示變換控件占AdobePhotoshop按Ctrl+D取消選擇第八步：選取橫排文字工具，輸入文字“有限公司”，選取移動(dòng)工具，11Hosting=閤層1A耳1導(dǎo)坯底圖-不透明度;鎖定/中0調(diào)整好文字的位置，用鼠標(biāo)右鍵單擊文字層，從彈出

10、的菜單中選擇“刪格化文字”命令，將文字圖層轉(zhuǎn)化為普通圖層，雙擊圖層的縮略圖，打開(kāi)圖層樣式對(duì)話框，選擇“外發(fā)光”樣式，選擇混合模式為正常，選擇顏色為黑色。第九步：選擇漸變疊加樣式，單擊漸變色條，打開(kāi)漸變編輯器對(duì)話框，選中左側(cè)的色標(biāo)，設(shè)置一種顏色（R：255,G：166,B：30）,選中右側(cè)的色標(biāo)，設(shè)置一種顏色（R：255,G：210，B：81），單擊確定按鈕，返回到圖層樣式對(duì)話框，設(shè)置其他參數(shù)，完成圖層樣式的設(shè)置此時(shí)的文字產(chǎn)生了漸變的效果。顏色疊加點(diǎn)按并拖移可調(diào)整效果的位置。樣式角度（吵;縮放:漸變疊加濾鏡遼）視E窗口地）幫助電）圖案疊加描邊等高線紋理漸變疊加漸變混合選項(xiàng);默認(rèn)投影內(nèi)陰影回外發(fā)光

11、內(nèi)發(fā)光麗I度|1001%崎/護(hù)制w埴充：100%口問(wèn)岡文件0）編輯g）圖像圖層選擇濾鏡視圖窗口妣）幫助Q!）自動(dòng)選擇圖層顯示變換控件丁丄1匕二|耳弓蘭如打d未標(biāo)題T100*（有-限-公-司，RGB/8）100%|住|文檔:228.5燈559.9KEEEB正常匕不透明度；100色上IIHosting7AdobePhotoshop口回岡文件IJ編輯圖像令圖層a）選擇）濾鏡d）爐叵qq、a視圖巴窗口現(xiàn)）I半疹10px幫助迪I亙）匕樹(shù)a師樣式：1st顏色；錢(qián)i畫(huà)筆：d未標(biāo)題T篡100X（形狀1,RGB/8）口回岡第十步：按住Ctrl鍵，在圖層面板中單擊文字圖層的縮略圖，創(chuàng)建一個(gè)文字選區(qū)，執(zhí)行“選擇”“

12、修改”“擴(kuò)展”，設(shè)置擴(kuò)展量為3像素，單擊確定按鈕第十一步：選中“導(dǎo)航底圖”圖層，按Delete鍵，刪除選取中的圖形，按Ctrl+D，取消選擇。至此，文字效果制作完成。3、按鈕的制作第一步：在工具箱中設(shè)置前景色為白色，選取“圓角矩形”工具，在工具選項(xiàng)欄上設(shè)置半徑為10，繪制出圓角矩形週AdobePhotoshop第二步：執(zhí)行圖層刪格化形狀命令，將矢量蒙板圖層轉(zhuǎn)化為普通圖層，重新命名圖層為按鈕，在圖層面板中，將“按鈕”圖層調(diào)整到“導(dǎo)航底圖”圖層的下方第三步：雙擊“按鈕”圖層的縮略圖，打開(kāi)圖層樣式對(duì)話框，選擇漸變疊加樣式，單擊漸變色條，打開(kāi)漸變編輯器對(duì)話框，選中左側(cè)的色標(biāo)，設(shè)置R：80,G：83,B

13、：98,選中右側(cè)色標(biāo)，拖動(dòng)到中間的位置上，設(shè)置R：131,G：131,B：144,單擊確定按鈕，返回到圖層樣式對(duì)話框第四步：選擇投影樣式,設(shè)置好參數(shù)混合選項(xiàng);默認(rèn)投影濾鏡（I）視E窗口地）幫助電）內(nèi)陰影外發(fā)光內(nèi)發(fā)光等高線紋理顏色疊加回漸變疊加圖案疊加描邊點(diǎn)按并拖移可調(diào)整效果的位置。樣式不透明度（:角度:等高線;雜色（阻：-J投影結(jié)構(gòu)匚底圖$輕；弋記錄動(dòng)作n不透明度：100%I話埴充；100%風(fēng)公周新理徉式沁、I回預(yù)覽M取消第五步：選擇斜面和浮雕樣式，在高光模式中設(shè)置一種顏色R：255,G：253,B：221,設(shè)置其他參數(shù),單擊確定按鈕第六步：按住Ctrl鍵，單擊“按鈕”圖層的縮略圖，創(chuàng)建一個(gè)選

14、區(qū),選取矩形選框工具，按住Alt鍵，圈選按鈕下半部分的選區(qū)，縮小選第七步：在“按鈕”圖層的上方新建一個(gè)圖層，為選區(qū)填充上白色，設(shè)置圖層的混合模式為疊加，設(shè)置不透明度為50%，填充為50%JAdobePhotoshop編輯圖像d）圖層d）|亙罰口固I羽化:區(qū)選擇（S）濾鏡視圖.樣式：窗口g）幫助乏君寬度二i畫(huà)筆口問(wèn)岡詢未標(biāo)題T100*（圖層2,RGB/8）II有限公司第八步：按Ctrl+D取消選擇，選取橢圓選框工具，按住Shift鍵，在按鈕上繪制出一個(gè)正圓選區(qū)O論U一岀雖7泌帚期1=1導(dǎo)航底圈擇，雙擊該圖層的縮略圖，打開(kāi)圖層樣式對(duì)話框，選擇外發(fā)光樣式,設(shè)置參數(shù)滾動(dòng)所有窗口Photoshop混合選

15、項(xiàng):默認(rèn)投影/耳爐雖彳斜內(nèi)發(fā)光范圍(B):抖動(dòng)：2規(guī)合模式：正常不透明度(0)：雜色(阻：0外發(fā)光L結(jié)構(gòu)I實(shí)際像素|適合屏再|(zhì)打印尺寸等高線紋理光澤顏色疊加漸變疊加閣案疊加描邊方法(Q)；柔和擴(kuò)展(E):0大?。篒確定發(fā)光丈小|消除鋸齒財(cái)|不透明度：io。2j埴充：100%*第十步：選擇斜面和浮雕樣式，在高光模式設(shè)置顏色R：255，G口問(wèn)岡253,B：221,設(shè)置其他參數(shù)目AdobePhotoshop文件（D編輯圖像（I）圖層（1）選擇濾鏡（I）觀圖電）窗口址）幫助紗”滾動(dòng)所有窗口圖層樣式樣式a/A固口0DD100%卜步：選混合選項(xiàng):默認(rèn)投影內(nèi)陰影回外發(fā)光內(nèi)發(fā)光斜面和浮雕等高線n光澤顏色亜加漸

16、變疊加團(tuán)秦疊加描邊I-陰影角度（阻:高度:消除鋸齒（U光澤等高線:i底圖120度0使用全局光（30度超徑、史記錄F作、*不透明度：100%廠|高光模式（也：濾色二匚不透明度（0:J75埴?E：100%艮公司A斜面和浮雕結(jié)構(gòu)1%0像素0像素取消13問(wèn)岡確定新建樣式（翌）回預(yù)覽也）樣式；誦面方法（:平兀探度（”方向：上O下大小；j軟化（巳;J陰影複式（蝕：正片疊底日擇漸變疊加樣式，單擊漸變g條打開(kāi)漸變編對(duì)話1V，拖動(dòng)左側(cè)的色標(biāo)到中間的位置上，設(shè)置顏色R：55,G66,B：30,選擇右側(cè)的色標(biāo),設(shè)置R：255,G：210,B：81,設(shè)置其他參數(shù)漸變疊加圖案疊加描邊00訶irBo樣式混合選項(xiàng);默認(rèn)投影內(nèi)陰影回外發(fā)光內(nèi)發(fā)光回斜面和浮雕等高線紋理光澤顏色疊加點(diǎn)按并拖移可調(diào)整效果的位置漸變疊加廠漸變混合模式：正常不透明度（E）；漸變；卜I反向樣式（D；線性V回與E1層對(duì)齊縮敢:第十二步：選擇描邊樣式，輸入大小為1，選擇混合模式為