Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2014-12-16
6
Medium Priority
?
590 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 1000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

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 …
This article outlines the struggles that Macs encounter in Windows-dominated workplace environments – and what Mac users can do to improve their network connectivity and remain productive.
In this Micro Tutorial viewers will learn the basic shortcuts and functions of Illustrator. The viewer will learn about the paintbrush tool, anchor points, font sizing, and more.
Make a selection using the pen tool to trace the selection. Then alter the color of the selection by using the color balance option in Adobe Photoshop.
Suggested Courses

609 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