Button Bar Icon Demo [demos]

This demo is for the item Button Bar for Rainmeter. If you are just browsing the demos page, it is suggested that you go check out the Button Bar page before continuing.

Jump to Creation Process [STEPS 1-13]

1.The Beginning // 2.Setting Guides // 3.Setting Guides // 4.Loading Source // 5.Importing Source // 6.Layer Name // 7.Duplication // 8.Duplication // 9.Layer Names // 10.Layer Style // 11.Dark Icon // 12.Dark Icon // 13.Light Icon

Jump to Saving Process [STEPS 14 & 15]

14.Flatten // 15.Saving

What you'll be making.

final-1 final-2

Creation Process

Step One: Beginning Your Adventure

Firstly, you have to create a file. You can do this with any icon proportion you like, as long as you maintain a 3:1 ratio. (The width is 3x larger than the height). Don't try this with ANY OTHER PROPORTION IF YOUR ICONS ARE SQUARE. For my tutorial, I'll be using a 32x32 icon size. Therefore, I must multiply the 32 by three (96) and set that as the width whilst leaving the height the same.


Step Two: Setting Your Guides 1

Now that you have your canvas size set to how you need it (3:1 ratio), it's time to set your guides. Set your first guide to the exact dimensions of your icon, so if your icons are 256x256, make sure your first guide is at 256! Since I used 32x32 icon dimensions, I'll be setting my FIRST guide at 32 px.


Step Three: Setting Your Guides 2

Set your second guide to DOUBLE your first guide. So if you set your first guide to 256, set your second guide to 512. Since I used a 32x32 icon dimension in my tutorial, I'll be setting my SECOND guide to 64 px.


It will look like three squares (IF YOU USED A SQUARE ICON SHAPE [1:1 ratio]).

Step Four: Loading Your Source

We'll be import the source icon. In my tutorial, I'll be working on a user icon, so I will use my user icon default. Open up your source icon.


Step Five: Importing Your Source

Import (copy+paste) your icon and scale it to a good fit. Make sure it does not touch the edges of the canvas or the guide if you want a drop shadow on your icon. Leave a nice space between your icon and your guides/edges. Make sure it is in the FIRST square.


Step Six: Naming the Layer

Rename your layer to ORIGINAL so you do not mix it up. Again, make sure that this icon is in the FIRST square.


Step Seven: Duplicating Your Source 1

Now duplicate your ORIGINAL layer. (Cmd+J for Mac, Ctrl+J for Win) and move it EXACTLY 32 px to the right (or whatever width your icon is).


Step Eight: Duplicating Your Source 2

Repeat step seven as I have done. It is essential that you make sure you move it EXACTLY 32 px (for a 96x32 px button) BOTH TIMES.


Step Nine: Naming Your Layers

Rename the icon layers just as I have done. The bottom layer should be ORIGINAL, the middle layer shoud be DARK, and the top layer should be LIGHT.


Step Ten: Setting Your Style

Apply your layer style (I used Token 32x32 by brsev in my tutorial) to ALL THREE LAYERS. Now they should all appear to be the same. On EACH layer, right click and select 'Rasterize Layer Style'. This will allow you to adjust the darkness/lightness of each layer.


Step Eleven: Active Icon (Dark) 1

Select the middle (DARK) layer, and go to Image > Adjustments > Brightness/Contrast.


Step Twelve: Active Icon (Dark) 2

Check 'Use Legacy' and set the brightness to -75. This way, it is noticably darker than the original. If you don't do it dark enough, it won't look that good.


Step Thirteen: Hover Icon (Light)

Select the top (LIGHT) layer, and go to Image > Adjustments > Brightness/Contrast again. Check 'Use Legacy' again, and set the brightness to +50. This will make it noticably brighter than the original. If it is not bright enough, the hover-over effect won't be as powerful.


Saving Process

Step Fourteen: Merging Your Layers

Right click on ANY layer, and select 'Merge Visible'. Now you should have one layer with three icons in it.


Step Fifteen: Saving Your File

Save your icon. Make sure you save it as a .PNG when you are ready to use it. Make sure you save a .PSD if you want to create more.


That's it. Now that you're done with your first icon, go out and create more!


Backgrounds are NOT required, but ARE recommended if you want to be able to distinguish your icons. I suggest adding a black background to all of your final images. In fact, just add a last layer, set it on the bottom, and fill it with a dark gray and save it. Easy.

follow me!twitterfacebookdeviantartlinkedindesigncrowd portfolio