ObjectDock: Creating a Tile Dock Part 1: The Regular Tile
From WinCustomize Wiki
| Creating a Tile Dock Part 1: The Regular Tile | ||||||||
| ||||||||
Contents |
Background Information
There seems to be only a few skinners who try to tackle ObjectDock backgrounds and it's funny because skinning ObjectDock is relatively easy. I decided to write a few tutorials to cover the methods I use to create my backgrounds.
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. This will be a two part tutorial, the first part will be creating the regular tile and the second will be creating the perspective tile.
The Design
We are going to make a basic, rounded square with a couple of gradients and a gloss highlight. The regular tile will have six separate layers with special effects on two of those layers.
First, we want to create a new canvas with the following settings: Width: 256 pixels Height: 256 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. Select the Rounded Rectangle tool (shape) and make a centered square on the canvas. This can be any color you want, mine is black. Name the layer "Square".
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.
Ctrl+Click on the Square layer to select it, then create a new layer above it. On the toolbar: Select\Modify\Contract and set it for one pixel. Fill this with white, 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 square. Name this layer "Left/TopWhiteLine".
Select the Square layer and click Ctrl+J to make a duplicate. Move this layer above the white line layer we just created. Double click on the Gradient Overlay effect and set the attributes like i've shown in the picture. Make sure you change the Gradient to Forground to Transparent. Name this layer "Square2" and set the Fill to 0 percent.
Ctrl+Click on Square2 layer to select it, then create a new layer above it. On the toolbar: Select\Modify\Contract and set it for one pixel. Fill this with black, 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 square. Name this layer "RightBlackLine".
Ctrl+Click on Square2 layer to select it, then on the toolbar: Select Filter\Blur\Gausian Blur and set the Radius to 1.0, click ok and set the Opacity to 70 percent.
Ctrl+Click on Sqaure2 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 Eliptical Marquee Tool and make an oval near the top of the square.
Ctrl+Shift+I to inverse the selection, click delete. Set the layer to Vivid Light and the Opacity to 30 percent. Name this layer "Gloss".
Create a new layer above this one and down at the bottom using the Rectangle Marquee Tool make a two pixel high rectangle across the entire canvas. At this point you should creat a new guide to help you find the center of the canvas. To do this, on the toolbar: View\New Guide...set the Position to Vertical and 128 pixels. Change your foreground color to black and select the gradient tool. Make sure you have the Radial Gradient selected. Start at the middle of the canvas (the guide we just made) and go out to one edge, release. Control+Click on Square2 layer and Ctrl+Shift+I to inverse the selection, click delete. Set the Opacity to 50 percent. Your square should now look like this:
Create a new layer set and place all the layers (except the magic pink layer) inside the set, name it whatever you want. Make the magic pink layer invisible and save the file as backgroundtileR.png in a folder named whatever you like.
Making the .ini
Create a new Notepad document and past the following info into it:
[Info] Name = Tut_TileR [Tile] Image = backgroundtileR.png LeftWidth = 0 TopHeight = 0 RightWidth = 0 BottomHeight = 0 TileCenter = 0 ResizeIconByPercent = 85; OffsetIconByPercentX = 50; OffsetIconByPercentY = 50;
Save this as backgroundtileR.ini and place it in the same folder as the backgroundtileR.png file. Copy this folder to your ObjectDock Library and then change your desired dock to this background.
Notes
For help on changing backgrounds, see this tutorial by Island Dog ObjectDock: Changing the Background Theme
The second part of this tutorial is now available. You can find it here ObjectDock: Creating a Tile Dock Part 2: The Perspective Tile.
