Geekly Articles each Day
📜 ⬆️ ⬇️

Sunset era icons from FatCow (sample by color, top 30 and other arithmetic)

The final edition of the icons




Five years ago we started to draw a set of pixel icons. Fashion was on Vista. By the end of 2013, the FatCow set has grown to 3926 icons. This is 356 more icons than Fugue , which in the spring of the same year stopped at the number 3570 (size: 16x16). 352 icons from the Fugue bonus (32x32 and 24x24) do not count (as repetitions). But the further development of the FatCow icons is frozen . Alas, we will not see a round figure from 4000 icons (work left for a month), we will not see release for retina of additional sizes of already existing icons, the development has been stopped due to lack of budget. Managed to make a trial for retina and only.

Yes, these are not mega-photo-realistic-3D still-alone-to-no-need-icons; this is an old pixel school. Where in honor was the small size and limitation of colors. It will take another 10 years ... and, we sincerely believe, pixel icons will remain in operation. And if you are a connoisseur of the ancient art forms, the days of the birth of computer graphics, please behind the curtain!

Let me give you some statistics on the use of icons on the Internet [table 1] and the latest changes to the latest (3.92) icon pack . After all, thanks to the wide distribution of icons from year to year, I received a budget for the development of the next addition to the set of free icons.
')

Table 1: Icon Usage Statistics

Of the 152,728 pages that use FatCow icons (on 34,863 domains) in the world wide web, only 228 domains (0.65%) comply with the only license condition and refer to the source (in any way convenient for themselves). As we found our pictures, a separate interesting topic, but the proportion of false positives was canceled out.

Searches for all references to a specific image (on Google)


There have been quite a few attempts to find any suitable software that is able to compile a list of resources that use our pictures, immediately by a group of 4,000 pictures. The only alternative option is to search through the 1C program, but this program is too expensive for such a task. I had to reinvent the wheel. We tried to look for icons through Google photo service.

The whole problem was to force Google to pull up icons from the disk, and not from the site, since it allegedly does not take into account some factors from the site (it’s difficult to describe in more detail, since it’s not entirely clear what parameters the search guide) This is the size and md5, width, height, color, brightness, contrast, etc.

There are 2 ways to upload images to “any” online service: either from disk or from a URL. When downloading icons from the disk to the Google image search service with a transparent background, we get the best result, since only the drawn object is taken into account - without taking into account the (very large) background component. If you fill in the icon from the site (from the URL), then the transparency is lost and then a white background color is added to the total mass of colors. However, this is only a hypothesis and it may be erroneous. Our opinion is formed from the result. Perhaps, Google employees, or those who are in the subject, will correct us.

The attempt to download from the URL and from the disk, oddly enough, had completely different results. The closest to expected (in terms of coverage) result was when booting from a computer. It remained to put the download icons from the disk to the browser on the stream. To implement this action, a browser emulator is needed, it has become a component of Selenium webdriver , which allows you to write on anything (php, C #, Java, Python, VBA, Ruby, Perl, JS).

Next, it was necessary to process all the result obtained automatically, the design of vba + selenium was chosen, in a day we got the result in the form of an array of sites, on which each of the 3926 icons are used. Processing was carried out for sizes 16x16 and 32x32 separately.

After processing this array, we received a very entertaining statistics.

Sew statistics on icons


PageRank domain statistics using FatCow icons , [table 2]



Table 2: PageRank domain statistics using FatCow icons. The arithmetic average of the total PR is 6,348 (The total and average value is processed for PR 1-9 NOT CONSIDERING n / a, 0, 10)

Top 30 domains used by the largest number of FatCow icons , [table 3]





Table 3: TOP-30 domains used by the largest number of FatCow icons

Charts TOP 30 used icons by the number of domains



Fig. 1 - TOP 30 icons used by the number of domains (size 32x32)


Fig. 2 - TOP 30 icons used by the number of domains (size 16x16)


Fig. 3 - TOP 30 icons used by the number of domains (size 16x16 and 32x32)

The breakdown by color


When sorting icons alphabetically, it often turned out that visually and in color similar icons were next to only if the name was entered color affiliation. Now we have the opportunity to download folders with icons that relate to 10 primary / basic colors and 1st mixed color - they called it Mix, for more details [table 4].

Mix color:



Table 4: Table of descriptions of the breakdown of icons by color ( download archive with colors )

The selection of colors was as follows.


First, we decided to use well-known online color detection services and drove individual icons through several services (the sequence does not matter):


Using the services received a list of colors that make up this icon. Each color is assigned a percentage value, which indicates the area filled with this color in the icon (in% ratio of the total amount of colors).

The basis was taken 10 basic colors of the site labs.tineye.com . Other options just did not have time to consider.


Service labs.tineye.com


The service labs.tineye.com was originally chosen because of the type of display. But later it was necessary to study other services, due to an overabundance of detailed information that required significant processing algorithms. In simple terms, it was difficult to bring a HUGE (1536 shades) number of shades to the base 10 colors + 1 color - Mix.

Color separation looks like this [figure 4]. For example: icon bug.png after processing the site looks like this: bug.png .


Rice: 4 Color breakdown for the bug.png icon by site version labs.tineye.com

Here we see representations of colors in the HEX color range. Namely, the color gamut is visually displayed, the colors in hexadecimal numbering system, the percentage area of ​​each color inside the icon, the name of the WEB color and in parentheses the base color.

If we analyze the color table (based on the Colorado potato beetle), then there are 3 options:


It is seen that the gray in percent of the filling area is larger, but when visually viewed, the prevailing color in this icon is brown.

HEX - hexadecimal representation of the color gamut. In hexadecimal, it is customary to use letters to denote numbers, but it is also possible to use letters combined with numbers.

Representation in the form of three pairs of hexadecimal digits, where each pair is responsible for its own color (# 123ABC):




Service projekty.brostudio.pl/color/



The site http://projekty.brostudio.pl/color/ showed more average results.

The service was chosen for its minimalism and the display of better-recognized data as a primary color.


Figure 5: Color breakdown for the bug.png icon according to the site projekty.brostudio.pl/color/

But due to the fact that not all the icons coincided with the visually dominant color, I had to look further.


Figure 6: Color breakdown for the brightkite icon according to the site projekty.brostudio.pl/color/


Colorexplorer.com service


The site http://www.colorexplorer.com showed the same averaged colors, but did not show their correlation [figure 7].


Figure 7: Color breakdown for the bug.png icon according to colorexplorer.com

As well as the service is largely inferior when loading icons with "littered flowers." And it was difficult to determine the dominant color.

Services:


and many others were rejected due to various unsuitable or not processed properties.

Consider another example.


Consider an example of another brightkite icon:

.

A breakdown for this icon can be seen in the figures below, [Figure 8.9].


Figure 8: Color breakdown for the brightkite icon according to the site labs.tineye.com


Figure 9: Color breakdown for the brightkite icon according to colorexplorer.com

As can be seen from the data in [Figure 8], this icon is green in terms of percentage, but in visual representation, this icon can be attributed to dark gray, but since we do not have it, we attribute it to black. Although it can also fall in a mixed color.

But we did not leave hopes, we collected color statistics from these sites in the form of the data shown in the figures above. After that we tried to process them leading to some average components. Even leaving only the dominant colors, we received very unreliable information about the actual appearance of the icons.

All this led to unnecessary processing and search for solutions that later did not pay for the time and effort invested in them.

Entertaining statistics


The only thing we consider necessary to show from these treatments is the boundaries of the distribution of the color component, which is based on the colors that were dominant in terms of percentage.

According to the site http://projekty.brostudio.pl/color/ , most closely to the truth [Figure 10], by truth we mean our visual distribution.


Figure 10: Distribution of dominant colors according to the site projekty.brostudio.pl/color/

According to the site labs.tineye.com, everything looks a little different [figure 11].


Figure 11: Distribution of dominant colors in the site version labs.tineye.com

This graph [Figure 12] shows how many icons consist of how many colors. For example, we see that 453 icons consist of one color. Those. in 453 icons, the dominant color fills> 95% of the total area of ​​the icon. Thus, it is clear from the graph that there are more than three-colored icons, 1023 icons.


Figure 12: Number of colors used in icons

Below is a graph of "our" version. The sampling was performed manually on the eye [Figure 13].


Figure 13: Distribution of dominant colors in the version "by eye"

The same graph in a different section [Figure 14].


Figure 14: Distribution of dominant colors in the version "by eye"

To summarize the results, we created a graph comparing the three versions of the dependencies of the number of icons on the colors discussed earlier [Figure 15]:

___ - projekty.brostudio.pl/color/
___ - labs.tineye.com
___ - “our version”


Figure 15: Distribution of dominant colors in the version "by eye"

Unfortunately, in addition to extensive knowledge of icons and shoveling a heap of statistical data, we did not get the desired result using the method of Ivan in Russia.

What has been done in the latest public release?




Added by:




PS For your attention, for the first time , vector source icons are presented (.ai files). Download until the file has been killed, for it weighs almost three gigabytes and can fall at any time: fatcow-hosting-icons-3.9.2-ai-src.zip

Source: https://habr.com/ru/post/249251/

More articles:


All Articles