Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Resizing a complex image using Adobe

4:18 pm on Oct 22, 2012 (gmt 0)

10+ Year Member

I have this heading image at the top of all pages on one website. It's basically a top line 800 by 35 pixels separating the heading section (logo etc) from the rest of the content. I want to increase the site's width so I need to increase the image's width from 800 to 960 px. Normally this can be done easily in Adobe Illustrator or Photoshop. This image however has some text at the left end, so simply increasing its width causes distorsion. This might be a dumb question, but is there a way to resize it in Adobe or Gimp starting somewhere in the middle of the image therefore leaving the section with text intact?
11:49 am on Oct 23, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

By the sounds of it you can repeat a portion of the BG that doesn't contain the text?

If so, and sssuming this graphic is vector (png, jpeg, gif) I'd use photoshop to enlarge the canvas. Then align the image to the left and then select, copy and paste a portion of the 'bar' over the final section (160px gap) into a new layer.

Then export the file through 'save for web'.

If it is a vector (eps, ai, pdf) you should be able to open it in Illi and select the bar graphic and resize independently from the text.
6:41 pm on Oct 24, 2012 (gmt 0)

10+ Year Member

Thank you. In the meantime I found Adobe Illustrator's 9 Slice Scaling which seems to be a tool built for this task (scaling portions of images). Unfortunately it doesn't work for some reason. It might have sth to do with the fact that my image is a GIF. I'm not a designer and these Adobe tools are all new to me.

I will try to use Photoshop.
8:53 pm on Oct 24, 2012 (gmt 0)

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

You need to use "content aware scaling" ( available in Photoshop CS4 and onwards )..or search for "photoshop how to stretch part of an image using content aware scaling" ( you don't need to leave the quotes on ) there are loads of videos on youtube and elsewhere that will show you how to do it..

Adobe's help page is here ..it explains it..but the web videos will give you a better idea ..it will work with text just as well as with any other part of the image..

HTH :) ..

Posting a "how to", without being able to include images wouldn't help you..and it would be very long due to the lack of images..a picture is worth a thousand words..a video can be worth tens of thousands..
9:11 am on Oct 30, 2012 (gmt 0)

10+ Year Member

Thank you Leosghost - your solution worked well. I am starting to like Photoshop and web design in general:)