: How to render icons with crisp edges in Illustrator This is mainly a question about the quality of logos/icons used in Websites. I create logos/icons using Illustrator but when I see icons on
This is mainly a question about the quality of logos/icons used in Websites. I create logos/icons using Illustrator but when I see icons on professional websites (see image and links), they look crisp like a text, with no blurriness. The edges are very clear. For example, please see this image, especially the search icon and the menu list icon:
This is my own Blog that has bad icons, the Logo and the Menu icon. Both of them are PNG images.
This is Entrepreneur website with awesome menu icon and search icon. If you check the Inspect Element for mobile site, you'll see that the search icon and menu icon are not images (I don't know actually the reality). It is using a pseudo element. How does it work? Maybe this has something to do with quality.
Same is true with TimeofIndia website. Here the menu icon is made using hr tag, so it's obviously great, but still the search icon is beyond understanding as it is using a pseudo element.
And another scenario is related to this Business Insider website's technique. I've seen it at most of the websites, especially Facebook like sites. They use a single image for all icons. How's it possible? If you don't understand please visit this website and check the URL of the menu and search icon's image. How's it done?
So first I would like to know how these things work? How these icons render?
Secondly why I'm not getting the quality like them? Should I stop using images like them? I'm asking this because I've tried exporting in many ways using Illustrator, with same dimensions as required, but still quality sucks. If you can see, in my own blog's (Blog) mobile site, the middle horizontal bar is blurred despite the original image looks awesome before upload. Why is that?
I think these are too many questions. I would appreciate if you can provide suitable links to understand these things fully, if explaining them here is not easy.
Thank you.
More posts by @Goswami567
2 Comments
Sorted by latest first Latest Oldest Best
Use icon fonts for atleast the hamburger menu
Since im not in India i get redirected to non-indian site so hard to say.
it is a icon font it is defined thus:
.s::before {
color: #fff ;
content: "";
font: bold 25px/1 "Genericons";
position: relative;
}
To work it depends on the font Genericons
They are cropped by css instructions read more here: css-sprites
These sites are using vectors. When you export as png you can maintain a lot of quality, but with an svg (vector) you maintain the full integrity of the graphic.
From AI, you can export to svg directly. If you intend to include text in the graphic, you need to "expand" the text to capture the outlines of the letters.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.