Elements8: I want to take a picture and stretch it into portrait/landscape mode

P
Posted By
PW
Oct 24, 2009
Views
1290
Replies
10
Status
Closed
How do I do this without distorting the picture? The picture is about 10 inches by 6 inches and I want to do a "banner" with it for my website and also for perhaps stationary, etc…

I can’t figure out how to do this!

Thanks,

-paulw

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

D
dorayme
Oct 24, 2009
In article ,
PW wrote:

How do I do this without distorting the picture? The picture is about 10 inches by 6 inches and I want to do a "banner" with it for my website and also for perhaps stationary, etc…

I can’t figure out how to do this!

That might seem to be asking how one can pull someone’s head off while yet leaving it on! <g>

Anyway, you must be aware that one cannot stretch a picture in one dimension without actually distorting it. But there is distortion and perception of distortion! With the right landscape, it could be hard to tell which is the natural and which is the stretched.

Perhaps you are also asking how to stretch an image in PS? That is easy, just get the image resize dialog box and untick the keep proportion box and assign a bigger width to it.

About website banners. There are different ways to stretch an image in the HTML and CSS. First, the simple way of assigning it a percentage width:

img.landscape {display:block; width:100%;}

for

<img class="landscape" src="landscape.jpg" alt="">

The other way is to use the image as a background image:

..landscapeHolder {width: 100%; background: #fff url(landscape.jpg);}

<div class="landscapeHolder"></div>

The danger here is that if you set the image to ‘repeat-x’, it might not be to your liking. If you set to no-repeat, it would simply stop and the white (or whatever colour you choose) would show.

There is a more sophisticated solution. This consists in using an HTML image, not a background, placed to left *and* a background image in the containing element. You can make the background image to repeat the right hand end of the main image. If, for example, the right hand end is plain sky or rolling hills or something a bit bland, then it could be quite natural looking for it to repeat along horizontally. No distortion!


dorayme
AB
Alan Browne
Oct 24, 2009
PW wrote:
How do I do this without distorting the picture? The picture is about 10 inches by 6 inches and I want to do a "banner" with it for my website and also for perhaps stationary, etc…

I can’t figure out how to do this!

Nobody can. But you could crop it to the right shape.
N
nomail
Oct 24, 2009
PW wrote:

How do I do this without distorting the picture? The picture is about 10 inches by 6 inches and I want to do a "banner" with it for my website and also for perhaps stationary, etc…

I can’t figure out how to do this!

If you have Photoshop CS4, you can -depending a bit on the image- use ‘Content-Aware Scale’ to accomplish this. Of course it will not scale the image without distorting ANYTHING, but it can do it without distorting the most important elements of the image (which you can define first).


Johan W. Elzenga johan<<at>>johanfoto.nl Editor / Photographer http://www.johanfoto.com
P
PW
Oct 24, 2009
On Sat, 24 Oct 2009 19:33:53 +1100, dorayme
wrote:

In article ,
PW wrote:

How do I do this without distorting the picture? The picture is about 10 inches by 6 inches and I want to do a "banner" with it for my website and also for perhaps stationary, etc…

I can’t figure out how to do this!

That might seem to be asking how one can pull someone’s head off while yet leaving it on! <g>

Anyway, you must be aware that one cannot stretch a picture in one dimension without actually distorting it. But there is distortion and perception of distortion! With the right landscape, it could be hard to tell which is the natural and which is the stretched.

Perhaps you are also asking how to stretch an image in PS? That is easy, just get the image resize dialog box and untick the keep proportion box and assign a bigger width to it.

About website banners. There are different ways to stretch an image in the HTML and CSS. First, the simple way of assigning it a percentage width:

img.landscape {display:block; width:100%;}

for

<img class="landscape" src="landscape.jpg" alt="">
The other way is to use the image as a background image:
.landscapeHolder {width: 100%; background: #fff url(landscape.jpg);}
<div class="landscapeHolder"></div>
The danger here is that if you set the image to ‘repeat-x’, it might not be to your liking. If you set to no-repeat, it would simply stop and the white (or whatever colour you choose) would show.

There is a more sophisticated solution. This consists in using an HTML image, not a background, placed to left *and* a background image in the containing element. You can make the background image to repeat the right hand end of the main image. If, for example, the right hand end is plain sky or rolling hills or something a bit bland, then it could be quite natural looking for it to repeat along horizontally. No distortion!

Looks like great info! Thanks! I didn’t think about the HTML landscape solution.

-paul
P
PW
Oct 24, 2009
On Sat, 24 Oct 2009 11:17:10 -0400, Alan Browne
wrote:

PW wrote:
How do I do this without distorting the picture? The picture is about 10 inches by 6 inches and I want to do a "banner" with it for my website and also for perhaps stationary, etc…

I can’t figure out how to do this!

Nobody can. But you could crop it to the right shape.

Okay Alan. That is what I sort of figured. I guess I could combine multiple pictures to make one landscape pic. Oh well.

Thanks,

-paul
P
PW
Oct 24, 2009
On Sat, 24 Oct 2009 18:49:34 +0200, (Johan W.
Elzenga) wrote:

PW wrote:

How do I do this without distorting the picture? The picture is about 10 inches by 6 inches and I want to do a "banner" with it for my website and also for perhaps stationary, etc…

I can’t figure out how to do this!

If you have Photoshop CS4, you can -depending a bit on the image- use ‘Content-Aware Scale’ to accomplish this. Of course it will not scale the image without distorting ANYTHING, but it can do it without distorting the most important elements of the image (which you can define first).

What a picture of your lion!
J
Joel
Oct 24, 2009
PW wrote:

How do I do this without distorting the picture? The picture is about 10 inches by 6 inches and I want to do a "banner" with it for my website and also for perhaps stationary, etc…

I can’t figure out how to do this!

Thanks,

-paulw

Do you want to stretch to fit YOUR monitor or MINE? or other viewers?
AB
Alan Browne
Oct 25, 2009
PW wrote:
On Sat, 24 Oct 2009 11:17:10 -0400, Alan Browne
wrote:

PW wrote:
How do I do this without distorting the picture? The picture is about 10 inches by 6 inches and I want to do a "banner" with it for my website and also for perhaps stationary, etc…

I can’t figure out how to do this!
Nobody can. But you could crop it to the right shape.

Okay Alan. That is what I sort of figured. I guess I could combine multiple pictures to make one landscape pic. Oh well.

Don’t ignore what Johan says. I’m familiar with the idea of content aware scaling to reduce the size of an image, but not to stretch it out as you need.
MR
Mike Russell
Oct 26, 2009
PW wrote:

How do I do this without distorting the picture? The picture is about 10 inches by 6 inches and I want to do a "banner" with it for my website and also for perhaps stationary, etc…

I can’t figure out how to do this!

The most common way to do this is to resize your image so that it fits the desired space, then add a border to your image to fill out the extra space. After that it gets creative. The border could consist of foreground elements from another image. Another way is to split your image into pieces, reposition them, and then use the clone tool to fill in the extra space.

Mike Russell – http://www.curvemeister.com
P
PW
Oct 26, 2009
On Mon, 26 Oct 2009 10:24:44 -0700, Mike Russell
wrote:

PW wrote:

How do I do this without distorting the picture? The picture is about 10 inches by 6 inches and I want to do a "banner" with it for my website and also for perhaps stationary, etc…

I can’t figure out how to do this!

The most common way to do this is to resize your image so that it fits the desired space, then add a border to your image to fill out the extra space. After that it gets creative. The border could consist of foreground elements from another image. Another way is to split your image into pieces, reposition them, and then use the clone tool to fill in the extra space.

Good stuff! Thanks!

-paulw

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

Related Discussion Topics

Nice and short text about related topics in discussion sections