Jump to content

HELP ME! How to export 18x18 px size PNG file in High Quality


aamarteam

Recommended Posts

Badly Need Help!

One of my buyer Ordered to make an ICON design for him in 3 different sizes.

18x18 pixel
36x36 pixel
72x72 pixel

I designed the ICON in Illustrator. Now, the problem is when I export the file in PNG format it becomes too blurry. If I increase the DPI then the sizes automatically changes. I tried both PSD and AI and nothing works. My buyer needs high resolution (NOT SUPER HIGH, but Not blurry too) file and he said his competitors uses their ICONS in their website which is not blurry. Can anyone help me how can I export a PNG file in the above sizes which will be High quality?

Best Regards

Link to comment
Share on other sites

  • Replies 51
  • Created
  • Last Reply

Badly Need Help!

One of my buyer Ordered to make an ICON design for him in 3 different sizes.

18x18 pixel

36x36 pixel

72x72 pixel

I designed the ICON in Illustrator. Now, the problem is when I export the file in PNG format it becomes too blurry. If I increase the DPI then the sizes automatically changes. I tried both PSD and AI and nothing works. My buyer needs high resolution (NOT SUPER HIGH, but Not blurry too) file and he said his competitors uses their ICONS in their website which is not blurry. Can anyone help me how can I export a PNG file in the above sizes which will be High quality?

Best Regards

I wonder why graphic designer asks such a question…

Sizes

18x18 pixel

36x36 pixel

72x72 pixel

seem to be favicon sizes or something… There is not so much you can do about quality here. The only possibility to get better result is to design icon that is favicon “friendly”. I mean with less gradients, less detai,l with better contrast, etc…

Eg. 18px x 18px is the size and resolution as well. Any image shrank to 18 x 18 will look blurry or better like a streak because there is technically not enough pixels to display it sharply. Similar for 32x32 or 72x72…

You may want to try online favicon generators (google real favicon generator for example) and chose the one that returns the best result.

Link to comment
Share on other sites

When you make icon logo or whatever in AI you need to make sure that the artboard or the actual logo or whatever is in the same size as the one you want to export it.

So if I want to export 18×18px the logo has to be in that dimension in the vector program itself.

You have to resize the drawing in the vector program to be in the size for the export. If you have 3000×3000 and you export that and shrink of course you will get nothing, a blob.

Link to comment
Share on other sites

When you make icon logo or whatever in AI you need to make sure that the artboard or the actual logo or whatever is in the same size as the one you want to export it.

So if I want to export 18×18px the logo has to be in that dimension in the vector program itself.

You have to resize the drawing in the vector program to be in the size for the export. If you have 3000×3000 and you export that and shrink of course you will get nothing, a blob.

The artwork in AI is already 18x18 px and it is still producing a very blurry PNG file

Link to comment
Share on other sites

The artwork in AI is already 18x18 px and it is still producing a very blurry PNG file

as @marinapomorac said, it should not be blurred, if you set the main Ai file to 18px by 18px, export the icon at 18px by 18px, it should be ok, unless you are opening the icon with a picture viewer and it zoomed it, then yes, it will be blurred.

High resolution means more pixels, increasing the dpi will not help in any way.

Link to comment
Share on other sites

The artwork in AI is already 18x18 px and it is still producing a very blurry PNG file

See Fiverr example.

Vector artboard 18x18

Artboard_1818.thumb.jpg.038d869378de4797c17a0d9fd62c7812.jpg
Artboard_18182756×1652 237 KB

Vector artboard 18x18 Actual Size

Screen_Illustrator_Actual_Size.thumb.png.593a20bef408003eb85d14544c1dddce.png
Screen_Illustrator_Actual_Size1162×986 3.29 KB

Export from vector to png raster 18x18 out of Illustrator. Favicon can’t be vector at the moment.

Fiverr1818.png.ccb9e9ac768948600513490afbeaeda1.png

Link to comment
Share on other sites

Guest humanissocial

as @marinapomorac said, it should not be blurred, if you set the main Ai file to 18px by 18px, export the icon at 18px by 18px, it should be ok, unless you are opening the icon with a picture viewer and it zoomed it, then yes, it will be blurred.

High resolution means more pixels, increasing the dpi will not help in any way.

High resolution means more pixels, increasing the dpi will not help in any way.

If someone is selling design services, they really should know this.

It’s frustrating to see people charging money for things when they don’t yet know the fundamentals.

I wonder why graphic designer asks such a question…

Exactly.

Link to comment
Share on other sites

High resolution means more pixels, increasing the dpi will not help in any way.

If someone is selling design services, they really should know this.

It’s frustrating to see people charging money for things when they don’t yet know the fundamentals.

I wonder why graphic designer asks such a question…

Exactly.

If you check his profile, you can see he is a graphic designer, but he offer only printable design. I believe this is the first time he do something for web. As a designer, I totally understand that one may miss something others finds it “fundamental” and triggers hard core designers.

The only wrong thing the OP did is to ask the question in Fiverr’s forum, this have nothing to do with “your experience”.

Link to comment
Share on other sites

If you check his profile, you can see he is a graphic designer, but he offer only printable design. I believe this is the first time he do something for web. As a designer, I totally understand that one may miss something others finds it “fundamental” and triggers hard core designers.

The only wrong thing the OP did is to ask the question in Fiverr’s forum, this have nothing to do with “your experience”.

People can be blunt on the forum, yes, but OP also might have made the mistake of trying to sell a format he doesn’t already know how to provide, which is just as much a mistake and what I sense everyone is criticizing.

Asking a question isn’t inherently wrong, but there are many sellers on the platform who advertise services they aren’t competent in, and the result of their service is a bad reputation for Fiverr that hurts competent sellers.

Not sure if that’s OP’s case (buyer could’ve ordered without contacting him first), but it is something to consider.

Also, there were sellers trying to help OP, so I’m not sure it is as “wrong” a decision as you’ve said.

🙂

Link to comment
Share on other sites

People can be blunt on the forum, yes, but OP also might have made the mistake of trying to sell a format he doesn’t already know how to provide, which is just as much a mistake and what I sense everyone is criticizing.

Asking a question isn’t inherently wrong, but there are many sellers on the platform who advertise services they aren’t competent in, and the result of their service is a bad reputation for Fiverr that hurts competent sellers.

Not sure if that’s OP’s case (buyer could’ve ordered without contacting him first), but it is something to consider.

Also, there were sellers trying to help OP, so I’m not sure it is as “wrong” a decision as you’ve said.

🙂

I think it would be better if the OP did a little research on YouTube for his problem instead of posting here.

Link to comment
Share on other sites

Hey @frank_d I hope I am making a good impact 😄

Edit: I should have done this long time ago.

Your reply was exactly what I had in mind.

As a designer you tend to specialize in one area and it’s fairly common to arrive at something you’ve never done before.

The fact that the seller came on the Fiverr forum in full panic mode is a completely different thing.

I do hope the OP will learn from this experience and can do a bit of research before they take on a task they’ve never done before.

Link to comment
Share on other sites

Your reply was exactly what I had in mind.

As a designer you tend to specialize in one area and it’s fairly common to arrive at something you’ve never done before.

The fact that the seller came on the Fiverr forum in full panic mode is a completely different thing.

I do hope the OP will learn from this experience and can do a bit of research before they take on a task they’ve never done before.

The sad thing is some people judge you for not knowing something they see as “fundamental”. As long you are offering a service as a designer you should know EVERYthing.

If each time a seller gets a technical problem post it here, this will be the next HOW design. 😆

Link to comment
Share on other sites

Badly Need Help!

One of my buyer Ordered to make an ICON design for him in 3 different sizes.

18x18 pixel

36x36 pixel

72x72 pixel

I designed the ICON in Illustrator. Now, the problem is when I export the file in PNG format it becomes too blurry. If I increase the DPI then the sizes automatically changes. I tried both PSD and AI and nothing works. My buyer needs high resolution (NOT SUPER HIGH, but Not blurry too) file and he said his competitors uses their ICONS in their website which is not blurry. Can anyone help me how can I export a PNG file in the above sizes which will be High quality?

Best Regards

he said his competitors uses their ICONS in their website

This rises a question. Do they actually require raster file? Vector SVG would definitely be better option for web. You may want to ask your Buyer.

Link to comment
Share on other sites

The sad thing is some people judge you for not knowing something they see as “fundamental”. As long you are offering a service as a designer you should know EVERYthing.

If each time a seller gets a technical problem post it here, this will be the next HOW design. 😆

If each time a seller gets a technical problem post it here, this will be the next HOW design.

It´s actually a relief. People can rather help to sort out technical problem than answering “No impressions…, Warning…, No order…” topics.

Link to comment
Share on other sites

Guest humanissocial

If you check his profile, you can see he is a graphic designer, but he offer only printable design. I believe this is the first time he do something for web. As a designer, I totally understand that one may miss something others finds it “fundamental” and triggers hard core designers.

The only wrong thing the OP did is to ask the question in Fiverr’s forum, this have nothing to do with “your experience”.

I believe this is the first time he do something for web

Exactly. He accepted a job he isn’t proficient in. He doesn’t even know the principles of print friendly design yet he is taking money to do it.

That’s wrong.

Link to comment
Share on other sites

I believe this is the first time he do something for web

Exactly. He accepted a job he isn’t proficient in. He doesn’t even know the principles of print friendly design yet he is taking money to do it.

That’s wrong.

@humanissocial Let’s not judge the OP, the order could simply be “logo design”, which the OP is proficient in (see reviews). After delivery the client could ask the OP to deliver a favicon, that’s not the end of the world. He is not taking money from something out of his reach, he is not selling something out of his niche.

I personally face a new problem with each new project, does that means I am taking people’s money? If you don’t face problems, you don’t learn, and if you don’t learn, that’s the real problem.

Link to comment
Share on other sites

Guest humanissocial

@humanissocial Let’s not judge the OP, the order could simply be “logo design”, which the OP is proficient in (see reviews). After delivery the client could ask the OP to deliver a favicon, that’s not the end of the world. He is not taking money from something out of his reach, he is not selling something out of his niche.

I personally face a new problem with each new project, does that means I am taking people’s money? If you don’t face problems, you don’t learn, and if you don’t learn, that’s the real problem.

I’m not judging the OP. I’m saying it’s unethical to charge money for something you aren’t proficient in.

It’s not just a favicon. He doesn’t understand the principles.

Link to comment
Share on other sites

Guest humanissocial

@humanissocial Let’s not judge the OP, the order could simply be “logo design”, which the OP is proficient in (see reviews). After delivery the client could ask the OP to deliver a favicon, that’s not the end of the world. He is not taking money from something out of his reach, he is not selling something out of his niche.

I personally face a new problem with each new project, does that means I am taking people’s money? If you don’t face problems, you don’t learn, and if you don’t learn, that’s the real problem.

Designing for print is a whole other ball game. There are tons of important things you need to know. It’s not simply a matter of changing an export option and dpi. Dpi isn’t even the issue.

Yes he needs to learn, but he doesn’t need to charge money to do something he isn’t proficient in to learn. And a need to learn doesn’t excuse accepting a job that you don’t know how to do properly.

Link to comment
Share on other sites

I’m not judging the OP. I’m saying it’s unethical to charge money for something you aren’t proficient in.

It’s not just a favicon. He doesn’t understand the principles.

Are you a designer? or do you have deep knowledge of design principals?

I have been doing graphic design for the last 15 years, I can tell you I am still learning principals. As I said the OP is clearly a print guy, facing a problem like this doesn’t make him a fraud.

Exporting the Favicon could be a favor asked from the client. No big deal, relax.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...