ObjectDock: Creating an ObjectDock Dock Background From a WindowBlinds Skin

From WinCustomize Wiki

Jump to: navigation, search
Creating an ObjectDock Dock Background From a WindowBlinds Skin
Original Author:WebGizmos
Date Created:April 16, 2007
Application:ObjectDock
Programs Used:ObjectDock, MSPaint (or any paint program)

Contents

Beginning Discussion

This is just a basic tutorial for creating a set of dock backgrounds from an existing WindowBlinds skin.

Getting the Images

First get all the parts needed for your docks from the skin your creating them for. You can do this using a free version of SkinStudio. (Its much easier than trying to find them one by one in the skin folder)

  • Open your chosen skin you wish to create docks for in SkinStudio and the first thing you will see is the windows dialog or "Active Window"
  • From that you want to click on and save the following images as png files...Top/Bottom/Left/Right sides of the window All Tabs (these would be labeled "Selected & Normal" on the bottom set...not the top set and clicking either one on the bottom will get you both images) All buttons ( these would be labeled "Default & Normal" and clicking either one will get you both images) These images will be used for dock backgrounds and your tabs.
  • Next, click on "XP Taskbar" and save...
    • Username bar at the top.
    • Programs
    • Places
    • All programs
    • The bottom of the startmenu
    • The buttons on the taskbar

The above images can be used to make dock backgrounds as well as side docks and tabs. Turn Off Computer (in some cases there will be images and text you will need to remove) Log Off Computer (same as above) Please Wait (In some skins this may not be useable as a background) You can open these using the drop down menu at the top where it says "Turn Off Computer"These can be used for dock backgrounds as well as side docks. (Bmp images of these can be opened using MSPaint...TGA or Transparent images can be opened and saved using either PhotoShop or Paint.net)

  • Next, click on "End Session" and save.
  • From this point on just think of it as putting a puzzle together. You can open your images in MSPaint and make any adjustments or fine tuning there. Add magic pink (RGB = 255,0,255) to the parts you want to render as transparent such as the corners and center area where the icons will reside. Then you can open them in Photoshop or Paint.net to remove the pink and add transparency if that's your goal.

Constructing the Dock Background

The basic construction of a dock background using images from a skin for a NonTransparent dock

  • First create a folder you will save your images in and work from for your dock and save all the image parts listed above.
  • Now open the top image for the window dialog in MSPaint...right click on the image and click on "select all" to save the image to memory.
  • Now open the left side for the windows dialog in MSPaint.
  • Now before you paste your image saved to memory stretch the right part of the template to the right (about 250 pixels) and paste the top part you copied to that template and move it in place.(When you open any image in MSPaint you'll see a small dot at the sides of the template, place you cursor there and then you can stretch it in the direction you want. Make sure you leave enough room to paste the next image you'll need.) Now save the Left & Top part of the background you just put together to your folder.
  • Now open the Right side in MSPaint...right click on the image and click on "select all" to save the image to memory..
  • Now open the parts you just saved and paste the Right side in place and save it again.
  • Now open the bottom image...right click on the image and click on "select all" to save the image to memory...and then open the last image you saved and paste the bottom in place.
  • If you wish to make your dock transparent...add pink to all the areas you want to render transparent and then you can open your image in photoshop for that process. To do this....open your image in photoshop...click on the "magic wand tool" on the left side toolbar. Now place the wand on a pink area and leftclick on the area....you should see the area become highlighted by the line breaks. Now rightclick any remaining areas and choose "add to selection" from the dropdown menu. Once you have all the pink areas chosen click on "Help" then "Export Transparent Image" then choose "I have selected the area to be made transparent" Click "Next" then choose "Online" click "Next" and then choose "PNG" click "Next" and a window will open up and you can save it to that folder or the anyone you want. Note: Make sure the folder your saving it to is the right folder you want as photoshop doesn't always remember where your image came from. It often will save it to the last folder you were previously saving something to.

Now your image has been rendered transparent and if you have rendered the center area where the icons/pngs will reside transprent you can add and transparent background to it.

To add a transparent background. Open your image in photoshop and using the "magic wand tool" again click on the area you wish to add a transparent background to. You will see it highlighted by the line breaks. Now on the top left...under "file" you should see your "magic wand tool" again....next to that is a little arrow...click on that to open up the dropdown and scroll down to "Transparent Red Spray Paint" and click on it and it should open up a oblong circle. Now next to where you just open the dropdown you should see "Brush" listed there. Click on that and choose number 19 in the list of brushes and this will make your oblong circle round. Using the slide bar at the top of this list you can make your circle bigger till it covers the area you want to make transparent (don't click on your image until your circle is bigger than the image...if you happen to do this you can click o"Edit" and then "Backspace" to undo it). Now you can click as many times as you wish to add your transparent background until you reach your desired effect. If you add to much just open edit and click backspace to remove as much as you want. Once your done save your image to your folder and your done.

Special Note on Using ScreenShots

As far as making docks from a screenshot...you are limited to what you see...but you can still make a full set of docks from one. All you have to do is cut and paste the parts in MSPaint and make all the needed tweaks to the images...define all the edges...use your imagination.