In this Photoshop tutorial, I am going to walk you through 5 different tips which I think define standard “Web 2.0” design principles. The tutorial will walk you through the creation of several website buttons, badges, glossy spheres, and finally 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 web 2.0 style 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 Web 2.0 button 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 3^rd 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 Web 2.0 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 2^nd 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 #3: Web
2.0 Badges Are Still Sexy

Despite the Web 2.0 design trends having been around for years, they are still modern and not at all out of style. Badges are another staple of this design paradigm, so let’s explore how to quickly create one. To start out, let’s use the Custom Shape tool.

Let’s create a layer with our custom shape:

We should color it light yellow, manila almost. Remember, you can use whatever color scheme you want.

Let’s add a Stroke to our badge, size 3, with a darker orange.

Next, we’re going to add an Inner Shadow, use these settings:

Next, we’re going to add a Web 2.0 glossy look to our badge. To do that, first let’s duplicate our custom shape layer. After that, right click on the duplicated layer, click on “Convert to Smart Object” then right click again and select “Rasterize Layer”.

Now select the Elliptical Marquee Tool, we’re going to use it to delete most of our duplicated layer.

Select the bottom right of our duplicated layer as pictured below. Once you’ve done that, goto the Select menu and then click Inverse.

Now hit the DELETE button on your keyboard. Your layer should look like this:

Let’s make this layer stand out now by tweaking it’s Blending Options. We’re going to add a Gradient Overlay with the following settings:

With the gradient applied, it’s time to move onto an Outer Glow. We’re going to overboard with this and make the size of the glow 92px.

Finally, let’s change the opacity of the entire layer to 56%

Add some text that says Beta and we’re done:

Tip #4: Glossy Spheres Are Easy to Make & Look Great

Like badges, glossy spheres are common but look great. We’re going to make one by using the Ellipse Tool and making an orange circle (hold shift down while creating your ellipse to make a perfect circle.) Once your circle is created, let’s add an Inner Shadow. Use these settings, paying attention to the size at 59px:

Next we’re going to add a Gradient Overlay with these settings:

Now for an Inner Glow:

With the foundation done, we can now work on the glossy effect. To do that, we’re going to add a new layer with the Ellipse Tool. This time, we’re going to make an oval, as pictured:

To make the oval align correctly with our underlying circle, let’s use the Warp tool to move the top of the oval slightly. The Warp tool is available from Edit > Transform > Warp

We’re going to add a Gradient Overlay to this layer now, to give it the look of a glossy shine. Use these settings, noting the angle:

]

Let’s duplicate that oval layer. Once duplicated, immediately right click on the layer, choose Convert to Smart Object, and then right click on the layer again and choose Rasterize. Once rasterized, hit CTRL + T and invert the oval as picture below. Move it the bottom and resize it so that it is much smaller than the original:

Now decrease the opacity to 47% and add your text to finish the glossy button!

Here’s the final results:

Tip #5: Last But Not Least, Reflections!

What roundup of Web 2.0 tips would be complete without a tutorial on creating reflections? Seriously, along with stripes, gradients, and badges, nothing says “Web 2.0” 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:

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!

63 Under

Abrigo

Baney Design

C C Caleb

Champion Sound

Citrus SEO

Colour Pixel

Cubicle Ninjas

Daddy Design

Derby Kidz Talk

Mountain Lake Church

Paulo Vitor

Sketchen

Social Signal

Sprinkle Penny

Truskawka

Wanna Burger

Yes Insurance

If you need good hosting for you website check out McKremie.

Base 6

Breeze

Bug World

Cocorino

Dot Case

Drop Bags

Emotions

Forty Agency

Frexy

Gisele Jaquenod

Green Globe

Hasan Yalcin

Le Moulin de Sauvage

Lifetree Creative

Sunrise Design

Ann Designers

Ballpark

Bartelme Designs

Blue Bonnet Cafe

Campaign Monitor

Childrens Dental

Dezignus

El Pescadito

Envira Media

Get Me fast

Girl Scouts of Middle Tennessee

Global Creative Designs

Goplan 2.0

Lynnterpretation

Memigo Memory

Pixel House

Quinns Reef

Sohtanka

The Man in Blue

Titofelix

687 kerry who’s favourite song is ABC by The Jacskon 5

563 George who’s favourite song is Firestarter by The Prodigy

104 Thomas who’s favourite song is Bat out of hell by Meatloaf

492 Harry who’s favourite song is American Idiot by Greenday

275 Alex who’s favourite song is Thriller by Michael Jackson

All the winners have been e-mailed. If you didn’t win thanks for entering and watch out for future competitions we will be running!

Sites will be added everyday so you should subscribe to the RSS for your daily fix of inspiration.

Blood

Coal March Productions

Gorilla Coffee

Impluse Development

MetroStation

Nextgenetix Media

Nitro Circus

Northern Classics

Nuevo Aurich

Pritt Pro Sport

Red Relevant

Revolution Driving Tuition

Rocky Creek Winery

Simon Wiffen

Sonze

Stampede Design

The Autumn File

The Rockin Horse

Too Much Tweet

Webdesigner Depot