Adobe Photoshop How To's
Adobe Photoshop is one of the most popular graphics programs currently in use. One reason for this is the amazing number of tools and functions available, allowing the user to perform almost any required graphics task. One way to learn something about these tools and functions is to use them to create a project, since performed tasks are more readily remembered. This article will use several tools and functions in Photoshop to create a shiny round button for a web page.
Instructions
-
-
1
Open Photoshop. The select "File" and click "New." In the dialog box that now pops up make the pixel width and height whatever size you want your button to be on the web page. Since the button will go on the web, leave the resolution at 72. Now change the background to "Transparent" and click "OK."
-
2
Change the "Foreground" color to the color you want the button to be. Select the "Elliptical Shape" tool. Make sure that in the options at the top you choose "Fill." Now hold down the shift key and draw a circle on the canvas that leaves a slight border. Select "Layer" in the menu and click "Rasterize" shape.
-
-
3
Click on the "Blending Options" at the bottom of the "Layer" panel (the FX icon). Click on the main "Blending Options." In the dialog box that pops up, select "Drop Shadow" and "Bevel and Emboss" options offered.
Under the "Bevel and Emboss" tab, play with the "Softness" and light "Angle" settings until you like the look of the button. Then go to "Drop Shadow" and do "Short Shadow Drop" to the lower right.
-
4
Select the "Path" tab above the "Layer" panel and right-click on the path. Select "Stroke Path." In the dialog that opens, use the default brush setting.
-
5
Select "File" and click "Save for Web or Devices." Make the file type a GIF or a PNG, since these will preserve transparency and let your button sit directly on your webpage without any border. The click "Save." In the dialog that opens, name your button and select the location that you want to save it to. Then save your button.
-
1
References
Comments
-
grammastacie
Jun 19, 2010
very informative, thanks for the valuable insight. 5*