Lossless Resizing Images

[SusanMM]

Hi there, everybody. You guys have been so great in helping me in the past, and I really, really appreciate all your assistance. I'm begging again for assistance in resizing a logo image.

I'm working on a website for my daughter and, as it turns out, the logo I created worked fine for flyers and such, but it's way too big for the web page. Unfortunately, I am not able to re-create it in a smaller size, so I need to resize it to around 20% of the original size, but that gets blurred and fuzzy.

Does anyone know of a way to shrink a raster image (pspimage format or png or jpg) without losing the integrity of the original? It has shadows and outlines that get jagged when resizing, so I need to prevent the fuzziness and jagged edges. Is there a plugin perhaps that will do it?

Thanks so much if you are able to make suggestions.

[flagpole]

Post the image?
Or a screen cap of the resize dialogue you're using?

[MarkZ]

I don't understand why you should run into quality problems when reducing the size of an image. Have you tried, form the menu, Image/Resize? There is a number of options of how to define the new size. Try that and save as a new image so as not to destroy the original size.

By the way, which version of PSP are you using? There have been changes to how the resize options are presented. It is a good idea to include the PSP that you are using in your profile - go to User Control Panel/Profile and there is a spot to add the information at the bottom.

[flagpole]

That's what I was driving at.

[All Media Lab]

Hi Susan,

It's a shame that you did not get a proper answer to your legit question!
In modern webdesign with an iPad that has a higher resolution then a huge High Definition tv screen you need crisp and clear logo's (and images).

The reason that you can not resize logo's (raster/bitmap) the way you want without quality loss is because it is normally done
with vector based applications such as Illustrator or Corel Draw:
https://www.howtogeek.com/howto/32597/w ... d-vectors/
Paintshop Pro is limited for working with vectors!

Simply put: vectors don't show any of the artifacts that a pixel based image does when reducing or enlarging the medium.

When the logo design is created vector based you can then resize the vector and convert it to any size jpg or png or whatever without loss of quality.
You can convert the pixel based logo to vector, but the results are not predictable (I don't recommend!) and then resize and convert back to pixel.

When the logo is simple you can even export the logo as SVG and implement it in your website code like in this example:
https://www.w3schools.com/graphics/tryi ... svg_circle (zoom in on your browser and notice no loss of quality!)
Scalable Vector Graphics SVG are fully cross browser compatible and made image responsive in a simple way!

What you discovered are the the limitations of working with pixel based (bitmap) material.

I would recreate the logo in a vector based aplication!
A free and very professional application to work on your logo is Gravit Designer available for any platform:
(Gravit Designer is a full featured free vector design app right at your fingertip and has SVG export)
https://www.designer.io/

Regards,
David

[flagpole]

Hi Susan,

It's a shame that you did not get a proper answer to your legit question!
In modern webdesign with an iPad that has a higher resolution then a huge High Definition tv screen you need crisp and clear logo's (and images).

The reason that you can not resize logo's (raster/bitmap) the way you want without quality loss is because it is normally done
with vector based applications such as Illustrator or Corel Draw:
https://www.howtogeek.com/howto/32597/w ... d-vectors/
Paintshop Pro is limited for working with vectors!

Simply put: vectors don't show any of the artifacts that a pixel based image does when reducing or enlarging the medium.

When the logo design is created vector based you can then resize the vector and convert it to any size jpg or png or whatever without loss of quality.
You can convert the pixel based logo to vector, but the results are not predictable (I don't recommend!) and then resize and convert back to pixel.

When the logo is simple you can even export the logo as SVG and implement it in your website code like in this example:
https://www.w3schools.com/graphics/tryi ... svg_circle (zoom in on your browser and notice no loss of quality!)
Scalable Vector Graphics SVG are fully cross browser compatible and made image responsive in a simple way!

What you discovered are the the limitations of working with pixel based (bitmap) material.

I would recreate the logo in a vector based aplication!
A free and very professional application to work on your logo is Gravit Designer available for any platform:
(Gravit Designer is a full featured free vector design app right at your fingertip and has SVG export)
https://www.designer.io/

Regards,
David

Jerk

[JoeB]

@AllMediaLab,

Whether or not Gravit is a useful tool, you failed to either read SusanMM's post adequately or simply ignored an important part and did not actually answer her question. She specifically said she is unable to recreate the original logo (and no, I don't know the reason but that's what she said). Therefore promoting a program to recreate it does not speak to her issue, which is specifically how to downsize her existing raster image and preserve the best quality possible given the downsizing. And until anyone can see the original and determine its makeup it is not possible to answer that specific question without doing guesswork.

[All Media Lab]

Hi Joe,

The topic is named

Lossless Resizing Images

Does anyone know of a way to shrink a raster image (pspimage format or png or jpg) without losing the integrity of the original?

Talking about resizing in Paintshop Pro really doesn't help, because that's not the way to handle this problem (Lossless Resizing Images).

I'm not promoting any program and name different applications!

When you read my post carefully you see that I explain this:

You can convert the pixel based logo to vector, but the results are not predictable (I don't recommend!) and then resize and convert back to pixel.

You create a vector ( in this case the logo) from the existing bitmap image and use it as a sketch for recreating the logo in vector. I don't recommend to use it as a logo to be used direct, but after
editing of course you can.

This is how to do it in Corel Draw:
https://www.youtube.com/watch?v=iJMxkQjCFbo

This is in Illustrator:
https://www.youtube.com/watch?v=argiGgAD0Ck

This is in inkskape (Free):
https://www.youtube.com/watch?v=R6dgW5J0Osw
and then use it in Gravit Designer or Inkscape.

The fact that somebody thinks she can't recreate the logo doesn't mean that it's impossible, with some good advise!
When you watch the video examples you can see that it's peanuts to create a bitmap logo in vector.

This is common knowledge in Professional Webdesign where you use Vector Applications for logo's like this:
https://www.sketchapp.com/ (Most of the icons and the logo on this website are SVG!)
and the above named in combination with Paintshop Pro or Photoshop.

Regards,

David

[hartpaul]

Hi SusanMM,

In absence of some details I make some assumptions:
You mentioned that the logo was used in flyers so that would suggest a sheet of paper about 8 x 10 inches and assuming photo quality and setting ppi at 300 / inch that would give a flyer size of 2400 x 3000 pixels roughly.
A logo might be about 1/6 of the height so that would make the logo about 400 x 500 pixels.
I used a preset shape and text tool to make a simple Logo logo on a transparent background, then added a layer below it and filled it with orange to make it a bit clearer. I applied a layer style Bevel and drop shadow to the text layer and then converted that to a raster and then merged the preset shape layer down to the test layer so the logo was on a transparent layer above the orange bottom layer.
This is what it looked like at full size 400 x 500 pixels.

I then resized one copy of the merged image to 20% ( 80 x 100 pixels) using Image > Resize.
I scaled this up to 500% and placed it beside the original and did a screenshot to show the comparison.

The other I copied to a larger 500 x 500 transparent document and using grid lines set 100 pixels apart used the Pick tool to scale the image down til it fitted between the grid lines.
I copied both images and placed thm on a new document and then cropped it so that we have the final logo at full size as you might place on a web page (80 x 100 pixels) .

04actualsize.jpg (41.87 KiB) Viewed 7299 times

When you get to that size any complex logo design will start to show evidence of pixelation and jaggies - you don't have a lot of pixels to play around with and show any intricate design.

[All Media Lab]

Hi,

from jpeg to vector to png.
This is just quickly done in Illustrator and not edited, because I don't have the time now!

logo-50-62.png (3.7 KiB) Viewed 7289 times

logo-77-96.png (7.5 KiB) Viewed 7200 times

logo-150-187.png (28.07 KiB) Viewed 7289 times

logo-200-249.png (46.94 KiB) Viewed 7289 times

I hope you notice the big difference!

Regards,

David

[mushigirl78]

Have you tried setting your resampling to smart size in the resize dialog box?