Graphic Design
Stretching Images
Most of the time stretching an image by setting incorrect image sizes
within the HTML code would distort it horribly. Below is a review of the
example comparisons from our related article, "Adding
Text to Images: The Right Way".
Incorrect - image dimensions are incorrect in the HTML source code |
Correct |
So why then after looking at the examples above would you sometimes have
a good reason to stretch an image? Let's suppose that using a horizontal
divider border with CSS in a particular area of your page will not work
for whatever reason, or you are not familiar enough with CSS (because
you are not a BasicTemplates
member yet - [grin]) to feel comfortable using it. An alternative
for a horizontal divider border or line separator would be a small teenie-tiny
image that you stretch to whatever length in pixels or percentage you
choose. Below is an illustration of this easy effect.
|
Actual Size 5x2 pixels
Actual Size 5x2 pixels
|
Image stretched: HTML dimensions of this image is set to 180x2 pixels.
Image stretched: HTML dimensions of this image is set to 75%x2 pixels
(75% of this table cell)
|
The GOOD NEWS for members is that we have added 20 of these teenie-weenie
divider images to the members area to use in their BasicTemplates and
web site designs. This saves our members time creating their own. And
several of our templates already contain this neat little trick of the
trade.
Graphic software programs we recommend are Adobe PhotoShop, Jasc Paint
Shop Pro and Ulead PhotoImpact. All of these companies offer trial versions,
so if you cannot get comfortable with one user interface, try another
before you buy. One of the most critical factors in web design and graphic
design is to "know your software". It does not matter what you
use really as long as you know the program inside-out. It is as equally
important to be comfortable using it. If it doesn't "feel" right,
move onto something that does.
| 
