homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Gold Sponsor 2015!
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

Resizing a complex image using Adobe

5+ Year Member

Msg#: 4510877 posted 4:18 pm on Oct 22, 2012 (gmt 0)

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?



WebmasterWorld Senior Member 10+ Year Member

Msg#: 4510877 posted 11:49 am on Oct 23, 2012 (gmt 0)

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.


5+ Year Member

Msg#: 4510877 posted 6:41 pm on Oct 24, 2012 (gmt 0)

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.


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

Msg#: 4510877 posted 8:53 pm on Oct 24, 2012 (gmt 0)

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..


5+ Year Member

Msg#: 4510877 posted 9:11 am on Oct 30, 2012 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved