Aligning images.

  • Thread starter Thread starter John Fitzsimons
  • Start date Start date
J

John Fitzsimons

Following the excellent help I got with my recent graphics query I
decided to do another.

Suppose one has two graphics. A black square that has 3" sides and a
white square with 2" sides.

Is there any quick/easy way to "drop" (?) the second picture on the
first so that it is EXACTLY in the middle and there is the 1/2" black
border all around ? How could I do that, and in which application
please ?

Regards, John.
 
John Fitzsimons wrote in
Is there any quick/easy way to "drop" (?) the second picture on the
first so that it is EXACTLY in the middle and there is the 1/2" black
border all around ? How could I do that, and in which application
please ?
Click to expand...

Again, picture-Shark will do it. Use the smaller of the graphics as the
watermark, 0 transparency, 0 offset, centre position and go. Job done.
http://www.picture-shark.com/
 
| Suppose one has two graphics.
| A black square that has 3" sides
| and a white square with 2" sides.
|
| Is there any quick/easy way to "drop" (?) the second picture
| on the first so that it is EXACTLY in the middle and there
| is the 1/2" black border all around ?
|
| How could I do that, and in which application please ?

John ...

You might try an HTML table solution
to render a smaller square centered
inside a larger one ...

Adjust the image names, witdth, and height
as necessary ...

<table border="0" cellpadding="0" cellspacing="0"
background="sq_black_3_in.png" width="289" height="289" >
<tr>
<td align="middle" >
<img src="sq_white_2_in.png" width="192" height="192" >
</td>
</tr>
</table>
 
| Is there any quick/easy way to "drop" (?) the second picture
| on the first so that it is EXACTLY in the middle and there
| is the 1/2" black border all around ?

You might try an HTML table solution
to render a smaller square centered
inside a larger one ...
Click to expand...

< snip >

Interesting approach. Thanks for the suggestion. :-)
 
| You might try an HTML table solution
| to render a smaller square centered
| inside a larger one ...
| ....
|
| Interesting approach. Thanks for the suggestion

John ....

You can end up with some interesting original border effects
if you take a ScreenShot of the original combined table,
then move that down to where the smaller image orignially
was, and use a new and larger image for the table background,
perhaps a photo or some type of texture ....

Repeat a couple of times using successive ScreenShots
and experiment with width x height variations
to affect different border widths ....

Also adding CSS border style attributes to the table
might be interesting ....
 
Cousin said:
| You might try an HTML table solution
| to render a smaller square centered
| inside a larger one ...
| ....
|
| Interesting approach. Thanks for the suggestion
Click to expand...
John ....
Click to expand...
You can end up with some interesting original border effects
if you take a ScreenShot of the original combined table,
then move that down to where the smaller image orignially
was, and use a new and larger image for the table background,
perhaps a photo or some type of texture ....
Click to expand...
Repeat a couple of times using successive ScreenShots
and experiment with width x height variations
to affect different border widths ....
Click to expand...
Also adding CSS border style attributes to the table
might be interesting ....
Click to expand...

Better check all of this stuff on a few different browsers.

Was there some reason this couldn't be simply done -- with a graphics
program?
 
Cousin bTs ....

Using an HTML table in this manner to facillitate
the exact placement of one picture on top of another
is simply a means to an end, producing an image,
and not meant for the end result to be used in a web page,
although it could be if desired and if the originator
didn't mind slight variations in the way different browers
render differently ...

If done with successive ScreenShots as I mentioned
in a previous post, the table at the end of any number
of iterations is still a very simple, only with
one row and one column, which most browsers should handle ...
 
| Was there some reason this couldn't be simply done --
| with a graphics program?

Cousin bTs ....

My eyes are old and tired and I'm mostly mouse-challenged,
so image problem solutions that entail using numbers to specify
screen coordinates, either directly as in a CAD program
or indirectly through browser rendering, instead of
drag-and-drop eye-balled guesses usually work better for me ....

Can't speak for anyone else ....
 
Cousin said:
Cousin bTs ....
Click to expand...
Using an HTML table in this manner to facillitate
the exact placement of one picture on top of another
is simply a means to an end, producing an image,
and not meant for the end result to be used in a web page,
although it could be if desired and if the originator
didn't mind slight variations in the way different browers
render differently ...
Click to expand...

That's what I was warning about. Whether viewed online or offline,
browsers may handle it differently.
If done with successive ScreenShots as I mentioned
in a previous post, the table at the end of any number
of iterations is still a very simple, only with
one row and one column, which most browsers should handle ...
Click to expand...

I know how tables are constructed. It would be variances in how the
browswers handle positioning that would be the problem. Online or off,
they may still render differences.
 
| That's what I was warning about.
| Whether viewed online or offline,
| browsers may handle it differently.

Yes ....

If one chooses to use an HTML table
as a FINAL mechanism of display,
rendering in different browsers
could present slightly different positions
of the 2 images relative to one another,
although the result in any browser
would probably still turn out better
than I personally could do it with a mouse ...

However, if one renders the composite image
in the browser of their choice and is satisfied
with the result, and then takes a ScreenShot
of that composite image, then the relative
positions of the images are preserved
and independent of indiviual browser rendering
differences ....

A means to an end .... producing an image,
NOT an HTML table ....
 
| You might try an HTML table solution
| to render a smaller square centered
| inside a larger one ...
Click to expand...
| Interesting approach. Thanks for the suggestion
Click to expand...
John ....
Click to expand...
You can end up with some interesting original border effects
if you take a ScreenShot of the original combined table,
Click to expand...

< snip >

Golly. Another interesting idea. A screen shot is a good way to avoid
having to repeat complex HTML layouts. Will keep that in mind.
Thanks. :-)

Regards, John.
 
The drawing app in Openoffice can do that easily since it defaults to
opening and inserting bitmaps onto the center of the canvas. Make sure
the pictures have the same pixel density.

1. File->Open: bitmap1 (opens in center of canvas)
2. Insert->Graphics: bitmap2 (opens in center of canvas)
3. select both overlapped images
4. File->Export
 
The drawing app in Openoffice can do that easily since it defaults to
opening and inserting bitmaps onto the center of the canvas. Make sure
the pictures have the same pixel density.
Click to expand...
1. File->Open: bitmap1 (opens in center of canvas)
2. Insert->Graphics: bitmap2 (opens in center of canvas)
3. select both overlapped images
4. File->Export
Click to expand...

Thanks for both the answer and the "how to". :-)

Regards, John.
 
Back
Top