Creating Web 2.0 Graphics using Photoshop.
This article was published on Oct 31 2007.
Ok so 3 days ago I couldn’t create a web graphic to save my life, but today I am going to teach you how to make basic images that will save your web design.
This is the image that we will recreate. Before we start, I just want to let you know that I am using Photoshop CS2.
Step 1.
Open a new document with the horizontal and vertical dimensions you need for your document. I used 370px by 200px and a transparent background for the back. Now that you have a clear canvas, head over to the toolbar and select the rounded corner rectangle.
* I didn’t go to the edges of the canvas, but you will need an exact measurement with your graphics.
Step 2.
Before you start placing numerous rounded corner boxes all over, you have to pick a color. In the toolbar select the first color box and when you click it a screen will come up and ask you for a color.
After you select a color to use, its time to place the rounded rectangle in the canvas.
When you finish you will have a graphic like the one above. At the present time, the image looks like crap and it has no style. Unless you want to make a site that looks like it came from the 20th century, you have to add taste before you put it on.
Step 3.
Head over to the layers window and on the right select the little black flash icon.
Once you click this icon, a bigger window with more options will apear. Head over to Gradient Overlay which is on the left. When you click on it the gradient options will display on the right and all you have to do is fix the numbers to match the style of graphic that you want. For this project we will use the
- Blend Mode Normal.
- Opacity 55%
- Gradient Black to White.
- Style Linear, check align with layer
- Angle 90 Degrees
- Scale 150%
There you go, you are now finished, you can either add text if you want or “save for web” and ad it to your site as a button.