制作網頁按鈕

  • 2019-12-17 15:23:37
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://www.iy5y368.cn

在Photoshop中制作網頁按鈕,一般可以按如此步驟進行操作。

【操作步驟】

第1步,在網頁設計時,可用Photoshop中繪制出按鈕形狀,如矩形、圓形、橢圓或多邊形。繪制按鈕形狀,可以使用Photoshop提供的形狀工具;如果是繪制不規(guī)則的形狀,則可使用【鋼筆工具】、【刷子工具】和【鉛筆工具】,再用【自由變形工具】和【更改區(qū)域形狀工具】進行調整。

第2步,利用【圖層樣式】對話框對按鈕對象進行處理。例如,給按鈕填充漸變顏色,或者填入一些底紋效果等。

第3步,給按鈕添加立體效果,使其一看就是一個按鈕,此時可以使用【樣式】面板為按鈕添加一些樣式效果,使按鈕具有立體感。當然也可以使用其他效果。

第4步,進行按鈕形狀的編輯,最后給按鈕命名。這樣就完成了網頁按鈕的制作。懸停按鈕是一組按鈕的組合,它在網頁中有多種顯示狀態(tài)。在Photoshop中制作懸停按鈕的操作步驟如下。

【操作步驟】

第1步,新建文檔,在【圖層】面板中新建圖層1,使用圖形工具繪制一個圓角矩形,填充顏色指定。

第2步,選擇【窗口】|【樣式】命令,打開【樣式】面板,從中選擇一款樣式,單擊為當前背景圖層進行應用,也可以自己利用【圖層樣式】對話框自定義設計。

第3步,重命名“圖層1”為“正?!?,然后按Ctrl+J快捷鍵復制該圖層,命名為“移過”。為該圖層應用“投影”效果,設置保持默認值即可,設置【不透明度】為50%,降低陰影度。

第4步,復制“移過”圖層,并命名為“按下”,雙擊圖層縮略圖,在打開的【圖層樣式】對話框中修改浮雕設置參數(shù),完成鼠標按下時按鈕的效果。

用戶還可以設計更多的變化。例如,可以將鼠標指針移過狀態(tài)設成一個文字發(fā)光效果。這樣當鼠標指針移到按鈕上時,就會出現(xiàn)文字發(fā)光的效果??傊?,只要能夠制作出懸停按鈕的3種狀態(tài),懸停按鈕就算制作成功了,即使只是一個簡單的顏色變換或是位置的移動也可以。

第5步,完成3種不同狀態(tài)的背景樣式,最后使用【文本工具】輸入按鈕文本,選擇【圖像】|【裁切】命令,打開【裁切】對話框,裁切掉多余的區(qū)域。

第6步,隱藏“背景”圖層,僅顯示“正?!眻D層和“面對面”文字圖層,選擇【文件】|【存儲為Web所用格式】命令,在打開的【存儲為Web所用格式】對話框中單擊【存儲】按鈕即可。

第7步,以同樣的方式輸出鼠標移過和鼠標按下時的按鈕狀態(tài)圖,最后效果如圖所示。

81b553a98c945bab9c956d7d9df1d092.jpg

制作背景圖像

如何才能快速地制作一張美觀的背景圖像呢?最快的方法就是使用Photoshop進行操作,下面以如何編輯漸變背景圖像為例介紹背景圖像的制作方法。

【操作步驟】

第1步,啟動Photoshop,新建一個高為600像素,寬為1像素的文檔。

第2步,在工具箱中選擇【漸變工具】,在工具選項欄中選擇填充類型為“線性”漸變。設置漸變顏色從白色到亮藍色(#00cbff)。

第3步,在編輯窗口中從上向下拖拉,應用漸變填充。

第4步,將完成的漸變圖像最優(yōu)化,并輸出為GIF格式的文件,即可將此背景圖像應用到網頁中。

注意:在網頁設計時,背景圖像的整體色調都不宜過深。應選用淡色,以便突出前景文字的內容。不得已使用深色背景時,前景內容(如文字)就應選用淡色調。

當前文章標題:制作網頁按鈕

當前URL:http://www.iy5y368.cn/news/wzzz/3144.html

上一篇:制作標題文字

下一篇:在網頁中插入背景圖像

網站建設、網絡營銷咨詢專線:181-8386-5875(點擊可一鍵撥號)