ObjectDock: Creating a Zoomer Dock Part 1: The Regular Zoomer
From WinCustomize Wiki
| Creating a Zoomer Dock Part 1: The Regular Tile | ||||||||
| ||||||||
Contents |
[edit] Background Information
This tutorial will deal with creating a Regular Zoomer background for ObjectDock. It goes along with two other tutorials that I’ve done:
- ObjectDock: Creating a Tile Dock Part 1: The Regular Tile
- ObjectDock: Creating a Tile Dock Part 2: The Perspective Tile
[edit] This Tutorial
For this tutorial, I'll be using Adobe Photoshop CS2, ObjectDock Plus and Notepad (for the .ini files). This tutorial requires some basic knowledge of Photoshop.
[edit] The Design
[edit] Creating the Image
The regular zoomer will end up with six separate layers with special effects on two of those layers.
First, we want to create a new canvas with the following settings:
- Width: 200 pixels
- Height: 120 pixels
- Resolution: 300 pixels/inch
- Color Mode: RGB Color 8 bit
- Background Contents: Transparent
Next, I fill the bottom layer with "Magic Pink" (RGB 255, 0, 255) just to have a nice contrasting background. Because we want to have a drop shadow on this, I usually make my rectangle smaller than the actual canvas. Since I like all my docks to start out at the same size, I use guidelines. Create a 1 pixel line on the extreme right edge of the canvas and fill it with any contrasting color you wish, I use green. Then select that line and hit Shift+Left Arrow. That will move it 10 pixels to the left. Do the same thing at the bottom and move it 10 pixels up.
Select the Rounded Rectangle tool (shape) and make a rectangle on the canvas. This can be any color you want, mine is black. Look at the below picture to see how I placed it. Name the layer "Rectangle".
Give this layer a Graident Overlay (on the toolbar: Layer\Layer Style\Gradient Overlay). I'm using Plain Piping found at freelogomakers.com, and set the attributes like i've shown in the picture.
Let’s give the same layer a drop shadow as well:
Now it should look like this:
Ctrl+Click on this layer to select it, then create a new layer above it. Fill this with white, and then with the Rectangle Marquee tool selected, use the arrow keys to move the selection one pixel down and to the right. (don't move the white box, just the selection) Once that's done, click delete. What you should end up with is a white line on the left and top of the rectangle. Set the Fill to 70%. Name this layer "Left/TopWhiteLine".
Ctrl+Click on the Rectangle layer to select it, then create a new layer above Left/TopWhiteLine. Fill this with black, and then with the Rectangle Marquee tool selected, use the arrow keys to move the selection one pixel to the left. (don't move the black box, just the selection) Once that's done, click delete. What you should end up with is a black line on the right of the rectangle. Re-select the Rectangle layer and on the toolbar Filter\Blur\Gaussian Blur and set the Radius at 0.5 pixels. Set the Fill to 70%. Name this layer "RightBlackLine ".
Make a copy of the Rectangle layer and move it above the RightBlackLine layer. We will give this layer a gradient overlay. Set the Fill to 0% and on the toolbar select Layer\Layer Style\Gradient Overlay and set the attributes like the below picture:
You should end up with this:
Ctrl+Click on the DarkGradient layer to select it, then create a new layer above it. Change your foreground color to white and select the gradient tool. Make sure you have the Linear Gradient selected. Start at the top of the square and go about halfway down, release. On the toolbar: Select\Modify\Contract and set it for three pixels. Ctrl+Shift+I to inverse the selection, click delete.
Select the Elliptical Marquee Tool and make an oval near the top of the rectangle. Ctrl+Shift+I to inverse the selection, click delete. Set the Fill to 30 percent. Name this layer "Gloss".
Create a new layer above Gloss and down at the bottom using the Rectangle Marquee Tool make a two pixel high rectangle across the entire canvas. Change your foreground color to white and select the gradient tool. Make sure you have the Radial Gradient selected. Start at the middle of the rectangle and go out to the left edge, release. Control+Click on Rectangle layer and Ctrl+Shift+I to inverse the selection, click delete. Set the Opacity to 50 percent. Your rectangle should now look like this:
Turn off all the backgrounds so you have the transparent background and save as background.png
Now, on the toolbar select Image\Rotate Canvas\ and select 90 degrees Counter Clockwise (CW), then do it again except select Flip Canvas Horizontal. Change the gradient Angle attribute for the Rectangle layer to 90 degrees and change the gradient Angle attribute for the DarkGradient layer to 180 degrees. Now you should have something similar to this:
Save that as backgroundlr.png
[edit] Making the .ini
Congratulations! You’ve created your very own regular zoomer. Look how sweet that is against a background. Now let’s get the .ini file taken care of and you can get to using this. Put the following info into an .ini file.
[Info] Name = Tut_Zoom ProportionalStretch = 1 [Tile] Image = tileblank.png ResizeIconByPercent = 80 OffsetIconByPercentX = 50 OffsetIconByPercentY = 50 [Background] Image = background.png LeftWidth = 90 TopHeight = 0 RightWidth = 90 BottomHeight = 0 OutsideBorderLeft = 5 OutsideBorderRight = 10 OutsideBorderTop = 0 OutsideBorderBottom = 0 [BackgroundTop] Image = background.png LeftWidth = 90 TopHeight = 0 RightWidth = 90 BottomHeight = 0 OutsideBorderLeft = 5 OutsideBorderRight = 10 OutsideBorderTop = 0 OutsideBorderBottom = 0 [BackgroundLeft] Image = backgroundlr.png LeftWidth = 0 TopHeight = 90 RightWidth = 0 BottomHeight = 90 OutsideBorderRight = 0 OutsideBorderTop = 5 OutsideBorderBottom = 10 ContentBufferRight = 0 [BackgroundRight] Image = backgroundlr.png LeftWidth = 0 TopHeight = 90 RightWidth = 0 BottomHeight = 90 OutsideBorderRight = 0 OutsideBorderTop = 5 OutsideBorderBottom = 10 ContentBufferRight = 10 ContentBufferLeft = 0
Save this as background.ini and place it in the same folder as the background.png and backgroundlr.png files. Place in your ObjectDock Backgrounds folder and start using it.
[edit] Notes
For help on changing backgrounds, see this tutorial by Island Dog ObjectDock: Changing the Background Theme
