Learning DX Step-By-Step - #12


Tuesday, May 27, 2008 by RomanDA | Discussion: DesktopX Tutorials

Step-by-Step Tutorials


A series by RomanDA

Listing of other DX Tutorials: Click here
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.

PhotobucketGoto 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.

margin settings 

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.


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.
AKA: David A. Roman
Reply #1 Tuesday, May 27, 2008 7:23 PM
Thanks RomanDA

This is going to help me out in a big way.

Thanks for taking the time to make these tutorials.  
Reply #2 Tuesday, May 27, 2008 10:14 PM
Nice going, DA.   
Reply #3 Wednesday, May 28, 2008 12:53 AM
Yeah, very useful, thanks David!
Reply #4 Wednesday, May 28, 2008 6:19 AM
Hope they help.. i know it took me a while to get the hang of using this, but now that i do, its really cool to use for making things grow/shrink, etc.
Reply #5 Wednesday, May 28, 2008 1:41 PM
Nicely done.


Spending a little too much time with Zubaz lately?
Reply #6 Wednesday, May 28, 2008 2:17 PM
Nice Tutorial. Thanks.
Reply #7 Wednesday, May 28, 2008 2:43 PM
Zu is my BFF.. LOL
Reply #8 Saturday, June 21, 2008 1:00 PM
This is very "Useful" Tutorial For who wanna make some Widget Or DesktopX Theme it's more than a "Technic" or another things ... It's a True Knowledge Base that DX User Should Know
Reply #9 Tuesday, July 1, 2008 8:52 PM
Ok...I have DeskTop X Pro 3.1...but now I would like to be able to create Vista side bar gadgets. So how do I upgrade?
THNX 7evier
Reply #10 Wednesday, July 2, 2008 3:24 PM
Ok...I have DeskTop X Pro 3.1...but now I would like to be able to create Vista side bar gadgets. So how do I upgrade?THNX 7evier

Get Stardock Central or Impulse and log in. You need to note that the sidebar gadget feature is in a beta version to the best of my knowledge

Please login to comment and/or vote for this skin.

Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:

  • Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
  • Access to a great community, with a massive database of many, many areas of interest.
  • Access to contests & subscription offers like exclusive emails.
  • It's simple, and FREE!