Когда вы последний раз вкладывали тряпичную закладку в бумажную книгу? А когда последний раз видели телевизор с антенной-рóжками? Часто ли используете бинокль для поиска информации? Скотт Хэнсельман (Scott Hanselman) из Microsoft
искренне возмущён, что столь архаичные символы используются в качестве стандартных иконок.
Удивительно — выросло целое поколение людей, которые никогда не видели настоящую дискету, но отлично знают значок «Сохранить».
После появления сетчаточных дисплеев люди ищут такие альтернативы
PNG-значкам, которые не зависят от разрешения.
Кто-то влюбляется в шрифтовые значки, другие кричат «SVG». Сожалею, но если вы ищете панацею, то я боюсь, что её не существует. Давайте поближе поглядим, какие у нас есть варианты.
Шрифты со значками восхитительны, но…
они размыты. В них нет настоящей, попиксельной резкости. Да, использование
@font-face для значков обрело заметную популярность. Я и сам рекомендовал и даже стал
коллекционировать их. Но в таких значках есть изъян, который меня достаёт. Они всё ещё немного размываются на несетчаточных дисплеях (а таких до сих пор подавляющее большинство). Попробуйте поуправлять размером
у Криса в демонстрации и вглядитесь попристальнее. Эффект
по-разному проявляется у разных размеров, но все они имеют одну и ту же проблему «
полупиксельной размытости». Возможно, её заметить не так просто, так что вот здесь я увеличил скриншот пятнадцатипиксельного размера (а заодно и фоновый шум убрал):
10 апреля 2012, 17:51
155
Всякий такой веборазработчик или дизайнер сайтов, которому
когда-либо доводилося ознакомиться со стилевою системою
Twitter Bootstrap, уж конечно помнит, что в ней применяются
значки Glyphicons (120 штук) для оформления кнопок, и панелей инструментов, и пунктов в списках, и так далее. Распространяются эти значки бесплатно и свободно (по лицензии
CC BY 3.0).
У всех этих значков, однако же, есть общий недостаток: они растровые. Соответственно, если в значке есть диагональные или криволинейные элементы, то растянуть такой значок (для крупной кнопки или для
сетчаточных дисплеев) не удастся без неприятной потери качества.
Преодолеть этот недостаток намерен проект
Font Awesome, нацеленный на разработку бесплатного и свободного
(CC BY 3.0) шрифта, содержащего аналогичные значки не в растровой, а в векторной форме. Значки («буквы») этого шрифта легко могут принимать поэтому любой размер и любой цвет. Притом их ужé и не сто двадцать, а сто сорок.
К шрифту прилагаются стилевые файлы, позволяющие начать использование Font Awesome в Twitter Bootstrap
без каких-либо особенных усилий.
Вчера в который раз возник вопрос по подбору нескольких иконок в очередном веб-проекте. В основном пользуюсь готовыми иконками из бесплатных наборов. До недавнего времени прибегал к услугам сайта iconpicker.deviantech.ru. Навигация по иконкам была хоть и не самая удобная, но явно лучше, чем просто проглядывать их в Finder'е (или Explorer'е). Однако в последнее время сайт недоступен.
В итоге решил сделать собственный навигатор по иконкам:
23 февраля 2012, 19:27
578

Предыдущие статьи про иконки породили множество вопросов о технике рисования таких, по сути, мини иллюстраций. Постараюсь раскрыть эту немудреную тайну:)
Подробного описания, что и куда нажать не привожу, это бы потребовало написания целой серии уроков, а хочу поделиться общим принципом.
В качестве примера взял иконку из текущего проекта.
Сервис
Rizzoma — это система коллаборации, альтернатива Google-wave.
В ходе работы над сайтом родилась идея сделать красивые иконки для каждого блока с преимуществами сервиса. Улитка символизирует
контекстные сообщения и по сути своей является продвинутым символом @
Однажды наткнулся на занимательный пост посвященный будущему логотипов. Авторы пытались заглянуть в будущее и представить как будут выглядеть известные бренды через несколько лет.
Вдохновленный постом, я подумал, что будет интересно сделать собственную эволюцию иконок. Вариантов будущего нашего мира фантастами выдумано огромное количество и вполне вероятно что все они когда-нибудь, так или иначе сбудутся.
10 января 2012, 20:06
204
Читая блог Иконосказ, а именно топики хабраюзеров
grokru и
INCWADRA, я подумал, что попал на некий конвейер дизайнеров Apple. Нет, в этом нет ничего плохого, но тем не менее эта назойливая мысль не покидала меня весь день.
Придя вечером домой, я
стер пыль с ярлычка открыл Photoshop и нарисовал представление тех же иконок. Без бликов, закруглений и теней. Для любителей минимализма сделал альтернативную версию.
С удовольствием выслушаю критику, отвечу на вопросы и дорисую другие, необходимые вам иконки.
Скачать .png + .psd:
#1 (значки слева-снизу)
#2 (значки по центру)
Dropbox ругается на трафик, поэтому выложил на ifolder.
Вот смотрю как товарищ
grokru выложил свое творчество и прямо вдохновляюсь. И поскольку мне было скучно, я решил тоже вспомнить былое и наштампить иконок. Заняло все это порядка 18-20 минут.
Попробовал себя в народном творчестве так сказать. Может совместно создадим habrapack?
Архив с .PSD и .PNG
Отрисовал небольшое количество иконок популярных в рунете сервисов, выкладываю их в открытый доступ. Если будете интерес со стороны хабрасообщества, дорисую и другие сервисы (какие — пишите в комментариях).
Формат PNG, 50x50 px.
Вчера (17 ноября 2011 г.) в «Smashing Magazine» был
опубликован комплект бесплатных значков «Aroma», созданный Оливером Твардовским.
Бóльшая часть его — полторы сотни пиктограмм и идеограмм 24×24 пиксела:
Остальные значки (я насчитал их 103) изображают клавиши клавиатуры.
Скачать их можно
в ZIP-архиве (≈полтора мегабайта), прямую ссылку на который есть просьба не приводить за пределами «Smashing Magazine» (так сказано в readme.txt ко значкам). Мне кажется, эта просьба автора разумна, так как позволяет ему в случае чего оперативно переменить предлагаемую закачку и пресечь дальнейшее распространение прежних версий архива из разошедшихся по Сети копий и переводов блогозаписи.
18 ноября 2011, 11:26
290