Mar 06 2009
Simple and Easy Steps in Creating Web 2.0 Buttons
These days, Web 2.0 style has become very popular among a number of web sites. Every single day, a lot of web sites use attention-grabbing images and very interesting things to appear in the Network. Since there are by no means any standards in creating any of the Web 2.0 elements, thus, many people are inclined to make use of the special buttons also known as Aqua buttons.
The importance of using Web 2.0 buttons
Creating these buttons for additional web effects may seem difficult to you; however, with a lot of new discoveries in the computer technology, you may not need to become a professional web designer to be able to create a simple one.
A lot of sites have even posted numerous tutorials in creating web 2.0 elements, buttons included so that all of us could create these things to make our site more popular. Nowadays, it’s an added bonus for a web site with a great layout and a few simple touches of artistic effects. Not only do people look for sites that contain important content but they also take notice of the site’s appearance. Thus, this is where these Web 2.0 elements come in. Buttons are one of these special effects that can add a great deal of appearance as well as importance to your web site.
Steps in creating Web 2.0 buttons
With the help of an Adobe Photoshop, you could easily create a Web 2.0 button. Here are a few simple and easy steps on how to make a Web 2.0 button:
1. Go to the Adobe Photoshop and create a new document for the Web 2.0 button.
2. Construct the button’s size and shape out of your preference. Since most Web 2.0 buttons are rounded
rectangle, you might as well use this shape using the Rounded Rectangle tool on the toolbar.
3. Right click on the rectangle layer on the Layer’s palette and with the Photoshop’s blending options, it
enables you to blend the button’s colors.
4. Go to the Gradient Overlay and set the effect parameters.
5. Set the button’s Inner Glow effect preferences.
6. Once you are satisfied with the result, construct a rectangle using the tool on the Rounded Rectangle as it
will be used as a button glare.
7. Right click the layer with “glare” and choose the Rastesize Layer.
8. Click the edit button located on the Quick Mask Mode on the toolbar.
9. Then, make a gradient using the Gradient Tool and see if you’ll like the effect.
10. After you have exited the Quick Mask Mode, go to the selection area and click the delete button.
11. Add the layer with your text and icon on it. Set then the parameters of the Drop Shadow effect. Now, you have your very own Web 2.0 button. You can add or change any of the effects of your button to create more buttons.
Adding Web 2.0 buttons on your web site
Now that you know now how to create these buttons, adding them to your web pages is very simple. It only takes a few seconds before you can see their full effects on your web pages. With these buttons, they will allow users to manage your web pages in a simple way. Putting Web 2.0 buttons on one’s site is the latest trend on the online marketplace.
These colorful and helpful tools will certainly attract more visitors to visit your site regularly. Today, you
can’t really have a Web 2.0 web site if you don’t use buttons and other Web 2.0 elements.
Here is where this lesson ends for today. We really hope you enjoyed this lesson too.
You will receive the next lesson in 7 days. Next week’s lesson will have the following title:
“Icons of Web 2.0 and How to Create Them”
Copyright(C) 2009 by John Delavera & Reimund Lube
