Vista/7 Orb/Start button Tutorial

Hey all,

I have decided that I will do a whole series of Vista elements tutorials. Note that I am not an out-and-out Vista fan, I actually like XP and OSX a lot better than Vista. But you have to agree, the Vista interface does look nice, if you have a lot of processor power lying around unused…
Having already posted the Vista Taskbar Tutorial, the series will include tutorials on how to make:

1. The Vista Taskbar
2. The Vista Orb
3. The Vista Explorer/Interface
4. Maybe The Vista Sidebar
5. Some Vista wallpapers

Now let us begin with the Vista Orb Tutorial. First of all, here is a screen-shot of the real Vista Taskbar:

[image deleted]

Update: The Windows 7 start button/orb also looks exactly the same.

And here is what we will make in this tutorial:

Let us begin!

Step 1: The Basic Shape

1. Start with a square, 300x300px canvas. Pick up the “Elliptical Marquee Tool“, and draw a nice big circle in the center, while holding down the Shift key.

2. Next, make a gradient that goes from a dark shade of any color to a light shade of the same color, as shown. The actual Vista Orb seems to use #013660 and #00a8e9. I have used the same.
Make sure that you save the selection. To do so, go to “Select>Save Selection“. Give it some obvious name such as “outer”. To learn about saving/loading selections in detail, refer to my Mac OSX Tiger Wallpaper Tutorial.

Step 2: The Basic elements of Design

1. Go to Select>Modify>Contract. Enter 5 or 6px as the size. Do save the selection as “inner”.

2. Create a new layer, and pick up the Gradient tool. With the gradient set to “White to transparent”, select “Radial Gradient” from the options bar on top. Make a radial gradient on the new layer starting from point 1 to point 2 as marked in the pic below. Set the layer blend mode to “Overlay“. You can deselect (Ctrl/Cmd + D) any selections that are there. I hope that you saved your selections.

3. Now to put in the Windows logo. You could either wait for me to put up a tutorial for the win logo or download the following logo that you can easily extract (Tutorial on extraction coming soon) from any official windows wallpaper.

[image deleted]

Copy this logo onto a new layer in your image. Resize it to fit nicely, leaving some space on the sides.

Its already looking quite good huh?

Step 4: The 3D Gloss effect

1. We use the same old technique of giving a glossy look to any object. We make a partial gradient in a part of the image. For more details, refer to tutorials Vista Taskbar, RSS Feed Icon and 3D button/badge.

2. To select an area for the gradient, pick up the Pen Tool. Make a path as shown in the pic below. I have left the path incomplete on purpose to show you the anchor points.

3. Once the path is complete, right click anywhere on the canvas and select “Convert to Selection“. This will convert your path to a selection (duh!).

4. Now comes the use of the saved selections. Refer to the tutorial I linked to above, to learn more about loading selections. Basically, you can combine different selections in different manners by using the “Load Selection” feature. Go to “Select>Load Selection“. In the window that pops up, make the settings a shown:

5. As you can see in the image below, a very nice selection has been made. It is just the area that we need.

6. Again, on a new layer, with the Radial gradient set to “White to transparent”, make a large gradient from the top to the middle. Adjust transparency of the layer to suit your needs. I lowered it to about 80%.

7. Though it has started to look a bit glossy, it still looks a bit weird. Select the layer with the logo on it, and go to “Layer>Layer Styles>Drop Shadow“. Use the following settings.

8. This is what your image should look like. Please ignore the strange black patch under the green part of the logo. I made a mistake while taking a screen-shot. :p Also , don’t deselect it. Infact, you should save it. Let the name be “xyz”.

9. Now you need to load another selection. Load the inner selection again, but this time subtract “xyz” from it.

10. Next, with a soft (0% hardness) and large (radius 100px) brush, and foreground color set to Black, and the opacity of the brush set to 40%, color a bit in the areas marked with the red spots in the image above. And this finishes your Vista Orb!!
The final image:

Please do comment!!