Better User Interfaces with Web 2.0 Icons

Adrian — Wed, 21 Oct 2009 06:19:21 +0000

If you like designing UI’s (User Interfaces), then you know you got to go above and beyond simple text links and massive amounts of POT- to clarify, that is short for Plain Old Text. Understanding your user and their interactions is the first step in designing a nice UI. Another important step is visually designing an interface that makes it easy to use. People like pictures and identify well with images. So for your next project, check out this site http://www.iconfinder.net/. You’”ll find some nice icons and hopefully some inspirations. Speaking of UI, they did a good job relating to the typical Internet user.

HOW-TO make a Web 2.0 glassy button using Photoshop

Adrian — Sun, 12 Jul 2009 10:18:29 +0000

You see those really cool buttons with that glass effect? If you have Vista or an iPhone, you have seen that some of your icons have this cool glassy effect to it. I am sure you think…”wow, this would be cool if I had this type of button on my website!”.

Well, here we are going to break down in a few easy steps how to do this in photoshop.

Warning: Some photoshop skills are required…

Step 1 Create the Button

Create a new image 400 x 150 pixels. Create a New Layer. Now, using the Rounded Rectangle Tool, create a new box 150 x 50 pixels. We are going to apply a black color (#000) to the shape/button. Now the next step is to apply different layer effects to this item.

Step 2 Layer Effects

Now we get to applying four different layer effects to get us closer to that cool looking glassy button.

Gradient Overlay

In the Layers menu, right click on the button layer and select Blending Options. Click on Gradient Overlay to turn it on. Select the gradient and change the color on the right side of the gradient to gray (#808080).

Inner Glow

With the Blending Options layer window still open, Click on Inner Glow to turn it on. Change the color of the glow to white (#ffffff). Change the opacity to 45% and the size of the glow to 8 pixels.

Stroke

With the Blending Options layer window still open, Click on Stroke to turn it on. Change the color of the stroke to gray (#808080) and the size of the stroke to 1 pixel.

Drop Shadow

With the Blending Options layer window still open, Click on Drop Shadow to turn it on. Change the distance to 0 pixels and the shadow to 8 pixels.

Step 3 Add Text

Using the Type Tool, create the button text. Align the width of the text box the length of the button and center. Again, In the Layers menu, right click on the text layer and select Blending Options. Click on Stroke to turn it on. Change the color of the stroke to black(#000) and the size of the stroke to 1 pixel.

Step 4 The Glare

Create a new empty layer on top of the text layer. Select white color and create new Rounded Rectangle (136 x 23 pixels) on the new layer . Again, In the Layers menu, right click on the new layer and select Blending Options. Turn on Blend Interior Effects as Group. Turn on Gradient Overlay and change the color of the left of the gradient to gray (#404040) and click Ok. Change the blending mode of the new layer to Screen and Opacity to 90%.

Your Done!

You now have a cool looking glassy icon! Of course, your going to want to use different colors…we used black and gray. Adjust to your requirements and have fun .

TECKpert » Graphic Design