Solved

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

Posted on 2014-12-16
6
503 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
In this article, I’ll explain how I make a clipping mask out of several separate vector objects by using the Compound Path option in Adobe Illustrator. A compound path in Illustrator allows grouping of separate objects into one set of vector paths t…
In this tutorial viewers will learn how to increase their history states in Photoshop To undo more than one history state, use Ctrl + Alt + Z, not just Ctrl + Z: View the History window by going to Window > History: The default number of history sta…
In this tutorial viewers will learn tricks for more effective scaling of vectors in Illustrator Open a document with vectors to be scaled in Illustrator: Normally, items do not keep their proportions when scaled. To fix this, hold down the shift key…

739 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