當前位置:首頁>ps實例教程>ps網頁設計>網頁模板>教程內容

Photoshop制作網站首頁(4):制作導航菜單

來源:不詳 作者:佚名 學習:787人次
Photoshop制作網站首頁(4):制作導航菜單來源:xuexin.com 薛欣
導航菜單在首頁中占有非常重要的地位,它用于引領訪問者找到需要的頁面。所以一般來說,網頁設計師通常將大量的精力用在導航菜單的設計上,而這里我們只是舉個簡單的例子來說明。
1. 用Dreamweaver 打開網頁,當鼠標單擊后,您可以看到導航欄已經完成的切片,我們現在要制作的是鼠標移上時的翻轉效果,如圖1-4-1 所示。



圖1-4-1

2. 找到您存儲切片圖像的目錄,一般是網頁當前目錄或是名為“images”的目錄。復制一個“娛樂”切片,并用Photoshop 打開,如圖1-4-2 所示。


圖1-4-2


3. 用“移動工具”選中括號,分別向左或向右移動,使括號離文字的距離變大。這樣的操作可實現鼠標移到按鈕上時,括號自動左右撐開的效果,如圖1-4-3 所示。



圖1-4-3
4. 打開Dreamweaver,在我們設計的導航欄上選擇“娛樂”切片并刪除,執(zhí)行插入“鼠標經過圖像”命令,如圖1-4-4 所示。


圖1-4-4

5. 在該對話框中設置原始圖像為原來的“娛樂”切片圖像,而鼠標經過圖像為復制并修改括號后的“娛樂”切片圖像,當然您也可以加入自己的鏈接,如圖1-4-5 所示。


圖1-4-5

學習 · 提示

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

關注大神微博加入>>

網友求助,請回答!