Solved

How to crisp an image in Photoshop or Illustrator for web use?

Posted on 2014-12-16
6
481 Views
Last Modified: 2014-12-24
I've created an image in Illustrator and would like to reduce it down to 45x42 px to use for the web. When I reduce the size down that small or save for the web, the curved edges look pixelated.

I've saved it as PNG, PNG24, GIF. Every time I put my image in my webpage, it comes out blurry, not crisp. I've used no background and the background of the actual site. I've made it the size I need for the web, and made it larger and then resized the IMG tag to be smaller. I've imported into Photoshop and saved. I've imported into RIOT and saved for web.

No matter what I do, it loads pixilated in the web page. (IE and Chrome.) Even from file explorer it isn't 100%, maybe slightly better than on web page though.

Is there any way of making the image crisp at a smaller size? It is a raster image, so why is it pixelating at 45x42? If I make it smaller within Illustrator, it starts pixelating.

pixelated
this is the best so far, but I need it smaller and it's still not 100% crisp.

best so far
thanks.
0
Comment
Question by:Starr Duskk
6 Comments
 
LVL 17

Expert Comment

by:selvol
ID: 40503665
How about giving us the original image.
Because there are many variables and more then one
answer

Selvol
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 250 total points
ID: 40503949
Thin curving lines at that size? It's not going to get any better than what you have already. You have a grid of pixels 45 wide by 42 tall. Each pixel can only be one rgb value for the web. The curved lines cross over pixels and many different angles but the pixels must remain square, hence the pixelated look. Only a vector graphic can maintain a hard edged curved line at that scale and only Scalable Vector Graphics (svg) are web compatible. I think it's a too complex a shape for svg though.

There's a nice illustration and description about svg on this wikipedia page.
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics
0
 
LVL 2

Author Comment

by:Starr Duskk
ID: 40503970
I found this, so I'll give converting to SVG a shot. thanks!

http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/

Since the October 2014 update of Photoshop CC, Photoshop can natively export SVG!!! This is awesome. Just select the layers you want to export, open the “File > Extract Assets” window. It lets you select layers and define in which format you want to export them one by one. You have the choice between JPEG, PNG and SVG!
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 17

Expert Comment

by:selvol
ID: 40504116
Tom Beck has an excellent suggestion with the SVG.  
One problem with the pixels is the colors. Those colors with a white BG.
The hart looks great with a black BG,

Selvol
0
 
LVL 6

Assisted Solution

by:jmpg_70
jmpg_70 earned 250 total points
ID: 40506493
I thought you could bake it in a hot oven for an hour and check the crispness after that.

If the doesn't work and you aren't able to use the SVG solution (by far the best answer) you could try creating a file the is over scaled say 400% the original and rasterise that, then scale the rasterised file.

Also tweak the blur and sharpness settings in the Save for Web dialog.

If the file you need rasterises like the thumbnail in the thread then you aren't really going to get better than what you have.
0
 
LVL 2

Author Closing Comment

by:Starr Duskk
ID: 40517293
thanks! got the SVG to work only through Illustrator. For some reason that option was disabled in Photoshop, even though we updated to the latest version. But when we shrank the window to make the image smaller to see if it kept the detail, it did not, so going to try baking it in a hot oven and checking the crispness after that!

thanks!
0

Featured Post

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Because of still there more are people in the world using Adobe Illustrator older versions like CS & CS2 I wish to forward this article.. Since a long time Adobe Illustrator CS, CS2 has released, sometimes that there was a problem when someone tr…
In this article, I'll explain how to change the color of a selection in Photoshop. I'm sure there are a couple different ways to do this in photoshop, but this is my preferred method in Photoshop. I am using Photoshop CS6 and I will be adjusting the…
In this tutorial viewers will learn how to create layer styles in Photoshop to easily apply effects to multiple items. Open a document in Photoshop: Apply layer styles to a layer by right clicking the layer in the Layers window and selecting "Blendi…
In this Micro Tutorial viewers will learn how to remove an unwanted object using Photoshop’s feature known as content-aware fill.

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question