How to Create Custom Start Orb Image

Page 1 of 6 123 ... LastLast
    How to Create Custom Start Orb Image

    How to Create Custom Start Orb Image

    Published by
    Designer Media Ltd


    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:

    • 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:


       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.


    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.


    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.


    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


    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.


    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:


       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... 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;




    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


    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..

       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.








  1. Posts : 1,210
    Windows 7 Ultimate x64 (XP, 98SE, 95, 3.11, DOS 7.10 on VM) + Ubuntu 10.04 LTS Lucid Lynx
       #1

    Way to go ZaLiTH
      My Computer


  2. Posts : 1,223
    Win 10 x64 Pro x64 / Ubuntu 15.10 x64
    Thread Starter
       #2

    gladson1976 said:
    Way to go ZaLiTH
    Thanks gladson.. I actually enjoying making this one, I could probably improve it a bit, but I kinda needed to get back to doing my work though.. Lol.
      My Computer


  3. Posts : 1,343
    Windows 7 RTM 64bit, Windows 8 Pro 64bit
       #3

    Very good and thorough tutorial bro!
      My Computer


  4. Posts : 339
    7Home64
       #4

    Thank you so much! Nice tuto!!!
    I tried yet by myself before but didn't match what i expected, i guess this will help!!!
      My Computer


  5. Posts : 1,443
    Win 7 Ultimate SP1 x64
       #5

    Nice job, Zalith.
      My Computer


  6. Posts : 1,223
    Win 10 x64 Pro x64 / Ubuntu 15.10 x64
    Thread Starter
       #6

    Thanks for the replies..
      My Computer


  7. Posts : 16
    Windows 7
       #7

    OMG U R AN ABSOLUTE PRO! THX A LOT! The Seven Pro thing fits 2 u!
      My Computer


  8. Posts : 11
    Windows 7
       #8

    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%?
      My Computer


  9. Posts : 1,223
    Win 10 x64 Pro x64 / Ubuntu 15.10 x64
    Thread Starter
       #9

    TripleRhu said:
    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..

    p92ks said:
    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.
      My Computer


 
Page 1 of 6 123 ... LastLast

  Related Discussions
Our Sites
Site Links
About Us
Windows 7 Forums is an independent web site and has not been authorized, sponsored, or otherwise approved by Microsoft Corporation. "Windows 7" and related materials are trademarks of Microsoft Corp.

© Designer Media Ltd
All times are GMT -5. The time now is 11:04.
Find Us