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.
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:
100% DPI - use 54 x 162px
125% DPI - use 66 x 198px
150% DPI - use 81 x 243px
For the purpose of this tutorial, I will be working with the standard 100% DPI.
The Start Orb
Create a new image with the following settings:
* 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.
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:
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:
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:
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.
When changing the image size, there are a few important points to keep in mind:
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.
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:
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
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:
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.
Now for the fun part, and a part I'm going to leave completely up to you; building your button states. The idea between the three button states is simple; top is static state, middle is mouse-over or hover state, and bottom is clicked state.
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:
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..
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:
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.
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... Exciting times...
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;
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.
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
The Start Orb I created in this tutorial came out like this:
Now go forth and conquer the world with your hot orbs! And remember to share them hey...? I've lost all my marbles, I need replacements.. It's like comfort food, but for my computer...
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..
Computer type Laptop System Manufacturer/Model Number HP EliteBook 8530w Mobile Workstation OS Windows 7 Ultimate x86 build 7600 (XP, 98SE, 95, 3.11, DOS 7.10 on VM) + Ubuntu 10.04 LTS Lucid Lynx CPU Intel Core 2 Duo Processor P8600 (2.40 GHz, 3 MB L2 cache) Motherboard Mobile Intel PM45 Express Chipset ICH9M-Enhanced Memory 2GB 800 MHz DDR2 SDRAM Graphics Card ATI Mobility FireGL V5700 with 256 MB Sound Card SoundMAX Integrated Digital HD Audio Monitor(s) Displays 15.4-inch WXGA anti-glare (1280 x 800 resolution) Screen Resolution 1280 x 800
Mouse Synaptics PS/2 Port Touchpad, USB Mouse Hard Drives 250GB Fujitsu MJA2250BH G2 ATA Device (IDE),
120GB in External Casing Internet Speed 2 Mbps Antivirus MSE Browser Firefox, Chrome, IE Other Info Authentec AES2810 Fingerprint Reader,
Optiarc DVD RW AD-7561S LightScribe
System Manufacturer/Model Number Self built. OS Windows 7 RTM 64bit, RTM 32bit Chinese CPU Intel Core 2 Quad Q 6600 2.4 GHz Motherboard Asus P5K-VM Memory 4 x Kingston 2GB DDR2-800 SDRAM Graphics Card ATI Radeon HD4670 Sound Card Realtek ALC883 @ Intel 82801IB ICH9 - High Definition Audio Monitor(s) Displays LG Flatron L1520B Screen Resolution 1024 x 768
PSU Huntkey 400W Case Golden Field Hard Drives 1 x 320GB Seagate Barracuda
1 x 320GB Western Digital
1 x 1TB Western Digital Black Caviar
System Manufacturer/Model Number D3f's Customs OS Win 7 Ultimate SP1 x64 CPU Intel Pentium Dual Core E5300 OC'd @ 3GHz Motherboard Asus P5G41-M LE Memory Kingston 2x2GB DDR2-800 Dual Channel SDRAM Graphics Card Integrated Intel GMA X4500 Sound Card Realtek 5.1 HD Audio (ALC887) Monitor(s) Displays LG Flatron W1943S @ 60Hz Screen Resolution 1360 x 768
Keyboard Logitech K120 Mouse Logitech LS1 Laser Mouse PSU Headway 450w PSU Case Pixxo Slim Black mATX Case Cooling Stock Cpu Fan, 1 x Top Case Fan Hard Drives Internal - WD Caviar Blue 500GB, External - WD My Passport Essential 500GB Internet Speed 17.66Mb/s Down, 0.82Mb/s Up Other Info Creative SBS A300 2.1 Speaker System, LG GH22NS50 22x Internal Super-Multi DVD-RW, 2Wire 5012NV Wireless Modem Router
OMG U R AN ABSOLUTE PRO! THX A LOT! The Seven Pro thing fits 2 u!
Haha... Thanks, I just like helping people. That's all really..
Quote: Originally Posted by p92ks
didn't work for me. could it be because i'm at 125% dpi? should i just use your tutorial but increase all pixel sizes by 25%?
If you're running a 125% DPI in Windows, then Explorer will use a different image stored in the 'explorer.exe' file. Three are saved in 'explorer.exe', 100%, 125% and 150% versions, the Start Orb Changer I listed in this tutorial only changes the standard size orb, but not the others.
My suggestion would be to create the orb you want (obviously at the correct size) and use Resource Hacker to change the image. It's a free program and there's lots of help available online to show you how it works.