Fiverr Community Forum

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

Your Fiverr Experience
#1

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

12 Likes
#2

I wonder why graphic designer asks such a question…

Sizes

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.

11 Likes
#3

So you need sharpness. I would recommend imagemagick for deblurring.

3 Likes
#4

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.

7 Likes
#5

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

3 Likes
#6

I am sorry, I can’t help more if I do not see what are we talking about here since it should not blur anything, it is favicon.

4 Likes
#7

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.

10 Likes
#8

See Fiverr example.

Vector artboard 18x18

Artboard_1818
Artboard_18182756Ă—1652 237 KB

Vector artboard 18x18 Actual Size

Screen_Illustrator_Actual_Size
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

7 Likes
#9

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.

Exactly.

5 Likes
#10

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”.

6 Likes
#11

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.

:slight_smile:

4 Likes
#12

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

3 Likes
#13

Hey @montaaz glad to see you participating on the forum. :slight_smile:

4 Likes
#14

Hey @frank_d I hope I am making a good impact :smile:

Edit: I should have done this long time ago.

3 Likes
#15

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.

3 Likes
#16

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. :laughing:

2 Likes
#17

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.

#18

SVG is the ultimate solution for web.

2 Likes
#19

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

1 Like
#20

Absolutely, OP should rather communicate their concern with Buyer than with forum users imo.

1 Like