boikov.net

Иконочные шрифты Векторная графика на сайте

Обычно сайт создается в следующей последовательности

  1. Сначала выбирается или рисуется макет сайта в графическом редакторе
  2. Затем этот макет преобразуется в   html  код. Это процесс верстки сайта.
  3. Макет, полученный в процессе верстки наполняются содержанием (тексты, фотографии)

Таким образом Верстка сайта — это процесс создания веб-страницы по готовому макету. Обычно в качестве макета используется графический шаблон, созданный в программе Adobe Photoshop, он называется PSD (PhotoShop Document) шаблоном.

 Контент сайта — это вся информация размещённая на страницах сайта

Разработка сайта у нас  — это процесс создания макета, верстки сайта, и проработка способов размещения контента контент-менеджером или непосредственно заказчиком сайта.

Иконочные шрифты и векторная графика могут быть использованы как на стадии верстки сайта, так и на стадии наполнения сайта контентом. Возможность использования векторной графики контент-менеджером реализуется при проработке способов размещения контента. Причем все графика размещенная на стадии верстки (при заказе сайта у нас) — векторная. Почему векторная, и как возможно использовать элементы векторной графики при размещении контента рассмотрим в этой статье.

Когда-то  верстальщики верстали при помощи таблиц. Такая верстка занимала не много времени, корректно отображалась во всех браузерах, и никто даже и не думал использовать какие-то там слои.  Но время шло, Интернет развивался и эволюционировал, и возможности таблиц иссякли, а верстальщикам стало крайне некомфортно в табличной “клетке”. Тут то до них и дошло, что таблицы нужно использовать только для табличных данных! И интернетом стали править слои.

Настала эра WEB 2.0, овальные стеклянные кнопки с тенями, отражающийся логотип с бликами, и прочие “прелести”. Так получилось, что избавившись от одной заразы, подцепили другую: растровые изображения.

Главная мысль использования векторной графики  заключается в том, что Интернет – векторный, и растровые изображения должны использоваться ТОЛЬКО для фотографий. По своей сути любой сайт – это интерфейс, и все интерфейсы должны быть векторными. С появлением highDPI дисплеев плохая верстка моментально детектируется при посещении сайта.

Запомните! Фотографии – растр, всё остальное вектор. Только векторные изображения способны обеспечить адаптивность сайта к любым устройствам и экранам.

Векторные изображения в формате SVG

Этот формат представляет собой открытый стандарт, не являющийся чьей-либо собственностью. Он основан на XML язык разметки и предназначен для описания двухмерной векторной графики. Формат поддерживается многими веб-браузерами и может быть использован при оформлении веб-страниц. 

Иконочный шрифт

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

Преимущества векторной графики

  • Векторная графика четко отображаются на всех экранах устройств
  • Легко масштабируется
  • Меньший размер по сравнению с растровыми изображениями
  • Возможность применения CSS стилей
  • Изменение дизайна сайта без перерисовки графики
  • Масштабирование: в отличие от растровой графики, SVG не теряет в качестве при масштабировании, поэтому ее удобно использовать для разработки под retina.
  • Уменьшение HTTP-запросов: при использовании SVG сокращается количество обращений к серверу, соответственно увеличивается скорость загрузки сайта.
  • Стайлинг и скриптинг: при помощи CSS можно менять параметры графики на сайте, например фон, прозрачность или границы.
  • Анимация и редактирование: при помощи javascript можно анимировать SVG
  • Малый размер: объекты SVG весят намного меньше растровых изображений.

Как уже было отмечено ранее, заказывая сайт у нас, Вы получаете сайт, в котором все изображения шаблона в векторном формате. Кроме того вы можете заказать специальный набор иконок или набор векторных рисунков для размещения Вашего контента. Например каждый материал раздела «Инструкции» этого сайта сопровождается иконкой. На вашем сайте также может быть похожий раздел.  К каждому сайту, если иное не предусмотрено техническим заданием прикреплен набор иконок FontAwesome. Если этого набора достаточно для оформления сайта, то использовании е иконок из этого набора отдельно не оплачивается. Ориентировочную  стоимость одной иконок вы можете узнать на главной странице нашего сайта.