This article takes the Chinese version of Photoshop CS2 as an example. The steps for other versions of Photoshop may be slightly different. Let’s take a look at the final effect first.
The specific steps for
the final effect
are as follows.1. Start the Chinese version of Photoshop CS2, press Ctrl+N to open the "New" dialog box, make some settings as needed (the size should be able to accommodate the future navigation menu), and click the "OK" button to create a new document.
2. Click the "Create New Layer" button below the layer panel to create a new layer. Select the "Rounded Rectangle Tool" in the toolbox, set its radius to 15px in the options bar, and then draw a rounded rectangle as shown in Figure 1 on the new layer.
Figure 1
3. Now apply the following layer style to the above shape.
projection:
Figure 2
inner shadow:
Figure 3
Inner glow:
Figure 4
color overlay:
Figure 5
stroke:
in Figure 6
, the button effect shown in Figure 7 is obtained.
Figure 7
4. Now use the "Rounded Rectangle Tool" again, this time, draw a smaller white rounded rectangle above the button, as shown in Figure 8.
Figure 8
5. Set the blending mode of this layer to "Overlay" and set the opacity to 30%, you can get the button effect as shown in Figure 9.
Figure 9
6. Next copy these buttons and arrange them into a navigation menu and add the text, as shown in Figure 10.
Figure 10
7. Select the "Slice Tool" in the toolbox, open the "View" menu, and confirm that there is a check mark to the left of "Align". This will automatically align the slices to the edges and create more accurate slices. Use the "Slice Tool" to cut button by button, and each slice contains a button. The result is shown in Figure 11.
Figure 11
8. Now that the slicing has been done, you can now output it as an HTML file to prepare for subsequent web design. Select the menu command "File | Save for Web". In order to get the best image effect, use the settings shown in Figure 12. After setting, click the "Save" button.
Figure 12
9. In the "Save optimization results as" dialog box, select the location where the web page file is to be saved, enter the file name as shown in Figure 13, select the save type as "HTML and images (*.html)", and then click Click the "Save" button.
Figure 13
: This will result in an HTML page and an images folder, which contains button images.
Now you only need to copy the HTML code to other web pages to use it, but do not copy the header/body tags generated by Photoshop when copying.