Web Design – Photoshop Buttons


When it comes to designing a really nice web 2.0 looking site, one of the fundamental elements are the use and presence of nice shiny/glossy link buttons in Photoshop. It adds more detail and visual presentation quality to the site. Such as a “Get Started” Button for a site wanting customers to sign up for something.

Example:

The button looks very clean with a nice glossy look. The text contrasts nicely against the button. So what Photoshop effects were used for this button? Check it out:

Here we see the effects applied to both the button, and the text. The text simple has a drop shadow effect with distance and size set to 1 and spread set to 0. This helps give the text a bit more depth. For the button, btn layer, the fill has just been set to a dark gray, which doesn’t matter in this scenario because the light blue to dark blue gradient overlays the fill to create that nice blue blending on the button with some shadows and the darker 1px stroke around the whole thing.

I should mention that typically the buttons with rounded corners use a 2-3 px radius, to give just a slight rounding. Its not uncommon to up some more, but there a point where it starts to look a bit goofy/cartoon-ish with such rounded corners. I guess its really just preference.

That’s one method used to create buttons, but there are other methods. The next one I’ll show you is my personal favorite because it allows you to easily change the colors without messing with the actual gradient. Check it out:

Slightly different from the button above, but these use the same general effects:

With this method, we use the fill color that we want our button to be (teal color in this case) and then apply a White to Transparent Gradient over it. This allows us to go in and simply change the fill anytime we want to change the color of the button. Then all that’s left is to play with the Gradient opacity to achieve the look you want. The text in this method is a bit different in that we apply a few different colors here. I use a darker tone that match my stroke color, then do an even darker inner shadow, blend multiply, and a really really light tone for the drop shadow. It creates a nice embedded effect.

And to make the read button, you just duplicate the layers and change the colors around to the desired like such:

So these are just a couple of ways to create some really nice Web 2.0 looking buttons. Other designers like to play with the bevel and emboss options to create a similar look. It really just depends on personal preference and what your going for. Til next time.

-We make IT work-

Advertisements

Tags: , ,

About Jacob

As a college student currently working full time at an IT company, I am beginning to discover how overrated the classroom can be. As a marketing major, I have found resources online to be far superior to some of the things school has taught me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: