  |
| Step-by-Step Tutorials | #12 - ADVANCED BITMAP SETTINGS |
A series by RomanDA |
Listing of other DX Tutorials: Click here
Today's Lesson: "ADVANCED BITMAP SETTINGS" will show you how to make use this section of DX.
The ADVANCED BITMAP SETTINGS allows you to stretch, or tile an image. This allows you to take a simple rounded corner background (or any background) and make it stretch to fit the size you want to use, without losing the aspect ratio of the image.
Typically this is used when you have a background (or any image) that you want to make wider or taller than it was origionally created for.
For this and all the Step-By-Step DX Tutorials you will need to purchase DesktopX for $14.95 from Stardock.
Lets get started.
STEP 1 - Load DesktopX
Please look over the other tutorials to see how to load DesktopX, and also how to create a NEW object.
STEP 2 - Create an object
RIGHT CLICK on the 
icon in your system tray and create a NEW OBJECT.
The image im going to use for this tutorial is this one:
This is just a simple rounded corner box.
It's 100 pixels wide by 103 tall
The height diff is from the overhang of the little top yellow square.
Goto the STATES tab and BROWSE to the image above (or the one you want to test with).APPLY this so you can see what it looks like on the screen.
It should look like the image on the right, its just a square.
STEP 3 - Stretching things out.
I want to show what happens with you simply change the height and width of the object without using the advanced bitmap settings.Edit the object. goto the SUMMARY tab, and choose the height or width to see how it changes the box.
| Stretch the Height to 200 
| Stretch the width to 200 
|
You can see that the nice round box gets "stretched" out to match the height/width we used.
This is the problem, we want to KEEP the nice round shape, so we want to use the Advnaced Bitmap settings to setup margins that will keep our shape and "stretch" the inside of the area.
STEP 4 - Advanced Bitmap Settings
Edit the object again, and set the WIDTH to 200 and the Height to (image default).
Now go to the STATES tab and click on the ADVANCE button under the image information area.
I know how my background was created so i know that i should make the left/right margins both 30 pixels. This sets up an area around the object.
 | I hope the image to the left gives you a good idea of what the margins are and how they are used to select a "section" of the image to KEEP and a section to either STRETCH or TILE. Notice that when you pick left/right/top & bottom margins, you end up really picking just the corners. This allows us to easily make the bg bigger without losing any of the basic layout and look of the object. |
Origional set to 200pix wide:
Set the Width to 200 and then in the ADVANCED Tab use Left/Right to 30 and it looks like: (notice that the LEFT and RIGHT sides are the same as the origional image, and the section between these is "stretched" out to fit the 200 pixel width. Notice how the corners are nice and rounded? not stretched out.
Here is what happens if we make the margins a little to big since 55+55 is 110 its actually using 5 pixels on each side that doesnt even exist. You might have to experiment a ltitle with your oen image to get the margins 100% correct.
Here is the Height BEFORE Setting the TOP/BOTTOM margins:
Now lets set the TOP/BOTTOM Margins to a little diff than LEFT/RIGHT and see how this looks:
I set them to 35x35 so that it picks up a little more of the margins. you can experiment to see how it ends up looking.
CONCLUSION
Thats the basics. There are some things you can do with TILE vs STRETCH.
That would depend on how your background image was created. But i hope this at least gives you a little insite into how to use the ADVANCED BITMAP SETTINGS.
