Tutorial Lounge [Learn Step bu step]

Creating that Smooth Metal Texture and Layout for Widgets and UI objects

Posted: 10 Aug 2012 10:54 AM PDT

The smooth metal texture is a pretty popular design mainstay for user interface objects, widgets and other kinds of web or software objects. In fact, even printed materials are adopting this style to emphasize certain content and of course get readers engaged with the material.

In this design tutorial, we will teach you how you create that smooth metal texture for widgets, user interface objects and even for specific design elements in print media. The process is actually very easy using Adobe Photoshop, even if you are just a novice at it. Let us show you how you can do it yourself, step by step.

Step No. 1

Setting up the document properly is one of the first important things that you must do properly when creating textures and UI objects. You have to know the right dimensions and resolution for your image so that it looks great, but also loads up fast in whatever environment that image is needed. For our example, we have set our Adobe Photoshop settings with the values listed below. You can start with these if you want to create a large widget , UI object or layout section. (Of course you can customize the dimensions as needed)

Width: 800 pixels
Height: 600 pixels
Resolution: 72 ppi (for web), 300 ppi (for print)
Color Mode: RGB (for web), CMYK (for 4 color printing)

Step No. 2:

With a white background as a base, we will first draw the shape of our widget or UI object. Of course, the decision for the shape rests solely on you and what kind of widget, UI or section that you want to create. For our example, we will be using a rounded rectangle shape. Two in fact, one taller one and one wider one. We just use the rounded rectangle shape tool in Photoshop to create them. For now, we have used light grey color to get started with our smooth metal effect, but more effects will be added later.

Step No. 3:

Next, we merge these rounded rectangles. Just hold down the CTRL key and click on each of those layers in the layers panel. Then, right click on them to bring up their context menu. Select the option to "merge layers" to merge these two shapes. If you are asked about rasterizing the shapes, just press "OK".

Step No. 4:

Now, double click on this merged layer. This will bring up the layer styles and blending options window. This will allow us to add some great blending effects for our design. The first thing that you should enable is the "Inner Glow'. Just click on its checkbox at the left hand section. Then click on the name. This should let you see the Inner Glow settings. Set the properties with the values below.

Blend Mode: Normal
Color Box: BLACK (IMPORTANT!!)
Size: 10 px

Step No. 5:

Next, we click on "Inner Shadow". We will use this actually to add our highlights interestingly enough. Just click on this inner shadow option and set these properties and values.

Blend Mode: Color Dodge
Color: WHITE
Distance: 5px
Size: 5px

Step No. 6:

We should then get this nice effect where we have a sleeker looking section or structure.

Step No. 7:

However, it does not look smoothly metallic enough. So we go back to the layer styles window by double clicking on the layer once again. Notice that all your settings are still there. We then click on the option "gradient overlay". This allows you to add seamless color changes to the area of the layer or shape. We leave everything to default, EXCEPT the gradient color. We click on the gradient color box and then set the two colors from dark grey to a light grey (#252525 – #e1e1e1). This gives us that metallic color effect in the middle.

Step No. 8:

Finally, we click on the option for "Satin". Then we change the following settings.

Blend mode: Color Dodge
Color: WHITE
Opacity: 5%.

Step No. 9:

That finishes the initial smooth metal look. However, our widget or UI element is far from finished. For our example, we will add a display area and probably some "buttons". Our first move is with the display area. Our first move here is to use the rounded rectangle shape tool to add a "screen" of sorts in the center of our design. We color this a light red color for our theme.

Step No. 10:

Then, of course , we shall also add layer styles to this layer. The first layer style to add is an "inner shadow" effect. Use the following settings for its properties.

Size: 0px
Size: 25px

Step No. 11:

Then, click on the layer style "stroke". Here, just set the size to 2 pixels and use a black color to add a thin black outline to our screen section shape.

Step No. 12:

We also add the "inner glow" layer style. Once you check on this option, you should use the following settings for this effect style.

Opacity: 20%
Color: WHITE (pure white #ffffff)
Source: Center
Choke: 0
Size: 90px (may vary depending on how large your shape is)

Step No. 13:

Finally, we will also add a gradient overlay to this screen shape. Just choose the gradient overlay layer style and then choose two theme colors for the gradient colors. Also reduce its opacity to around 60%.

Step No. 14:

Great! After pressing OK in the layer styles window, we should have this interesting result.

Step No. 15:

Then, we use the ellipse tool to start creating the sleek screen effect. We add the white ellipse area on top of the screen, covering approximately half of it.

Step No. 16:

Rasterize this new shape by right clicking on it and then selecting the option "rasterize". This turns our vector shape into pixels. Then, hold down the CTRL key and click on the thumbnail of the shape of the screen. This will let you select the area of that screen layer.

Step No. 17:

We then press CTRL+SHIFT+I to invert our selection. Afterwards, we erase all the other white parts of the circle that is not covered by the area of the screen.

Step No. 18:

We then change the blend mode of this layer to "soft light". Afterwards, we also reduce its opacity to around 30%. This adds the sleek sheen on top of our screen section.

Step No. 19:

Now, we add the button elements or control elements. For our example, we are just going to use a round shape for the button. We create the shape using the ellipse tool.

Step No. 20:

We will now copy some layer styles. Right click on our ORIGINAL widget shape layer (not the screen). In the context menu that opens, select the option to "copy layer style".

Step No. 21:

Then, paste the layer style to our green button layer. To do this, right click on our green button layer and select the option "paste layer style".

Step No. 22:

Then, double click on our button layer and just remove the "gradient overlay" layer style in the options. This should remove the gray gradient in our button to reveal the green underneath.

Step No. 23:

We then just repeat the process for all the other buttons.

Step No. 24:

Finally, using the type tool, we add information in our screen area. In this case, we are just adding the date and time element, plus a title. Of course, depending on what kind of widget or UI interface you are creating this can vary. Here we used the Digital 7 and d3 digitalism font from dafont.com.

Step No. 25:

Congratulations! We have now finished our sample widget or UI design. You can use the same tricks and techniques to create your own styled widget in Adobe Photoshop. Good Luck!

Author’s Bio:

Julia Garner a graduate of Communication Arts in the University of Texas and has found her niche writing about marketing, advertising, branding, graphic design, and desktop publishing. She writes for PrintPlace.com and is a die-hard advocate for their well-made products like the easy-to-order brochure printing and richly printed postcards among others. Julia also enjoys playing the guitar, cooking and spending time with her family.