How to Create a Custom Start Orb
Before I begin, keep in mind this is my first tutorial ever published to SevenForums, I hope it meets the requirements and all that jazz, and that somebody finds it at least mildly helpful.
Requirements and Tools
To begin with, you must have an image editing application, PhotoShop is one of the most powerful and widely known, but any application that works with bitmaps (BMP) and supports alpha trasparency layers will do just fine.
Warning
Be sure to check your DPI settings before you continue; DPI settings (Dots Per Inch) in Windows determine the size that everything on your desktop displays, making text and buttons larger without changing the screen resolution.
You can generally see what DPI you're using by the size of your current Start Orb and Taskbar, below is an example of the same resolution with three DPI settings:
However, if you're not sure and want to double check: Right click on your desktop and select Screen Resolution, in this windows, click the link labeled Make text and other items larger or smaller, as seen here:
The next page displayed will show your currently selected DPI setting:
Depending on your selected DPI, you will need to create a Start Orb using one of the following image sizes:
You can generally see what DPI you're using by the size of your current Start Orb and Taskbar, below is an example of the same resolution with three DPI settings:
However, if you're not sure and want to double check: Right click on your desktop and select Screen Resolution, in this windows, click the link labeled Make text and other items larger or smaller, as seen here:
The next page displayed will show your currently selected DPI setting:
Depending on your selected DPI, you will need to create a Start Orb using one of the following image sizes:
- 100% DPI - use 54 x 162px
- 125% DPI - use 66 x 198px
- 150% DPI - use 81 x 243px
The Start Orb
Create a new image with the following settings:
Note
* To fit the standard DPI Windows 7 Start Orb, the picture size must be 54x162.
* The 'Resolution' setting is an interesting one; 100% DPI in Windows is 96DPI, I haven't found any difference between using 72 and 96, but some may prefer to stick to the same DPI as Windows itself uses. This is entirely up to you. Just keep in mind the higher the DPI, the larger the file size will be.
* Leave the Color Mode as RBG with 8 bits per channel.
* The 'Resolution' setting is an interesting one; 100% DPI in Windows is 96DPI, I haven't found any difference between using 72 and 96, but some may prefer to stick to the same DPI as Windows itself uses. This is entirely up to you. Just keep in mind the higher the DPI, the larger the file size will be.
* Leave the Color Mode as RBG with 8 bits per channel.
With the new image window open, select the Fill tool and fill the background with black. At the same time, open the picture you want to use as the Start Orb next to it; as seen in the example below:
Note
In this example, I have also added guide lines to divide the image into three equal parts for my button states; first at 54px, and second at 108px.
The next step is to prepare the picture to be used as a Start Orb. Because we require transparency in the layer in order to calculate the alpha channel (explained later), we need the button you want to use without any colour or background behind it.
Select the button-to-be with whichever method you prefer, as seen below this is much easier when zoomed in to a decent level:
Note
Rather select too much than too little in this step, if you end up with a little bit extra background it can be trimmed later.
With your button-to-be selected, copy the selection to a new layer and hide the old layer. The keyboard shortcut ctrl + J is the quickest way to do this; this will take the selected area of the current layer and copy it to a new layer in the same image.
Once you have your Start Orb isolated on it's own layer, it's time to resize the image to a suitable size for your Start Orb. Right click on the top bar of the image and select Image Size, as seen below:
Note
Image Size will resize the image with it's contents - this we want.
Canvas Size will resize the canvas only, and making it smaller will crop the image - this we don't want.
Canvas Size will resize the canvas only, and making it smaller will crop the image - this we don't want.
When changing the image size, there are a few important points to keep in mind:
Warning
You will need to play with the image size here; this setting will affect the entire image size, not just the button. Try 54px width first, and if it's too big work your way down from there.
Check the Resolution setting for this image, and make sure that it matches the 72 pixels per inch you selected for the Start Orb earlier.
Check the Resolution setting for this image, and make sure that it matches the 72 pixels per inch you selected for the Start Orb earlier.
Once you are satisfied with the button size, drag the edited button to our original Start Orb image window and center it in one of the three 'blocks' as defined by the guide lines. You should end up with something similar to this:
Note
From resizing the image earlier, the edges tend to go slightly funny sometimes, in this case we still have a very thin piece of the border left here so it's fine. Now that you have the button at the size you want it, 'trim' the remaining border off in any manner you choose.
Depending on the picture being used, zooming in and using the Eraser tool with a 15px size and 50% brush hardness generally works well here
Depending on the picture being used, zooming in and using the Eraser tool with a 15px size and 50% brush hardness generally works well here
Once you have trimmed the Orb, it's time to duplicate it for the three button states. You should end up with three orbs, as seen below:
Note
Just a tip for keeping these orbs lined up properly:
1 - Start with the button in the top block, press ctrl + J to duplicate.
2 - Then hold shift and ctrl and press the down arrow 5 times.
3 - Hold ctrl, release shift and press the down arrow 4 times.
Wash, rinse, repeat. (or just do the steps again...)
Holding shift and ctrl moves your layer by 10 pixels, holding only ctrl moves by 1 pixel. The above method ensures your button shifts straight down by 54 pixels.
1 - Start with the button in the top block, press ctrl + J to duplicate.
2 - Then hold shift and ctrl and press the down arrow 5 times.
3 - Hold ctrl, release shift and press the down arrow 4 times.
Wash, rinse, repeat. (or just do the steps again...)
Holding shift and ctrl moves your layer by 10 pixels, holding only ctrl moves by 1 pixel. The above method ensures your button shifts straight down by 54 pixels.
Now for the fun part, and a part I'm going to leave completely up to you; building your button states.
Try not do too much to the top orb, keep it simple. Give the middle orb a bit more attention to make it look nice (I like to think the orb is happy to see the mouse, so it starts glowing with a warm, fuzzy, omg-i-have-a-frie....... Uh, ok, ignore that comment). Apply some sort of 'pressed' look to the bottom button just to finish it off.
Your end result will look different to mine, but is an example of very simple orb button states using only Outer Glow, Inner Glow and Satin:
Note
Keep your layers on the right in the same order as the orbs in the image, top layer for top orb, bottom layer for botto orb, etc. It helps you see which layer is doing what and why and how and all that other jazz that people like..
Warning
Don't let the effects go too far off the the sides! The taskbar isn't as big as the 54x162px Start Orb images will make you think... Try and keep the majority of your Orb within about 9 or 10 pixels of the border of each block. Below is an example of a 9px border around my Orb:
Now we need to merge all the Orbs into one layer in preparation for the Alpha layer; hold ctrl and click once on the name of each of your Orb layers to select them, do NOT select the background here as well. With the Orbs selected, right click and select Merge Visible, as seen here:
This will give you a single layer with all Orb button states and their unique effects on a single layer above the background. To prepare the Alpha layer, first select the contents of our Orb layer. Hold ctrl and click once on the preview for the Orb layer; take note of the mouse pointer change as you hold ctrl:
Note
If you did this correctly, you should see a selection indicator around all three Orb button states, as seen above.
Above the Layer pallet you should have a tab labelled Channels, click this now. Colour channels are used to store the amount of each primary colour each pixel contains in a RGB (Red Green Blue) image. Because we're greedy and these three aren't enough, we're going to create a fourth channel that doesn't store colour, but we want it anyway (it's really technical, just know that you need it).
Click the Create New Channel button at the bottom of this pallet, as seen below, PhotoShop will know what you want it to do:
At this point, select the newly created Alpha 1 channel and look at your Orbs. Well, you can't see them, but it's fine for now. This layer will determine what parts of your BMP image Explorer shows (white areas) and which it hides (black areas) when the Orb is complete.
Switch to the Brush tool, set it to something decent like 100px at least, hardness doesn't matter here, and fill in as much as your can of your selection with white. Notice how the selection we made earlier follows the 'glow' effect of the orbs and only allows a certain amount of white to be 'painted' onto the Alpha channel? That's what gives the soft edges on your Start Orb later.
Warning
If you have hard edges on the alpha channel at this stage, unless it was intensional, you may want to go back to the point where the affects were applied to the orbs and the layers were merged to ensure you have the image you actually want....
At this point, you are essentially finished building your Start Orb. Select the RGB Channel again, deselect the Orbs selection, and switch back to the Layers pallet. If you are satsfied with your Orb, it's time to save it...
From the File menu, select Save, or just use ctrl + S keyboard shortcut. In the save dialog box, enter a funky name for your Start Orb, ensure that Alpha Channels is ticked, and hit Save.
On the next step, ensure that you are saving a Windows bitmap and that it's being saved as 32 Bit;
Final Step
Now that your orb is complete, you may use any Start Orb changer to set it as active on your taskbar. I recommend using the Win 7 Start Button Changer 2.6 by ~Kishan-Bagaria for this, but you can use any utility you prefer.
Note
I would highly recommend using Kishan's app; version 2.6 has been updated to change the orb image for any and all DPI settings... You just need to make sure you use the correct size image for the DPI you're using. Remember:
100% DPI - use 54 x 162px
125% DPI - use 66 x 198px
150% DPI - use 81 x 243px
100% DPI - use 54 x 162px
125% DPI - use 66 x 198px
150% DPI - use 81 x 243px
The Start Orb I created in this tutorial came out like this:
Now go forth and conquer the world with your hot orbs!
Please leave comments and tell me if I need to expand on certain areas or if I made a mistake.. As I mentioned at the top, this is my first tutorial ever, I'm open to constructive criticism. Hope you enjoy reading it as much as I enjoyed making it! Cheers..
Note
For those of you who don't have PhotoShop, you may also use GIMP to do this. If you're not sure on the GIMP equivalents for the functions used in this tutorial, check the Start Button - Create a Rectangular Start Button tutorial made by Tannim.
Last edited by a moderator:
good tutorials. keep it up, ganbate!!!