Solved

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

Posted on 2014-12-16
6
440 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:BobCSD
6 Comments
 
LVL 17

Expert Comment

by:selvol
Comment Utility
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
Comment Utility
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 1

Author Comment

by:BobCSD
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 17

Expert Comment

by:selvol
Comment Utility
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
Comment Utility
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 1

Author Closing Comment

by:BobCSD
Comment Utility
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

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 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 a few layer organization tricks and tips to improve their workflow in Photoshop. Open a multi-layer document in Photoshop: View all your layers by going Window > Layers:  To make sure your layers can be identified…
In this Micro Tutorial viewers will learn how to remove an unwanted object using Photoshop’s feature known as content-aware fill.

743 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now