Полезные программы для тестирования верстки

Верстка

Типограф

Инструмент для верстки: расставляет неразрывные пробелы, правильные кавычки и тире. Это экономит дизайнеру время при форматировании больших объемов текста: статей, лонгридов, новостей или записей в блоге.

Типограф студии Артемия Лебедева.
Типограф студии Артемия Лебедева.

Типографская раскладка Ильи Бирмана

Незаменимый инструмент дизайнера для быстрого набора или вставки правильного тире, математического символа, ударения или глифа. Его разработал Илья Бирман, арт-директор бюро Артема Горбунова.

Ранее, чтобы поставить символ, нужно было знать наизусть код этого символа. Например, открывающая кавычка на Windows ставилась сочетанием Alt+0171, а закрывающая — Alt+0187. Больше не нужно запоминать коды: символы привязаны к отдельных клавишами и работают в сочетании с Alt или Alt+Shift. Например, чтобы набрать знак градуса °, используйте сочетание Alt+D. Для кавычек второго уровня „“ зажмите Alt+Shift+< и Alt+Shift+>. Программа работает на macOS и Windows.

Шпаргалка для типографской раскладки Ильи Бирмана.
Шпаргалка для типографской раскладки Ильи Бирмана.

Kern Me

Кернинг — важный навык для графического дизайнера, который требует постоянной тренировки. Игра Kern Me поможет начинающим дизайнерам развить насмотренность и научиться выбирать правильное расстояние между отдельными буквами в логотипах и заголовках. Выравнивайте буквы, набирайте очки и получайте оценки за лучшие решения.

С игрой Kern Me время летит незаметно.
С игрой Kern Me время летит незаметно.

Тренажер Ильяхова

Инструмент развивает насмотренность в верстке и типографике. В каждом задании вам показывают две картинки: одну с нормальной версткой, вторую — с ошибками. Задача — отвечать правильно и набрать как можно больше очков.

Несмотря на то, что Максим Ильяхов — не дизайнер, а главный редактор Т—Ж, он отлично разбирается в верстке. Если вы только начинаете свой путь в дизайне, с помощью этого инструмента вы научитесь находить ошибки в своих макетах и прототипах.

Шутливые тексты в заданиях делают тренажер ув
Шутливые тексты в заданиях делают тренажер увлекательным и нескучным.

Типы редакторов

Есть два основных типа:

  1. Текстовый. Классический вариант для тех, кто знаком с HTML-разметкой, знает теги, CSS-классы, умеет работать с контентом внутри страницы и понимает, как его оформлять. Эти навыки необходимы, так как в редакторе разработчик должен работать вручную, прописывая свойства с помощью текстовых параметров.
  2. Визуальный. Решение для тех, кто не понимает, что представляет собой HTML и как оформлять страницы с помощью текста. Обычно содержит в себе блоки, напоминающие конструктор. Перемещая их, пользователь может «собрать» полноценный сайт, не написав и строчки кода.

Еще есть среды для разработки. Это программы, созданные для профессиональных разработчиков и содержащие в себе весь спектр инструментов, необходимых для создания сайта или приложения с нуля. В этой статье я не буду их затрагивать. 

Видео

Полезные программы для тестирования верстки

    27.06.2019

Верстка web-страниц – это создание структуры HTML-кода, размещающего элементы web-страницы (изображения, текст и т. д.) в окне браузера таким образом, чтобы элементы дизайна выглядели аналогично макету.

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

Часто верстка тестируется «на глаз», если на проекте не предоставлены макеты. Но более эффективный способ тестирования верстки – это тестирование с использованием инструментов и наличием макетов. Это позволяет команде быть уверенной в том, что продукт будет передан конечному потребителю в соответствии с заявленными макетами и ожиданиями клиента.

Рассмотрим ниже несколько популярных инструментов для этого.

Adobe Illustrator

Adobe Illustrator – это графический редактор, используемый для обработки векторной графики. Он используется при создании изображений от логотипов компаний до макетов веб-сайтов и больших рекламных щитов.

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

Редактор имеет ряд плюсов и минусов, которые может найти для себя каждый пользователь.

Рассмотрим ряд общих достоинств:

  • большой набор инструментов для создания графических примитивов;
  • широкий спектр инструментов для оформления и трансформации объектов (инструменты для создания перспективы с использованием сетки, объединения и разъединения фигур, регулировки ширины, деформации и изменения формы);
  • и зображения, выполненные в Illustrator, не занимают большого объема памяти.

При этом есть несколько замечаний по редактору:

  • ограниченное количество общедоступных наработок, разнообразных надстроек и шаблонов;
  • программа достаточно сложна и ориентирована на использование опытными дизайнерами, в основном, при работе на «качество» выпускаемой продукции;
  • Illustrator достаточно требователен к ресурсам ПК.

Adobe Photoshop

Adobe Photoshop – один из знаменитейших графических редакторов, имеющий большое количество функций, позволяющих положительно влиять на качество работы.

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

К достоинствам можно отнести:

  • отображение контрастов, тона, цвета и т.д. в виде графиков;
  • возможность кастомизации кистей;
  • широкий спектр инструментария.

В свою очередь, к недостаткам можно отнести:

  • сложность его освоения для начинающего пользователя;
  • высокую стоимость продукта;
  • ограниченную поддержку версий ОС (установка на Linux через вспомогательное ПО).

PerfectPixel

PerfectPixel – это плагин для популярных браузеров, с помощью которого можно тестировать выполнение верстки и ее соответствие макетам.

Техника верстки, при которой сверстанный HTML-шаблон в точности (пиксель-в-пиксель) совпадает с оригиналом, PSD-макетом называется pixel perfect. И, в последнее время, это уже является неким стандартом реализации сайта. Техника предполагает, что если наложить «картинку» сверстанного HTML-шаблона на картинку оригинального PSD-макета, то обе картинки должны совпасть (все элементы картинок: текст, изображения, графические элементы).

  • плагин доступен для всех популярных браузеров;
  • поддержка нескольких наложений;
  • простой интерфейс;
  • функция масштабирования (полезна для оптимизации изображений для разных экранов PPI / Retina);
  • поддержка клавиатуры;
  • корректировка элементов страницы в реальном времени в соответствии с активным наложением.
  • необходимость наличия PSD-макетов для конвертации в PNG/JPG или готовый файл с оригинального PSD-макета;
  • отсутствие поддержки других популярных форматов изображений (TIFF, TGA, WebP и прочие).

Как тестировать верстку в вышеупомянутых программах

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

Тестирование верстки в PerfectPixel

Перед экспортом в PNG-изображение PSD-макет необходимо привести к оригинальному размеру! Для этого в Photoshop зарезервирована комбинация hotkeys: Ctrl+1 – под WindowsLinux, Cmd+1 – под Mac OS X.

Как только PNG-копия PSD-макета подготовлена и сохранена, необходимо открыть в окне браузера сверстанную по этому макету HTML-страницу.

Далее необходимо установить или запустить плагин PerfectPixel из панели инструментов браузера. Сразу же появится окно плагина, в котором будет предложено выбрать заранее подготовленный слой. Добавив слой, его нужно попытаться совместить со сверстанной страницей сайта. Если все совпало – значит сайт выполнен в соответствии с макетом. Если нет, то необходимо описать баг-репорт, указав какие именно элементы не совпали для какой страницы. Ниже можно увидеть, как выглядит интерфейс текущей версии плагина, а также доступные опции.

На скриншоте видно, что шапка HTML-страницы совпадает c PNG-оригиналом, а блок с баннером – нет.

Теги

Adblock
detector