Москва не сразу строилась, да и у наших иконок долгая история.
Ни для кого не секрет, надеюсь, что это нормальная практика нарабатывать опыт и работы в области коддинга, дизайна и других областях сферы IT связанные с интеллектуальной собственностью. В определенный отрезок времени это даже стало приятным бонусом при приеме на работу. Когда у тебя были свои куски кода, элементы дизайна или другая приблуда ускоряющая погружение и развитие в данной сфере, это могло стать если не решающим фактором, то одним из важных.
После — на фоне появлений библиотек типа jQuery, а много позже Bootstrap и FontAwesome острая необходимость в таких штуках поотпала. Но взамен мы получили потерю уникальности веб-продуктов. Жесткую и агрессивную, я тоже этим грешил и продолжаю. Иногда.
Для популярных продуктов, которые поддерживаются сообществом это просто удобно, есть хорошая документация и достаточно изучить удобный и подходящий тебе набор функций, или хотя бы только базис и вуаля.
Касаемо того же бутстрапа, честно, не скажу точно с какого момента, есть возможность собрать проект под себя, чем на данный момент мы с удовольствием пользуемся, собирая проекты на Gulp. Просто импортируем необходимые нам компоненты, перезаписываем данные переменных (даже не используем custom.scss для перезаписи стилей).
Даже когда я начал рисовать свои иконки для разных крупных проектов из-за отсутствия времени, которое предоставлялось работодателем, приходилось использовать тот же FA, потому что он уже есть и вроде бы все на месте. Поэтому было как-то так:
- Я рисовал макет
- Начинал тогда еще нарезать иконки или делать спрайты, но все обрывалось почти не начавшись
- Пихал FA для «кроссбраузерности» и скорости
И проект, возможно так бы и остался проектом нарисованным, но недавно мы открыли маркет, и как нельзя кстати FA #5 стал условно бесплатным, что сподвигло нас вывести свой проект в свет.
Как я уже говорил, начиналась история иконок с рисования их для разных проектов. Самым первым, в котором проявление было прям очевидное — редизайн сайта OsbornRus . Тогда точно я нарисовал иконку сравнения товаров — rege-compare. И на данный момент она осталась почти неизменной. Став, в кой-то мере эталоном для остальных.
Сейчас, спустя приличное время, я взялся за эти иконки. Сперва я выложил их в формате ai просто на сайт . А затем началось самое интересное: я начал проект Vivaldo — музыкальный плеер и по совместимости дизайн сайта для исполнителя.
К слову, проект OsbornRus, к сожалению, так и не увидел на данный момент свет. Сайт делался на битрикс, завис, завял и вроде бы умер. Нет, вру, спустя года два он увидел свет.
Вернемся к действительности, в проекте Vivaldo я работал одновременно не над 1-м проектом, а сразу над четырьмя.
Это:
- Сам Vivaldo
- FA-Kit — аналог Bootstrap, но более легковесный
- PH-Kit — в данном проекте используется мало, так как мы отошли от основы, а основа это затравка на WP темы
- Icons Rage — бесплатный набор иконок, герой этой статьи
Начал я просто, нарисовав несколько иконок, которые использовал из проекта в проект. Их было всего несколько штук и они имели мало общего с нормальными профессиональными иконками. Среди них были такие иконки, как:
- Стрелки во все четыре стороны
- Шевроны в стороны
- Иконки сравнения для магазина
- Иконка корзинки
- И еще несколько рабочих штук
Иногда они дополнялись, но системы не имели. В крайних случаях спасали иконки с flaticon.
В общем я их рисовал, снова рисовал и перерисовывал.
Пока я искал информацию о том, как же правильно рисовать эти чертовы иконки, я не находил ничего толкового. К сожалению, вынужден признать, что дизайнеры, которые рисуют круто — лишены системы: чистые эмоции. Это может быть и круто, но вот лично я — человек, которые все старается подвергнуть системе.
И тут вуаля, я нашел систему.
Признаюсь честно, я, когда нахожу новую методику, сперва не подвергаю ее сомнению (если там нет очевидной дряни), пробую и осознаю.
В данном случае я пришел к следующему:
И данная система, хочу отметить, имеет место быть. Хотя на момент написания статьи я так и не открыл истинной сути именно этой сетки. Скорее всего мы раскроем ее позже, так как на данный момент мы не планируем останавливаться в создании иконок. Или создадим свою.
К плюсам иконок сетки можно отнести:
- Легкость построения
- Масштабируемость
- Хоть какая-то система
К минусам:
- Сетка не панацея, когда создаешь иконочный шрифт
- Желательно понимать, что ты делаешь
То, что мы опишем далее не рекомендуем воспринимать как беспрекословное описание действий, а лишь как наш опыт.
Чтобы корректно отобразить нарисованные иконки вам необходимо придерживаться следующих рекомендаций:
- Вам придется либо подгонять иконки под ширину области, либо подгонять ширину области под иконку
- Для экспорта рисуйте иконки минимум 500 на 500 пикселей
На экспорте вам придется либо оптимизировать иконку, что может ее исказить - Если вы рисуете иконки в стиле lineart, то масштабировать под размер не составит труда, почти.
Когда я рисовал иконки под масштаб 600 на 600, то некоторые, у которых внутренняя обводка, я масштабировал до высоты в 500px (в некоторых случаях на всю высоту), а с обводкой стандартной «в середине» на 500px — ширина обводки (в нашем случае — 35px). С полностью наружной обводкой соответственно — 2 ширины обводки т.е. 70px. Подгоняйте элементы по логике вещей, например chevron скорее всего должен быть меньше, чем элемент списка, но не обязательно. Позже это можно поправить в стилях. - Перед экспортом разбирайте обводку и вообще оформление, и собирайте контур в один неразрывный.
А теперь самое главное: инфа сотка, что первый раз, когда вы будете делать иконочный шрифт выйдет чушь. Полная. Хоть глаза закрывай. И выкалывай.
Так было и у меня, проблемными областями стали dashboard и шевроны со стрелками. Они становились шире, чем все остальным области.
Существует не один сервис для создания иконочного шрифта, такие как iconmoon, но пусть и шрифт у нас вроде бы opensource, но раскидываться им в мутках, как предлагает сервис, я не захотел. Разбираться даже не стал, но как увидел намек, что он [шрифт] может стать достоянием общественности, развернулся и ушел.
Несомненно путь который выбрал я тяжелее, на том же iconmoon присутствует тонна утилит для настройки каждой иконки индивидуально, а тут, с использованием task runner-ов ты сталкиваешься с тем, что ты должен изначально правильно все рассчитать.
Но оно и к лучшему, как я указывал выше — квесты с расчетом это самое то, что надо.
А теперь об экспорте. В качестве основного инструмента я выбрал gulp с надстройками:
- Gulp icon-font
Содержит в себе еще пачку задач обрабатывающих svg иконки, можно реализовать все чисто на них, но это не основная наша задача, поэтому может быть в другой раз - Gulp svg-sprites
В противоположность шрифту есть svg спрайты, а лучше символы. Их можно призывать волшебным use, который творит магию. И прорисовывается лучше шрифта.
Как мы уже указали, необходимо либо подгонять ширину области, либо выбрать некоторые кратности, под которые надо подгонять иконки, например у вас будет высота 500px, а ширина 500, 450, 175, где под ширину вы будете рисовать разные по ширине объекты. Под самый узкий хорошо подойдет шеврон или стрелка, а под самый широкий — иконка письма.
Опытным путем я выяснил, что идеально — когда у вас иконка занимает всю область. Но тут есть один минус, пользуясь Adobe CC может возникнуть соблазн использовать экспорт объектов:
Этот экспорт автоматически обрежет область экспорта под размеры экспортируемого объекта. Но это плохо. Вы должны быть уверены на 146%, что размер объекта идеален для иконочного шрифта.
Я очень не рекомендую использовать этот инструмент. Делайте монтажные области сами.
Далее о разнице между спрайтами и иконочным шрифтом:
Вот наш конфиг:
gulp.task('iconfont', function(done){ var iconStream = gulp.src(['source/svg/*.svg']) .pipe(iconfont({ fontName: 'rage-icons', normalize: false, prependUnicode: true, startUnicode: 0xE001, //fontHeight: 550, formats: ['ttf', 'eot', 'woff','truetype','svg','woff2'], copyright: 'iAmStudio', centerHorizontally: false, //ascent : 50, descent : 60, })); async.parallel([ function handleGlyphs(cb) { iconStream.on('glyphs', function(glyphs, options) { // Font css gulp.src('source/templates/font-rage.css') .pipe(consolidate('lodash', { glyphs: glyphs, fontName: 'rage-icons', fontPath: '../fonts/', className: 'rage', })) .pipe(gulp.dest('dist/css/')) .on('finish', cb); console.log(glyphs, options); }); }, function handleFonts(cb) { iconStream .pipe(gulp.dest('dist/fonts/')) .on('finish', cb); } ], done); });
Основная часть генерации шрифта находится в первой переменной iconStream:
- fontName — название шрифта, название пойдет в ссылки и название самих шрифтов
- normalize — по умолчанию отключено, но тут я игрался с размерами
prependUnicode — в этой опции внезапно вылезла и проблема, и спасение. Чтобы при изменении иконок (добавлении, удалении) не менялся их unicode необходимо включить эту опцию. Тогда к исходникам будет добавлен в начале название файла юникод. Вот таким образом.
Проблема, как оказалось, в том, что так называть файлы противоречит концепции “все и сразу". Ведь у меня для таких случаев один файл в иллюстраторе и необходимое кол-во монтажных областей. Так можно видеть сразу все. И для экспорта каждую монтажную область необходимо переименовать с учетом их названий в папке ресурсов. Это реальная проблема, потому что генерируя символы (gulp-sprites) названия необходимы без префиксов. Решение вышло костыльное — я создал 2 файла для экспорта, одно с названием монтажных областей с юникодами, другое без.
- startUnicode — у нас стало персональным фетишем, а вообще может реально спасти, когда вы используете 2 и более набора шрифтов в проекте. Просто задайте максимальное значение предыдущего шрифта и тогда этот настроится как бы сверху. На самом деле все равно, шрифты-то разные, но нам в общем не пригодилось. Сделали по-красоте ибо в оригинале стоит другое значение не от нулей.
- fontHeight — спасает, если у вас маленькие иконки и включен normalize: true.
- centerHorizontaly — скорее всего не даст результата
- ascent — из области профессионального построения шрифтов, опуск шрифта, может спасти, когда размеры шрифта разные, вы построили по меткам и надо его подравнять.
- descent — подъем шрифта, тоже может выручить
Далее идет создание css стилей для работы иконок. Мы привязали класс rage к тегу i, дабы разделить иконки шрифта от svg с тем же классом.
Данную методу я использовал по причине того, что шрифты можно приравнять к растровому изображению, прорисовка их явно хромает, и приходится загружать сразу несколько шрифтов, чтобы наверняка.
SVG символы можно использовать очень удобно: это просто и прорисовка будет кошерная. Плюс есть много плюшек в отличии от шрифта, самый банальный пример — для svg символа можно явно указать обводку в стилях или при вызове. И при этом можно использовать точно также, как шрифт, для этого необходимо указать:
- font-size: 1em — для родителя
- height + width: 1em — обязательно необходимо указать размеры, иначе сплющится иконка и ее не будет видно
- fill: currentColor — тогда иконка будет наследовать свойство color.
gulp.task('symbols', function () { gulp.src('source/symbols/*.svg') .pipe(svgSprite({ mode:'symbols', svgId: 'rage-%f', preview: false, })) .pipe(gulp.dest('dist/')); });
Конфиг проще, чем для шрифта:
- mode — режим обработки, можно также выбрать и спрайты, но это не наш случай
- svgId — %f — в данном случае это название файла. Вот из-за чего нельзя использовать экспортные случаи с юникодом
- preview — создает файл html где перечислены все иконки.
- Прорисовка
- Кастомизация
Вообще рассуждать можно долго, но следует отметить и плюсы шрифта иконочного, как минимум это низкий порог вхождения пользователя. Подключил и используешь.
Тем не менее для svg не требует много манипуляций. Его нужно подключить непосредственно встроив в документ в body в самом начале, чтобы отработало наверняка. И далее просто вызывать в конструкции:
<svg class="rage"><use xlink:href="#rage-name"/></svg>
- Если явно указать fill="currentColor" в коде символа, то повлиять на него с помощью css будет уже нельзя, только указывая свойство color
- Internet Explorer чистит кеш, а Edge без перезапуска не ест новые стили
Надеемся данная статья вам поможет в свои начинаниях