Creative DW Tabbed Menu Documentation |
|||
| Table of Contents > How Does Automatic Resizing Work? | |||
By reading this section you will learn about resizing your menu items, how to make them look good, tips and tricks and general guidelines to simplify your work.
1. First step is to define your resizing type: vertical, horizontal or both.*
*When you choose to resize your shape on both axis, you should know that it will first be resized horizontally then vertically.
2. Let’s take this pattern and occupy ourselves of resizing your object horizontally. You would then have to take into consideration the type of fill you’ve used for the object. If it’s a single color, things couldn’t be easier, else you’d have to choose wisely the cutting point we’re introducing in the resize process. You’ll see it’s simple thought you should pay some attention so the resized object would look perfect afterwards.
Your object has got a simple color filling
Your object has a gradient filling
The shape will be split in two, according to your cut point value. As the gradient in here is vertical, you can have a cutting point anywhere you want.
You would have to specify then a horizontal duplicating width.From that point on there will be small pieces of the current item duplicated to fill the object until it reaches the specified size.The area that duplicates until the given size is obtained has been marked in red for better understanding.
As you can see the area that has been duplicating is filling the existing gap. Of course while resizing you won't see all of this process but it's good to know as to better handle the resizing values you are being asked for.
As you can see the red stroke emphasizes a duplicate width the user has to specify. in this specific case, we needen't had to be too carefully because the gradient was continuous horizontally speaking so that the duplicates won't affect the result of the current resize
There is a red contour we had to show to you, so you would realize how much was resized and what was the gap filled with.
3. After we have see the general resizing guidelines of the process, we should see how the vertical resizing is being done so you would obtain a fine resized object even if the gradient would be this time pretty hard to fake. You should know you won't have to do anything but to set a cutting point on the y axis, that is vertically and a duplicate height that would be used to fill the remaining space between the two parts of the object as they will be positioned at the head and tail of it.
Now it's the time for resizing your object vertically. You would then have to take into consideration the type of fill you’ve used for the object. If it’s a single color, things couldn’t be easier, else you’d have to choose wisely the cutting point we’re introducing in the resize process. You’ll see it’s simple thought you should pay some attention so the resized object would look perfect after resize.
Your object has got a simple color filling
Your object has a gradient filling
The shape will be split in two, according to your cut point value. As the gradient in here is vertical,you have to pay attention and make the duplicate height as small as possible - 1 pixel would be perfect - .
As you have no special filling, you can choose a cutting point anywhere you want to. If you want to preserve your round corners then the cutting point should be beneath them.From that point on there will be small pieces of the current item duplicated to fill the object until it reaches the specified size. You would have to specify then a vertically duplicating height. The area that duplicates until the given size is obtained has been marked in red for better understanding. As you can see the area that has been duplicating is filling the existing gap.
There is a red contour we had to show to you, so you would realize how much was resized and what was the gap filled with.
In another approach, a more mathematical one, you can see how the resize works like:
|
|||