ObjectDock: Creating a Tile Dock Part 2: The Perspective Tile
From WinCustomize Wiki
| Creating a Tile Dock Part 2: The Perspective Tile | ||||||||
| ||||||||
Contents |
Background Information
Awhile back, I put together the first part of this tutorial called Creating a Tile Dock Part 1: The Regular Tile. At the end of that tutorial, I promised to show you how to create the perspective tile. So, without further jib jab…
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. If you haven’t done the first part of this tutorial, called Creating a Tile Dock Part 1: The Regular Tile, you should try that first because we’ll be building on that tutorial.
The Design
Making the Image
The perspective tile will end up with ten separate layers with special effects on five of those layers.
First, we want to open the regular tile tutorial. I placed all layers in a layer set so I could quickly copy them by dragging the layer set onto the new layer icon. Name this Set 2
Next, select the entire layerset and go to toolbar: Edit\Transform\Perspective. We want to grab the upper left point and drag towards the center of the canvas until the Horizontal degrees = 11.0 (or as close as you can get to that), then apply the changes.
Select the entire layerset again and go to toolbar: Edit\Transform\Scale. We want to grab the upper middle point and drag towards the bottom of the canvas until the Height is 28% (or as close as you can get to that), then apply the changes. (It is important to note, although you can do both steps and then apply changes, if you do that the quality of your shape will diminish for some reason. Best to do one step at a time and apply the changes after each step.)
Select the entire layerset again and move it up 15 pixels. Now it’s time to start making this thing look 3D. We want to open the layerset and select the very bottom layer that we called BaseShape. Move this layer down 1 pixel. We will be making a total of 9 copies of this layer. The easiest way to keep track of what we are doing is to make 1 copy, place it below the BaseShape layer then move it down 1 pixel. Make a copy of that layer, place it below the BaseShape copy layer and move it down 1 pixel. Do this until you have 9 copies of the BaseShape layer (that will give a total of 10).
Select the BaseShape layer and link all the copied layers together then merge (Ctrl+E) them. You should have something similar to the below image.
Select that layer, it should still be called BaseShape, and give it the following layer style:
You should have something similar to the below image.
Let’s give that same layer a drop shadow:
You should have something similar to the below image.
Make the DarkGradient layer visible if it already isn’t so your tile looks like the below picture (this is personal preference, the tile will still look good without the dark gradient, I just think it looks better)
Create a new layer above the RightDarkLine layer and name it FrontEdgeHighlight. Using the Rectangle Marquee tool, draw a 2 pixel high rectangle across the entire canvas like I’ve done and fill it with white. Deselect the rectangle, on the toolbar Filter\Blur\Gaussian Blur and set the Radius at 1.5 pixels. Select the BaseShape layer and inverse the selection (Ctrl+Shift+I), then hit delete and deselect. Set the Opacity of FrontEdgeHighlight to 70%.
Now you should have something similar to this:
Ok, so it looks good but needs a little dressing up. Create a new layer above the BottomDarkLine layer and name it BlueGlow. Using the Rectangle Marquee tool, draw a 2 pixel high rectangle across the entire canvas and using the Radial Gradient Tool draw a line (any color you want) from the middle of the canvas out to the left edge so you have the following:
Set the following layer style to this layer:
So now it looks like this:
Making the .ini
Congratulations! You’ve created your very own perspective tile. 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. Save it as backgroundtileP.png and put it in the same folder as backgroundtileR.png. Put the following info into a .ini file. (Suggest making a copy of the one for backgroundtileR.ini and just call it backgroundtileP.ini) Make sure you change the name under [Info] and the Image = under [Tile]
[Info] Name = Tut_TileP [Tile] Image = backgroundtileP.png LeftWidth = 0 TopHeight = 0 RightWidth = 0 BottomHeight = 0 TileCenter = 0 ResizeIconByPercent = 85; OffsetIconByPercentX = 50; OffsetIconByPercentY = 50;
Save this as backgroundtileP.ini and place it in the same folder as the backgroundtileP.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
