Making website homepage with Photoshop (4): Making navigation menu Source: xuexin.com Xue Xin
The navigation menu occupies a very important position in the homepage. It is used to lead visitors to find the pages they need. So generally speaking, web designers usually spend a lot of energy on the design of navigation menus, and here we just give a simple example to illustrate.
1. Use Dreamweaver to open the web page. When you click the mouse, you can see the completed slicing of the navigation bar. What we want to create now is the flip effect when the mouse moves up, as shown in Figure 1-4-1. Show.
Figure 1-4-1
2. Find the directory where you store the sliced images, usually the current directory of the web page or a directory named “images”. Copy an “Entertainment” slice and open it with Photoshop, as shown in Figure 1-4-2.
Figure 1- 4-2
3. Use the “Move Tool” to select the brackets and move them to the left or right respectively to make the distance between the brackets and the text larger. This operation can achieve the effect of the brackets automatically opening left and right when the mouse moves over the button, as shown in Figure 1-4-3.
Figure 1-4-3
4. Open Dreamweaver, select the “Entertainment” slice on the navigation bar we designed and delete it, and execute the “Insert Mouse Over Image” command, as shown in Figure 1-4-4.
Figure 1- 4-4
5. In this dialog box, set the original image as the original “Entertainment” slice image, and the image passed by the mouse will be the copied and modified “Entertainment” slice image after the brackets. Of course, you can also You can add your own link, as shown in Figure 1-4-5.
Figure 1- 4-5
<!–Collectio
微信扫一扫打赏
支付宝扫一扫打赏
