Silky Pixel

Visualization techniques & annoyances with 3DS Max & Creative Suite

• Stream
• About

Tutorial: How to Make a Shiny GUI Icon in Photoshop

January 11th, 2008

This icon is designed in the popular shiny style that we all know and love, possibly hate. It’s heavily influenced by Apple’s iPhone icon and GUI environment.

The icon shown here is for a “settings” control, hence the gear-clock, and muted colors. It’s shown in both the off and on state.

• Download the .psd

There are two main elements that make up this image; the icon button, and the icon graphic. The icon button is the common element that gives all the icons in a GUI a consistent look -think of it as the background. The icon graphic is the part that visually describes the purpose of the icon. This tutorial is about the icon background.

The icon graphic shown here was done in 3ds max. It’s not finished, but will work for now -it’s more of a placeholder at the moment. Any graphic will do. Let me know if you’d like to see a tutorial on this.

Note: I’m going to assume you have a general knowledge of Adobe Photoshop. If you have any questions or need something clarified, please let me know.

This was done with Adobe Photoshop CS2.

Step 1 - Icon Base

Create a new layer with a transparent background. Fill it in black or white (the color will change later) leaving some transparent space around the box.

I rounded off the corners in this example using an old fashioned technique that I’ll have to explain later. For now, try using the “Rounded Rectangle Tool” in the toolbar, or do a quick search for ’rounded corners in photoshop’.

Step 2 - Icon Base Color

Double-click the layer to bring up the Layer Styles, and check “Gradient Overlay”. This is where you pick the main color of the icon. Choose a soft, gradual gradation, darker on the top than the bottom. The “Scale” slider is a great way to fine-tune this -the softer the better, imo.

There are many other ways to fill the base color, but I like to use the styles box because it offers much more flexibility and it’s easy to go back and tweak. The other great thing about styles is you can copy and paste them, which is perfect for keeping consistency across multiple buttons.

Step 3 - Edge Depth

Check “Inner Shadow”. Study the settings I used for a guideline. This is starts to give the outer edge of the icon some depth. It is very subtle, but lots of subtle elements put together is what makes a piece stand out.

Step 4 - Drop Shadow

Another subtle element; check “Drop Shadow”. This will help the icon look like it belongs with whatever background it is put against.

Note: The effect will only work if you save out the icon in an image format that supports transparency.

Step 5 - Horizontal Line Details

Create a new layer and fill [Edit | Fill...] it with a custom pattern of a 2 x 1 pixel pattern. Make sure one pixel is transparent and the other one is white. Adjust the opacity and blending options to your liking.

I will do a separate mini-tutorial in the future to explain defining custom patterns -for now, refer to the Help manual.

Step 6 - Create a selection to mask the lines

Create a selection [CTRL + Click the layer] from the base layer (Layer 1 shown here; shame on me for not renaming the layers -it’s important to keep your workspace organized). Now “Feather” the selection [Select | Feather...] and give it a generous radius. The actual value will depend on the resolution you are creating this image at; use the screenshot below as a reference.

Step 7 - Masking the lines

Simply click the “Add layer mask” icon at the bottom of the ‘Layers window’

Step 8 - Adding depth

Adding some depth inside the button will help the icon graphic stand out more against the button’s background. Create a selection from the “Lines layer mask”, and fill it with black on a new layer. Don’t worry about the color, you’ll take care of that in the Layer Styles.

Double-click this layer to bring up the Layer Styles Box. Check ‘Color Overlay’, and give it just a bit of color. Don’t be afraid to mess around with the opacity and blending modes - These can often add unexpected but desirable results.

Step 9 - Adding the icon graphic

Drag the icon graphic onto your icon button. This icon graphic should be created separately, in a separate file. I created this in 3ds max, but use whatever graphic software you can do the most damage with.

Note: The icon graphic shown here is a work in progress. This is a good point of why I like to keep the icon graphic as an entirely separate file from the button itself -it enables the project to keep moving forward while still allowing tweaks or revisions of what the button represents.

Add a soft drop shadow (and any other effect) to the icon graphic in the ‘Layer Styles box’. Now, if the icon graphic needs to be updated, drag it into this icon button file, and copy & paste the layer style from the old icon graphic layer.

Step 10: Polish and Shine

There are lots of different ways to do this part, but here is how I do it: Make a copy of the base layer, clear the layer styles, and drag it to the top.

Be sure to put the “Fill” at 0%. This is right under “Opacity” at the top of the layers panel.

Check “Gradient Overlay” and select a gradient that goes from white to transparent. Make sure the white is at the top. Name the layer.

Note: By setting the “Fill” at 0%, it displays the Layer Styles on that layer without showing the layer itself. We want to see the White/Transparent gradient layer style, but not the actual layer.

Make a selection of about 2/3 of the entire image, and click the ‘mask’ button.

Unlink the Shine layer from its layer mask, and click ONCE on the layer mask (in the layers panel) to make sure it is selected. Now you want to distort the Shine a bit to give it some depth. I did this with Photoshop CS2 by going to [Edit | Transform | Warp...] and adjusting the handles. I don’t believe “Warp” is availble in older versions of Photoshop, however, the effect can still be achieved using other distortion methods or filters. You should experiment anyway, give the shine your own unique look.

Thats it! The only thing left to do is make an “On” state for this button.

Be sure to go back and tweak all those Layer Styles to fine tune the look. I’ve found its a great habit to always make your design decisions as non-linear as possible. Basically, make sure you can always go back and make adjustments if need be -whether its a layer adjustment in Photoshop or a modifier stack in 3d Studio. Keeping your projects flexible will save time and headaches in the long run!

Step 11 - Turn it on

Make a copy of the Depth layer, and drag it underneath the Lines layer. Adjust the ‘Color Overlay’ in the Layer Styles box to a bright red, and set the Blending Mode to ‘Color Dodge’.

Note: What is shown below is another way to do it, but doesn’t offer the flexibility of using the Layer Styles to color the glow. What’s shown is; loading the selection from the ‘Depth’ layer, creating a new layer filling it with red, and setting the layer Blending Mode to ‘Color Dodge’. Again, it accomplishes the same thing as described above, but its not as easy to tweak.

Now make a copy of your icon graphic (the gear). Double click it to bring up the Layer Styles box and check ‘Color Overlay’. Pick a light red color, and set the Blending Mode to ‘Screen’.

Next, check ‘Drop Shadow’ and set the Blending Mode to ‘Color Burn’. Tweak as necessary.

And there she is. Label the two layers that make the image glow to “On” so you know what to hide when your saving it out as the different button states.

Leave any questions in the comments.

Tutorials | Comments | Trackback

•  
•  

Categories

• Annoyances
• Techniques
• Theater Renders
• Tutorials
• Uncategorized

Blogroll

• Mental Ray Community
• My Portfolio
• Pixeloo

Enter your search terms

Submit search form

Silky Pixel powered by WordPress. Entries (RSS) and Comments (RSS)