We just had a new logo designed. However, I have come across an apparent problem.

When we try to resize (reduce in size to be specific) the logo simply becomes distorted beyond recognition. It’s pretty important to be able to reduce the size, considering the logo provided to us by the designers is 436 x 231 pixels.

The logo has been supplied to us in many formats including: PSD, PNG, TIFF, JPG, GIF etc.

I have attempted to resize the logo using both Macromedia Fireworks MX and Adobe Photoshop 7. Both end in complete disaster.

Any advice on how we may go about resizing the logo without it distorting would be greatly appreciated.

Thanks for any help in advance! :)


Chris

Was the image done in vector format, Chris?

Yup, I believe so. The PNG and PSD files are vector I think.

436 x 231 pixels is the original format, you want to resize it in wich format ?

if a file is in png or psd format it does not mean it's vector inside

furthermore, people usually make bitmaps in psd and as far as png is concerned it could be vectors or no vectors, but you can not tell from the extension

if it is not too much of a problem, send me the file and I'll tell you what the problem is

nevertheless, if the image was a vector or composite of vectors, properly grouped together, it would be no problem to resize it to any size

I believe you have a bitmap image, which is not good or you have a set of vectors that are not grouped, so they get dislocated when you resize

Airnine

besides you can not just go and resize an image in your html code, you risk to get it wierd, but you have to do it using a proper software like the two you mentioned above

reducing the size it's not a problem for bitmap picture. he don't need to convert it to vector.

He have to do a proportional resizing in photoshop, as simple as that.

we should see the file

I did a resize of a logo using Photoshop 5.5 not so long ago. I don't remember if it was to make it bigger or smaller, but the principal should still apply.

I did something with the blur and some different threashold levels, and I know I could do it again if need be. I just didn't write down what id did :( so I need to experiment a little. It was a one-colour blue image and when it was used for printing, I could see I had done an excelent job with it.

Hercule - redusing the size of a bitmap can look really screwed up if the image is too small after the convertion. When a line was maybe 3 pixles thick, and the resize makes it proportionally smaller than 1 pixel, it dissapears, thereby making the image hard to recognise.

We are trying to resize whatever format, doesn't really matter. Going from the bigger size - clear as a bell, but when it's down to 100 x 100 pixels (roughly) some of the smaller text is nearly unreadable. Someone did suggest removing the smaller text and using a pixel font.
I have tried many different ways in PS. Usually the save to web function works great, but not quite doing the job here.

I'm sure Chris will appreciate any input you can provide. :)
Thanks for your input so far.

Perhaps the below link will help. It's a guide to resizing techniques without distortion. Not sure about it as I haven't personally used it.

http://www.city-gallery.com/digital/using-handles.php

Regards

Originally posted by Reptilian Feline
I did a resize of a logo using Photoshop 5.5 not so long ago. I don't remember if it was to make it bigger or smaller, but the principal should still apply.

I did something with the blur and some different threashold levels, and I know I could do it again if need be. I just didn't write down what id did :( so I need to experiment a little. It was a one-colour blue image and when it was used for printing, I could see I had done an excelent job with it.

Hercule - redusing the size of a bitmap can look really screwed up if the image is too small after the convertion. When a line was maybe 3 pixles thick, and the resize makes it proportionally smaller than 1 pixel, it dissapears, thereby making the image hard to recognise.

I know, thanks I have a 5 years university degree in this area...

If it's in vector format, your 1 pixel large would diseapear in the same way... Because your screen is made with pixel!

Vector picture are only good for making picture bigger without glitch.

436 x 231 can't be convert to 100X100 without problem

The ratio is: 436/231=1.88
width are 1.88 time bigger than height, and you have to respect that.

you can convert your logo to 100*53 (explanation width=1.88*height -> 100=1.88*53)
and put this logo on a blank image of 100X100

For more advance user there is discussion on it:
http://www.photo.net/bboard/q-and-a-fetch-msg?msg_id=004MMk

http://www.dylanbeattie.net/magick/filters/result.html

In PS you can mark with the magic marker and convert the marking to paths. (I have a Swedish version of PS, so I'm not sure about the translation). Then you need to tweak the paths so they look good and follows the lines properly. Resize, and fill the paths, and it should be pretty clear to read.

If it's just the text, rewrite the text in PS using the same font, resize the text, remove the old embedded text, and place the text you created in it's place.

Also a good tool is to use the Unsharp mask, and play around with the different settings until the result is acceptable. It's creating an illusion of clearness, because some colors are changed.

And one last option using a cheat that includes MS Word or similar.
Take the image, place it in Word, or PowerPoint, or similar. Resize to fit your needs. Export the result as JPEG, or make sure you view it at zoom level 100%, print screen, and paste in Photoshop.
Cheating is OK when doing work like this. :D

Originally posted by Reptilian Feline

And one last option using a cheat that includes MS Word or similar.
Take the image, place it in Word, or PowerPoint, or similar. Resize to fit your needs. Export the result as JPEG, or make sure you view it at zoom level 100%, print screen, and paste in Photoshop.
Cheating is OK when doing work like this. :D

Resize in word is netter than in photoshop ???

Better solution for Reptilian Feline, put this logo, if there isn't copyright problem, I m sure someone would help you.

Well if you have been doing graphics for some time I hope you have learned some techniques, I feel that image resizing/enlarging, retouching, layers, optimizing, animation, etc, etc should come as a routine job for you if you are a web designer.

Just to give you an example:

I had a client and he used his digital camera to take a snapshot of his company's building and it was 1.197mb and the pixel size was 2160 x 1440

Being a layman and didn't know anything about web designing and wanted me to reduce it to fit his web site.

So I proceed to reduced and optimized it and later crop it to 190 x 123 pixel

Sample of the original:
1.197mb and the pixel size was 2160 x 1440
Optimized to 225.248kb

www.boomhost.com/building/building1.jpg

1) Reduced to 250 x 167 pixel using normal resizing and optimized to 10.869 original was 41.236kb after resizing

www.boomhost.com/building/building2.jpg

LOOK at the top of the building and sides, VERY DISTORTED

2) This time reduced to 250 x 167 pixel using special features and
optimized to 8.842kb original was 34.457kb after resizing

www.boomhost.com/building/building3.jpg

LOOK at the top of the building and side, hardly any distortion considering that it has been reduced to almost 1/10 on the original.

What I am trying to point out is... an image/logo of 436 x 231 pixels needs to be resized I don't see a problem reducing it to half or quarter the size without distortion unless you are not aware using special features/techniques

Anyways, below it the client's website of the original building but has been cropped to 190 x 123 pixel to balance with the other photos for your viewing if you want to see the end result of the resized optimized image on the website.


www.asiaeurowines.com

Regards

for photoshop :

http://www.the-last-dream.com/tempImage/resize.gif

It isn't difficult is it? So what's all the hoohaa about? ... a simple resizing should be using simple techniques.

Regards

Hello Everybody,
I'm a technical writer and i need to resize images in my HTML help project. I'm not a photoshop expert, needless to say.
I need to resize images from 810X479 to 65% from its size.
I captured this screen shot myself and i have it in PSD format.
I tried several means to have the image undistorted but i failed may be due to my little knowledge in photoshop. Whenever i reduce the image size the image looks blured as if i was resizing it while its flattened; like what happens when one resizes a gif image.

I dont know why this happens but i thought that having the image in the original format, with layers and everything, would enable me to reduce the size to any extent.

I need to know a simple "how to" scenario to resize the image as i'm not a pro in the technicalties of colors and layers and such stuff.

Thanks a lot

Hi

What exactly do you mean by 'distorted'?

When you reduce a bitmap image you invariably have to add a little 'unsharp mask' to compensate for the pixel colours merging.

And if you're reducing a layered file, you will have to sharpen each layer individually...

HTH :)

Hey Chris, let me have a crack at it!

I'm an all around artist who can do about anything, you wont be disapointed, believe me!