Работа с иконками *

Одна картинка стóит доброй сотни слов, да притом и быстрее оказывает впечатление.

Как известно, символом-талисманом (mascot) Сети Фидонет является вислоухая собака, сидящая с дискетою, которую бережно удерживает в зубах. Её текстовое (псевдографическое) изображение встречается, например, в фидонетовском еженедельнике «Fidonews», где выглядит вот как:

                   __
                  /  \
                 /|oo \
                (_|  /_)
                 _`@/_ \    _
                |     | \   \\
                | (*) |  \   )) 
   ______       |__U__| /  \//
  / FIDO \       _//|| _\   /
 (________)     (_/(_|(____/

Хорошо известно также, что Томас Дженнингс, создатель сети, нарисовал её логотип от руки:



Меня несколько лет не покидала мысль (я излагал её и отдельно, и в хабрасорсинге) — мысль о том, что из этой собачки неплохо бы сделать значки (размером 16×16, 32×32, 48×48, 64×64 пикселов) для употребления и в HTML-теге <link rel="shortcut icon" href="…">, и в Windows, и в других графических интерфейсах.

Я рад объявить сегодня, что DarkWood воплотил этот замысел. Представляю вашему вниманию нарисованные им значки, которые с его согласия будут распространяться по лицензии Creative Commons Attribution 3.0:

Самая большая коллекция флагов: 2400 пиктограмм размерами 16×16, 24×24, 32×32, 48×48 и 64×64. Есть государственные флаги всех стран, плюс бонусы: Англия, Абхазия, Нагорный Карабах, Красный крест, Южная Осетия, Сомалиленд, флаг Марса, НАТО и проч.

Все иконки в двух вариантах: стандартный и глянцевый.

Скачать:
www.gosquared.com/download/pixels/flags.zip

Лицензия MIT (GPL-совместимая), разрешает использование иконок в коммерческих проектах.

Привет уважаемое хабрасообщество, этот пост служит продолжением еще недавно активно обсуждаемой темы о социальных иконках [1] [2]. Мысль, которая пришла ко мне в голову после прочтения этих статей, привела к появлению нового вектора развития этой темы. Кстати о векторе, например бывает так, что дизайн разрабатываемого сайта или приложения имеет свою специфику и интегрировать стандартные иконки социальных сервисов без адаптации не представляется возможным. В таком случае мы берем в руки гугл и принимаемся за поиск нужных логотипов, для того чтобы создать подходящий набор иконок. Ах да я немного отвлекся, продолжим о векторе, чтобы не проделывать такие скучные действия, я собрал воедино несколько популярных иконок в векторе и теперь каждый желающий может сэкономить немного времени воспользовавшись им.

Когда вы последний раз вкладывали тряпичную закладку в бумажную книгу? А когда последний раз видели телевизор с антенной-рóжками? Часто ли используете бинокль для поиска информации? Скотт Хэнсельман (Scott Hanselman) из Microsoft искренне возмущён, что столь архаичные символы используются в качестве стандартных иконок.



Удивительно — выросло целое поколение людей, которые никогда не видели настоящую дискету, но отлично знают значок «Сохранить».

После появления сетчаточных дисплеев люди ищут такие альтернативы PNG-значкам, которые не зависят от разрешения. Кто-то влюбляется в шрифтовые значки, другие кричат «SVG». Сожалею, но если вы ищете панацею, то я боюсь, что её не существует. Давайте поближе поглядим, какие у нас есть варианты.

Шрифты со значками восхитительны, но…

они размыты. В них нет настоящей, попиксельной резкости. Да, использование @font-face для значков обрело заметную популярность. Я и сам рекомендовал и даже стал коллекционировать их. Но в таких значках есть изъян, который меня достаёт. Они всё ещё немного размываются на несетчаточных дисплеях (а таких до сих пор подавляющее большинство). Попробуйте поуправлять размером у Криса в демонстрации и вглядитесь попристальнее. Эффект по-разному проявляется у разных размеров, но все они имеют одну и ту же проблему «полупиксельной размытости». Возможно, её заметить не так просто, так что вот здесь я увеличил скриншот пятнадцатипиксельного размера (а заодно и фоновый шум убрал):

Всякий такой веборазработчик или дизайнер сайтов, которому когда-либо доводилося ознакомиться со стилевою системою Twitter Bootstrap, уж конечно помнит, что в ней применяются значки Glyphicons (120 штук) для оформления кнопок, и панелей инструментов, и пунктов в списках, и так далее. Распространяются эти значки бесплатно и свободно (по лицензии CC BY 3.0).

У всех этих значков, однако же, есть общий недостаток: они растровые. Соответственно, если в значке есть диагональные или криволинейные элементы, то растянуть такой значок (для крупной кнопки или для сетчаточных дисплеев) не удастся без неприятной потери качества.

Преодолеть этот недостаток намерен проект Font Awesome, нацеленный на разработку бесплатного и свободного (CC BY 3.0) шрифта, содержащего аналогичные значки не в растровой, а в векторной форме. Значки («буквы») этого шрифта легко могут принимать поэтому любой размер и любой цвет. Притом их ужé и не сто двадцать, а сто сорок.

К шрифту прилагаются стилевые файлы, позволяющие начать использование Font Awesome в Twitter Bootstrap без каких-либо особенных усилий.

Предыдущие статьи про иконки породили множество вопросов о технике рисования таких, по сути, мини иллюстраций. Постараюсь раскрыть эту немудреную тайну:)
Подробного описания, что и куда нажать не привожу, это бы потребовало написания целой серии уроков, а хочу поделиться общим принципом.

В качестве примера взял иконку из текущего проекта.
Сервис Rizzoma — это система коллаборации, альтернатива Google-wave.
В ходе работы над сайтом родилась идея сделать красивые иконки для каждого блока с преимуществами сервиса. Улитка символизирует контекстные сообщения и по сути своей является продвинутым символом @

Вчера в который раз возник вопрос по подбору нескольких иконок в очередном веб-проекте. В основном пользуюсь готовыми иконками из бесплатных наборов. До недавнего времени прибегал к услугам сайта iconpicker.deviantech.ru. Навигация по иконкам была хоть и не самая удобная, но явно лучше, чем просто проглядывать их в Finder'е (или Explorer'е). Однако в последнее время сайт недоступен.

В итоге решил сделать собственный навигатор по иконкам:

Однажды наткнулся на занимательный пост посвященный будущему логотипов. Авторы пытались заглянуть в будущее и представить как будут выглядеть известные бренды через несколько лет.

Вдохновленный постом, я подумал, что будет интересно сделать собственную эволюцию иконок. Вариантов будущего нашего мира фантастами выдумано огромное количество и вполне вероятно что все они когда-нибудь, так или иначе сбудутся.

Читая блог Иконосказ, а именно топики хабраюзеров grokru и INCWADRA, я подумал, что попал на некий конвейер дизайнеров Apple. Нет, в этом нет ничего плохого, но тем не менее эта назойливая мысль не покидала меня весь день.

Придя вечером домой, я стер пыль с ярлычка открыл Photoshop и нарисовал представление тех же иконок. Без бликов, закруглений и теней. Для любителей минимализма сделал альтернативную версию.

С удовольствием выслушаю критику, отвечу на вопросы и дорисую другие, необходимые вам иконки.

Скачать .png + .psd:

#1 (значки слева-снизу)
#2 (значки по центру)
Dropbox ругается на трафик, поэтому выложил на ifolder.

Вот смотрю как товарищ grokru выложил свое творчество и прямо вдохновляюсь. И поскольку мне было скучно, я решил тоже вспомнить былое и наштампить иконок. Заняло все это порядка 18-20 минут.



Попробовал себя в народном творчестве так сказать. Может совместно создадим habrapack?

Архив с .PSD и .PNG

Вчера (17 ноября 2011 г.) в «Smashing Magazine» был опубликован комплект бесплатных значков «Aroma», созданный Оливером Твардовским.

Бóльшая часть его — полторы сотни пиктограмм и идеограмм 24×24 пиксела:



Остальные значки (я насчитал их 103) изображают клавиши клавиатуры.

Скачать их можно в ZIP-архиве (≈полтора мегабайта), прямую ссылку на который есть просьба не приводить за пределами «Smashing Magazine» (так сказано в readme.txt ко значкам). Мне кажется, эта просьба автора разумна, так как позволяет ему в случае чего оперативно переменить предлагаемую закачку и пресечь дальнейшее распространение прежних версий архива из разошедшихся по Сети копий и переводов блогозаписи.

Один из известных разработчиков Microsoft Скорр Хансельман (Scorr Hanselman) опубликовал сообщение, в котором оправдывается по поводу изображения облака на сайте ASP.NET.



Он говорит, что после смены дизайна ASP.NET получил множество писем с подколками «классная иконка iCloud». Мол, выглядит очень похоже на пиктограмму Apple iCloud.

DesignContest.com выпустил сет из 50 иконок, предназначенных для дизайнеров. Иконки выполнены в ретро стиле и захватывают разные области дизайнерской деятельности. Вэб иконки могут использоваться как в портфолио дизайнеров, так и на любых других сатах с дизайнерско-художественной тематикой.

Создатели проекта The Noun Project поставили целью собрать пиктограммы для всех объектов в мире. Коллекцию по мере сил пополняют десятки дизайнеров из разных стран. Все иконки публикуются в формате SVG, под лицензией Creative Commons Attribution 3.0 (CC BY) или Public Domain, разбиты на тематические категории, есть поиск на русском языке.

Сделал свой вариант бейджей для Хабра.
Не то что бы мне не нравятся текущие.
Просто выдался небольшой просвет между проектами и захотелось отточить свои навыки (и возможно заодно сделать что-то общественно полезное).

Вместе с борьбой за качество и количество иконок в бесплатных сетах (снимаю шляпу перед gasyoun и Yusuke Kamiyamane) навигация по ним становится все более невыносимой. Особенно в ситуации, когда несколько проектов уже на стадии отладки и в каждом используется свой сет. Начинаешь путать названия для типовых иконок, а поиск нужной иконки в огромных PNG-картах занимает львиную долю времени.

Для того, чтобы сделать этот процесс проще и удобнее, я написал небольшое рельсовое приложение, которое умеет эти иконки сортировать и фильтровать.

Не так давно на хабре был топик, который привел на наш сайт 17 тысяч посетителей за два дня (11,828+5,100 on October 21, 2010). С 2009го года эта уже не первая волна, а последние иконки будут нарисованы в первой четверти 2012го года. Best reseller hosting providers.



Не хватает еще 1000 иконок для best email hosting. Готовы ли вы предложить метафоры, которых у нас еще не хватает? Тогда follow me…

Во многих проектах я использую известный набор иконок Fugue Icons и часто нужно создать эффект «активной\не активной» кнопки. Чтобы не перекрашивать каждый раз по иконке в серый, я перекрасил все иконки и добавил в названия файла "-gray" сохранив структуру архива.



Выкладываю архив в общее пользование, может кому пригодится.
Cкачать Fugue Icons Gray, зеркало на Яндех.Народ

Лицензия: Attribution 3.0 Unported (CC BY 3.0)
Скачать оригинальный набор Fugue Icons 3.0 можно с сайта автора или с Google Code

  Почему папки желтые
Папка — одна из самых известных метафор экранных интерфейсов.  Это очень мощный и сильный символ. За достаточно короткий период времени он сумел затмить термин, который был призван обозначать.  Понятие «директория» или «каталог» канули в Лету. Хотя «папка» когда была лишь метафорой для их обозначения в графических оболочках.

В процессе работы собирал разные факты об этой иконке, скидывал в один файл. Решил, что будет не лишним привести в более менее читабельный вид и поделиться.