Tips Make Modern Web 2.0 Buttons, Text, Badges & additional In Photoshop CS4
In this Photoshop tutorial, I am going to walk you through 5 different tips which I think define standard Tips Make Modern Web 2.0 Buttons principles. The tutorial can walk you thru the creation of many web site buttons, badges, shiny spheres, and eventually the classic technique of reflections. Please let us know what you think of our Web 2.0 buttons Photoshop tutorial and thanks for stopping by.
Tip #1:Gradients Are the Key To Web 2.0 Buttons
In my opinion, it is impossible to create Tips Make Modern Web 2.0 Buttons without using gradients. Gradients are one of the defining characteristics of web 2.0 design style. So for our first tip, I’m going to explore a couple of the standard gradient techniques that produce web 2.0 buttons. Remember, feel free to use your own color scheme, the colors provided are not set in stone, and are open to experimentation.
First, let’s create a new document. I’m going to make mine 1500px X 1500px, but that’s only because I am going to create all 5 web 2.0 Photoshop tips in one PSD file.
After you’ve created your document, we’re going to work with the Rounded Rectangle Tool, since rounded corners are another staple of web 2.0 design.
After selecting the Rounded Rectangle Tool, we’re going to set our Radius in the toolbar to 15px.
Now that we’ve set the Radius of our rounded corners, let’s go to our canvas and create our first button. My foreground color is a light blue, meaning the button I am creating is going to be light blue. You should make sure you change your color to light blue as well before creating the button.
When the button has been created, we’re going to be working with the Blending Options of that layer. This is an area we are going to visit frequently throughout all 5 Web 2.0 Photoshop tips. To access a layer’s Blending Options, simply pull up the Layer’s bar, then right click on the layer you wish to blend and select Blending Options from the menu.
Once we’re inside the Blending Options for our button, it’s time to apply a gradient. We do this by clicking the check box that says: “Gradient Overlay”. On the right side of the Blending Options window, you should see the following Gradient Overlay settings screen. Let’s set the opacity to 50%
With our opacity set, let’s modify the gradient itself to meet our needs. To edit a gradient, click directly on the Gradient picture inside the Gradient Overlay settings box . Now click just outside the gradient picture directly in the center, at the bottom edge. This will create a new color in the gradient. Set it to light blue, and adjust until your settings look similar to this:
Now that our new gradient applied, the last thing we need to do to finish our first Tips Make Modern Web 2.0 Buttons is to put a Stroke (which is a line surrounding the object.) Let’s make the stroke size 2px and leave the color as black.
Since our first button is created and out of the way, let’s create a new shape to illustrate another gradient method common in Web 2.0 style buttons. Create a new rounded rectangle below your first button, and color it light green.
Now just like with our last button, let’s open up this layer’s Blending Options, apply a Gradient Overlay, edit the gradient, and create the following settings, noting the diamond on the bottom right side is set to 5%.
Moving on, let’s create a 3rd button. This button will continue with the progress we’ve made on the last two buttons, but we’ll add an Inner Glow blending effect, which is another common Tips Make Modern Web 2.0 Buttons Photoshop trick. We’ll make this button orange, and use the following gradient to start it out
To create an Inner Glow, simply check the Inner Glow checkbox. Change the color to a light orange/pink and change the Blend Mode to Screen.
Here’s a preview of how your button should look with these settings:
Let’s create a final button to illustrate Web 2.0 gradients in Photoshop. Remember that these four basic gradient types can be reused over and over again using different color schemes. That’s really the point of this first Photoshop tutorial, to give you the four basic gradients used in Web 2.0 design. Our final gradient is very common, being very standard. What makes it appealing is the fact that the start color is very similar to the end color, meaning it’s a milder gradient than most. Here’s the gradients settings:
With all 4 of our standard web 2.0 gradients done, here’s what our Photoshop canvas looks like:
Tip #2: Adding Stripes for More Web 2.0 Goodness
Our first tip was about gradients, which I said is one of the most defining characteristics of Web 2.0 Photoshop design. However, stripes are perhaps the 2nd most defining Web 2.0 style, so let’s talk about creating them and implementing them with our previous buttons.
To do that, first let’s create a new document with square dimensions. My canvas is 500×500 pixels.
Next, let’s create a new Rectangle, using the Rectangle Tool. We’re going to create a big line across the center of our canvas. This line will serve as our stripe pattern.
Once you’ve created your rectangle, hit CTRL+T or goto Edit > Transform > Rotate to rotate the rectangle. We want to position it exactly in the middle, so that when we create a repeating pattern from this picture, it lines up perfectly.
Next we’re going to need to put two copies of our rectangle on the top left and bottom right respectively, again so that we make this a pattern, it will repeat seamlessly. To do that, I am going to create 4 guides. To create guides, first make sure that the Ruler is visible (goto View and make sure there is a checkmark next to Rulers) and also insure that guides are visible (goto View > Show and make sure Guides are checked off.) After you’re sure that guides and the Ruler are displayed, the way you create a new guide is to click and drag from the ruler, to your document, like so:
You’ll notice that my four guides are setup to tell me where the current rectangle goes off screen. This is because we’ll need to put two copies of the rectangle onto our canvas as I mentioned earlier. Right click on your Rectangle layer and click Duplicate Layer. Repeat. Now drag them into position as indicated in the screenshot below. Once both duplicated layers are position correctly, goto the Layer menu and select Flatten Image.
Now that the image has been flattened, it’s time to make our pattern. We do that by selecting the entire canvas (CTRL + A) With the entire canvas selected, goto Edit > Define Pattern… and name your pattern.
With our custom stripe pattern defined, we’re ready to add them to our previous buttons from earlier. Select all the layers of your buttons and right click, select Duplicate Layers. Now choose the Move Tool and drag the newly duplicated buttons to the right of the originals. To apply the pattern, right click on the Rounded Rectangle layer of your button, choose Blending Options, then check the box next to Pattern Overlay. Find your pattern in the drop down pattern selection screen, and change your opacity to 6%.
Here’s what our buttons look like now with the stripes applied. As you can see, they are very “Web 2.0” looking at this point.
Tip #5: Last But Not Least, Reflections!
What roundup of Tips Make Modern Web 2.0 Buttons would be complete without a tutorial on creating reflections? Seriously, along with stripes, gradients, and badges, nothing says “Tips Make Modern Web 2.0 Buttons” like an image with a reflection. So let’s grab a duplicate of one of our buttons from earlier, and give it a reflection. We’ll also add an arrow that tells web users what to click on… namely your button!
Once you’ve duplicated one of your buttons from earlier, let’s use the Customer Shape Tool and select an arrow:
Dragging it over our button, we end up with something like this:
Since this is web 2.0 design, I’m going to style the arrow with a gradient… go figure.
Now to make a reflection, I am going to duplicate everything I wish to reflect. Once they are duplicated I am going to select all the reflection layers together at the same time, and then right click and select Convert to Smart Object, then right click on the newly created smart object layer and select Rasterize. With the layer rasterized, I will hit CTRL + T to transform the layer, and will again invert it by dragging down the top center box until I get a screen that looks like this:
Now to line up the reflections Tips Make Modern Web 2.0 Buttons :
We want the reflection to look angled, and will use Edit > Transform > Distort to accomplish this.
This is how we want our distort transformation to look:
Let’s delete anything that overlaps. We’ll select it then hit the DELETE key.
In order to simulate a reflection, we’ll use a standard black and white gradient over the reflection layer, only changing one of the positions as indicated below:
Since our background is white, we will use Lighten on our gradient.
Finally, we turn down the opacity of the entire layer to 37%, giving us the following final image:
So there you have it! Five web 2.0 tips that are still useful even after all these years. Have questions, comments, or concerns. Let us know, we’d love to hear from you. Thanks for reading and have a great life!