Windows Guides Feed

altWe love customising our desktops at mintywhite.  Our community have come up with some brilliant creations and provided links to some great resources.

In this How To guide I will be showing you how to create your own Start Orb for Windows 7.  I’ll be using Photoshop CS5.  Sorry to those who use alterative software.  I’m sure you’ll be able to follow using your preferred software however.

Step 1.

Start by creating a new document in Photoshop (Ctrl+N).  Match your settings to the screeny.

In this guide i have used 100% DPI, if you use 125% or 150% DPI then you’ll have to adjust the image size and the ‘Orb’ size accordingly.

125% DPI – use 66 x 198px
150% DPI – use 81 x 243px

Select Black as your foreground colour (D) and fill the background layer (Alt + Backspace).

Step 2.

Time for a bit of mental arithmetic. We must vertically divide the image into three.

I also like a nine pixel border as guide, to start working with the Orb.

Make sure Rulers (Ctrl+R) are visible and the Move tool (V) is selected.

Set the ruler to display Pixels by right clicking the white rule and selecting Pixels.

alt

Click the Ruler and drag to these points.  At this point, you may find it handy to open the Info pallet (F8) to check your coordinates.  Click the small icon and set it to Pixels.

Horizontal Guides:

9 Pixels

45 Pixels

54 Pixels

63 Pixels

99 Pixels

108 Pixels

117 Pixels

153 Pixels

Vertical Guides:

9 Pixels

45 Pixels

Your image should now look, totally ridiculous!

alt

Step 3.

Find the image you want to make into a Start Orb (preferably larger than forty pixels by forty pixels).  Open it in Photoshop and check it’s 72 Pixels/inch. (Ctrl+Alt+I)

We need to copy the image (Ctrl+A – Ctrl+C), switch over to your Black background and Paste (Ctrl+V).  A new layer will automatically be created, named “Layer 1” .  Double click the “Layer 1” text and rename it “top”.

Before making any adjustments to the size, change  the “top” layer into a ‘Smart Object’.  Do this by right clicking the “top” layer and selecting Convert to Smart Object.  (If you need to remove backgrounds etc. convert after your modifications).

alt

You’ll know it’s converted by a small icon in the layer pallet.

alt

Now we need to resize so it fits in our guide lines.

Use the Free Transform tool (Ctrl+T).  Grab a corner node, hold Shift and resize to fit.

alt

Step 4.

Be sure the “top” layer is centred in the top guide box.

Duplicate (Ctrl+J) the layer, select the Move tool (V) then Shift Nudge down (Shift+↓) five times and nudge down (↓) a further four times (54 pixels).  Rename this layer “middle”.  Duplicate (Ctrl+J) the “middle” layer and repeat the Nudging.  Rename this layer “bottom” and drag n drop the layers into the appropriate order.

You should now be looking at something like this.

alt

alt

This is where the fun starts.  Adding the effects to the different button states; Normal, Hover & Clicked.

Adding glows to Hover & Clicked is quite common but off course, experiment to your hearts desire!

top = Normal

middle = Hover

bottom = Clicked

Step 5.

To those new to layer styles, double click the “middle” layer to bring up the Layer Style dialog box (Generally speaking you wouldn’t add any effects to Normal).  Here you can change the appearance of your orb.  As I mentioned, adding a glow is common so that’s what we’ll do.  Under Styles, click Outer Glow and check the check-box is ticked.  You can play around with many settings here but for this basic guide, will stick to colour and size.

alt

Make your changes and then repeat on the “bottom” layer adding a subtle change.

You can, at any time change the glow (and many other things) by double clicking next to Outer Glow text in the layer to bring up the Layer Styles dialog box.  You can toggle the effect with the eye-ball.

alt

Step 6.

Once you are happy with the different effects, we must deal with the alpha channel for transparency.

Merge the different Orb layers (Ctrl Click top, middle & bottom).  Right click and select Merge Layers.

All three Orbs will now be on one layer.  Ctrl-Click the image preview in the layers pallet.

alt

You’ll see marching ants around the Orbs.

alt

Select the Channels pallet and create a new channel.

alt alt

Select the Brush tool (B), right click your image and set the Size to 200 pixels and the Hardness to 100%.  Change your foreground colour to White (X)

alt

Click over your image once.

alt

 

Step 7.

Deselect (Ctrl+D), click the RGB channel and switch back to the layers pallet.

Press Ctrl+Shift+S to bring up the Save As dialog box.

Save the image as a 32bit Bitmap file;

alt

alt

Now back in Photoshop, go to the History panel.

alt

Go back to a state before the merge eg.

alt

Then go back to Save As and save as a .psd.  You should do this so you can modify your orb again.  You’ll have to create the new alpha channel  and wot-not though.

And that is how to make your own Start Orb.  I know this has been a massive read and might seem like a nightmare but once you’ve done it a few times it’ll be a breeze!

You may need to slightly tweak the sizes and positions of the orbs, experiment and have fun.  If you like you can share them with our forums.

How To apply the Orb to your system;

A quick and easy way to apply your Orb to your system is to use this tool.  Check out the Readme file for instructions.

Or you could checkout our guide on how to do it manually.



Free PC tips by email

Search Windows Guides




Comments

5 thoughts on “Make your own Windows 7 Start Orb [How To]”

  1. Charleston Sityar says:

    Why is mine overlapping >.<

    1. Stu says:

      How do you mean overlapping? When you hover over it? If so, adjust the position of which ever ‘state’ is out of line.
      So if it jumps up when you hover you mouse over it, go back to your image editor, move the middle layer down a few pixels, create the alpha channel etc and try again. Wash, rinse, repeat (if necessary).

  2. Chunkycox says:

    no hate, love the tut
    Step 7 you say Ctrl+Shit
    thanks for the laugh <3

    1. Rich says:

      :P Updated. Thank you!

  3. RJ says:

    Very helpful tutorial!

Comments are closed.


Computer tips in your inbox
Sign up for the Windows Guides newsletter to get PC tips and access to free Windows books (More details)

Enter your email address:
 

Popular Guides

See which sites have been visited on your PC (even if private browsing mode is used)

Create a Windows 7 System Repair Disc

Best Free Anti-malware

Hibernate vs. Sleep vs. Shut-Down

i3, i5, and i7; Dual, Quad, Hexa Core Processors. How to they Differ?

Intel's Ivy Bridge Processor: new Features

Submit Your Tip
Submit your computer tip to us; receive full credit for all published tips

Windows Guides on Facebook